javascript (2)_javascript 스킬에서 자주 사용되는 함수-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

javascript (2)_javascript 스킬에서 자주 사용되는 함수

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:33 PM

文章主要内容列表：
16、除去数组重复项
17、操作cookie
18、判断浏览器类型
19、判断是否开启cookie
20、断是否开启JavaScript
21、 JavaScript 打字机效果
22、简单打印
23、禁止右键
24、防止垃圾邮件
25、复制（javaeye flash版）
26、阻止冒泡事件或阻止浏览器默认行为
27、关闭或跳转窗口时提示
28、用javascript获取地址栏参数
29、计算停留的时间
30、 div为空，只有背景时，背景自动增高

主要内容：
16、除去数组重复项

<script> 
Array.prototype.remove = function(){ 
 var $ = this; 
 var o1 = {}; 
 var o2 = {}; 
 var o3 = []; 
 var o; 
 
 for(var i=0;o = $[i];i++){ 
  if(o in o1){ 
   if(!(o in o2)) o2[o] = o; 
   delete $[i]; 
  }else{ 
   o1[o] = o; 
  } 
 } 
 
 $.length = 0; 
 
 for(o in o1){ 
  $.push(o); 
 } 
 
 for(o in o2){ 
  o3.push(o); 
 } 
 
 return o3; 
 
} 
 
var a = [2,2,2,3,3,3,4,4,5,6,7,7]; 
 
a.remove (); 
 
document.write(a); 
 
</script>

로그인 후 복사

17、操作cookie

// 1. 设置COOKIE 
 
// 简单型 
 
function setCookie(c_name,value,expiredays) 
{ 
var exdate=new Date() 
exdate.setDate(exdate.getDate()+expiredays) 
 
document.cookie=c_name+ "=" +escape(value)+ 
((expiredays==null) &#63; "" : ";expires="+exdate.toGMTString()) 
} 
 
// 完整型 
function SetCookie(name,value,expires,path,domain,secure) 
{ 
var expDays = expires*24*60*60*1000; 
 
var expDate = new Date(); 
expDate.setTime(expDate.getTime()+expDays); 
 
var expString = ((expires==null) &#63; "" : (";expires=”+expDate.toGMTString())) 
var pathString = ((path==null) &#63; "" : (";path="+path)) 
var domainString = ((domain==null) &#63; "" : (";domain="+domain)) 
var secureString = ((secure==true) &#63; ";secure" : "" ) 
document.cookie = name + "=" + escape(value) + expString + pathString + domainString + secureString; 
} 
 
 
// 2．获取指定名称的cookie值： 
 
function getCookie(c_name) 
{ 
if (document.cookie.length>0) 
 { 
 c_start=document.cookie.indexOf(c_name + "=") 
 if (c_start!=-1) 
 { 
 c_start=c_start + c_name.length+1 
 c_end=document.cookie.indexOf(";",c_start) 
 if (c_end==-1) c_end=document.cookie.length 
 return unescape(document.cookie.substring(c_start,c_end)) 
 } 
 } 
return "" 
} 
 
 
// 3．删除指定名称的cookie： 
 
function ClearCookie(name) 
{ 
var expDate = new Date(); 
expDate.setTime(expDate.getTime()-100); 
 
document.cookie=name+”=;expires=”+expDate.toGMTString(); 
 
} 
 
// 4. 检测cookie： 
 
function checkCookie() 
{ 
username=getCookie('username') 
if (username!=null && username!="") 
 {alert('Welcome again '+username+'!')} 
else 
 { 
 username=prompt('Please enter your name:',"") 
 if (username!=null && username!="") 
 { 
 setCookie('username',username,365) 
 } 
 } 
}

로그인 후 복사

18、获取坐标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>payment</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
 
<body style="font-size:12px;"> 
 
<script> 
var strInfo=""; 
strInfo += "网页可见区域宽:" + document.body.clientWidth + "<br>"; 
strInfo += "网页可见区域高:" + document.body.clientHeight + "<br>"; 
strInfo += "网页可见区域宽:" + document.body.offsetWidth + "(包括边线的宽)<br>"; 
strInfo += "网页可见区域高:" + document.body.offsetHeight + "(包括边线的宽)<br>"; 
strInfo += "网页正文全文宽:" + document.body.scrollWidth + "<br>"; 
strInfo += "网页正文全文高:" + document.body.scrollHeight + "<br>"; 
strInfo += "网页被卷去的高:" + document.body.scrollTop + "<br>"; 
strInfo += "网页被卷去的左:" + document.body.scrollLeft + "<br>"; 
strInfo += "网页正文部分上:" + window.screenTop + "<br>"; 
strInfo += "网页正文部分左:" + window.screenLeft + "<br>"; 
strInfo += "屏幕分辨率的高:" + window.screen.height + "<br>"; 
strInfo += "屏幕分辨率的宽:" + window.screen.width + "<br>"; 
strInfo += "屏幕可用工作区高度:" + window.screen.availHeight + "<br>"; 
strInfo += "屏幕可用工作区宽度:" + window.screen.availWidth + "<br>"; 
 
document.write(strInfo); 
</script> 
 
<br><br> 
<p> 
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 <br> 
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。<br> 
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。<br> 
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。<br> 
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。<br> 
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。<br> 
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。<br> 
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。<br> 
 
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标，event.X也一样。<br> 
但是如果设置事件对象的定位属性值为relative，event.clientX不变，而event.X返回事件对象的相对于本体的坐标。<br> 
</p> 
</body> 
</html>

로그인 후 복사

18、判断浏览器类型
Js代码

<script type="text/javascript"> 
  var Sys = {}; 
  var ua = navigator.userAgent.toLowerCase(); 
  var s; 
  (s = ua.match(/msie ([\d.]+)/)) &#63; Sys.ie = s[1] : 
  (s = ua.match(/firefox\/([\d.]+)/)) &#63; Sys.firefox = s[1] : 
  (s = ua.match(/chrome\/([\d.]+)/)) &#63; Sys.chrome = s[1] : 
  (s = ua.match(/opera.([\d.]+)/)) &#63; Sys.opera = s[1] : 
  (s = ua.match(/version\/([\d.]+).*safari/)) &#63; Sys.safari = s[1] : 0; 
 
  //以下进行测试 
  if (Sys.ie) document.write('IE: ' + Sys.ie); 
  if (Sys.firefox) document.write('Firefox: ' + Sys.firefox); 
  if (Sys.chrome) document.write('Chrome: ' + Sys.chrome); 
  if (Sys.opera) document.write('Opera: ' + Sys.opera); 
  if (Sys.safari) document.write('Safari: ' + Sys.safari); 
 </script>

로그인 후 복사

jquery版

<script src="jquery-latest.js"></script> 
<script type="text/javascript">  
$(document).ready(function(){ 
 var bro=$.browser; 
 var binfo=""; 
 if(bro.msie) {binfo="Microsoft Internet Explorer "+bro.version;} 
 if(bro.mozilla) {binfo="Mozilla Firefox "+bro.version;} 
 if(bro.safari) {binfo="Apple Safari "+bro.version;} 
 if(bro.opera) {binfo="Opera "+bro.version;} 
 alert(binfo); 
}) 
</script>

로그인 후 복사

19、判断是否开启cookie

<script> 
 function checkCookie() { 
  var result=false; 
  if(navigator.cookiesEnabled){ return true; } 
  document.cookie = "testcookie=yes;"; 
 
  var setCookie = document.cookie; 
 
  if (setCookie.indexOf("testcookie=yes") > -1){ 
   result=true; 
  }else{ 
   document.cookie = ""; 
  } 
 
  return result; 
 } 
 
  if(!checkCookie()){ 
  alert("对不起，您的浏览器的Cookie功能被禁用，请开启");  
  }else{ 
  alert("Cookie 成功开启"); 
  } 
</script>

로그인 후 복사

20、断是否开启JavaScript

// 方案 1 
 
<span id="js_enable">您关闭了JavaScript</span> 
<script type="text/javascript"> 
<!-- 
 document.getElementById("js_enable").innerHTML='您开启了JavaScript'; 
--> 
</script> 
 
// 方案 2 
 
<div id="NoJs" >您禁用了javascript。</div> 
<div id="YesJs" style="display:none;">您的Javascript是开启的</div>  
<script>  
 var NoJs= document.getElementById("NoJs"); 
 var YesJs= document.getElementById("YesJs"); 
 NoJs.style.display="none"; 
 YesJs.style.display="block"; 
</script> 
 
// 方案 3 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>检查浏览器是否开启JavaScript</title> 
</head> 
 
<body> 
如果您的浏览器支持的话，本页面什么也不会显示，如果不支持，则会出现提示！ 
<noscript>  
<body scroll=no style="text-align: center"> 
<center> 
 <table border="0" style="height: 100%; width: 100%; right: 1%; left: 1%; background: black; position: fixed"> 
  <tr> 
   <td align="center"> 
    <div style="position: fixed; font-size: 18px; z-index: 2; cursor: help; background: #F8F8FF; width: 480px; color: black; padding: 5px 5px 5px 5px; border: 1px solid; border-color: maroon; height: auto; text-align: left; left: 20%"> 
    <span style="font: bold 20px Arial; color:#F8F8FF; background: maroon; vertical-align: middle">对不起，你的浏览器没有打开JavaScript脚本支持！</span></div> 
   </td> 
  </tr> 
 </table> 
</center> 
</noscript> 
</body> 
</html>

로그인 후 복사

HTML