Home > Web Front-end > JS Tutorial > body text

Commonly used functions in javascript (2)_javascript skills

WBOY
Release: 2016-05-16 15:33:52
Original
1496 people have browsed it

文章主要内容列表:
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> 
Copy after login

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) 
 } 
 } 
}
Copy after login

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> 
Copy after login

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> 
Copy after login

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> 
Copy after login

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> 
 
Copy after login

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> 
Copy after login

HTML

Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template