JS笔记
前端笔记 2016-10-14 13:28:05 前端笔记   笔记   

原生javascript目前我认为对我比较有用的好处就是不用再多添加一个JQ库

DEMO1：JS倒计时

DEMO2：获取checkbox的值 

DEMO3：全选与取消全选

DEMO4：获取下拉菜单的值与文本

DEMO5：获取指定父元素下的子元素

DEMO6：javascript 使用数组生成html

延迟加载

JS数组与字符串转换，JS对象转JS数组，json转数组，数组转json

JS替换指定字符串

JS判断最后一个字符是否为指定字符串，如果是，则替换掉

javascript时间戳和日期字符串相互转换

获取字符串长度，中英文不限

for循环加定时器，中断循环几秒

JS阻止事件冒泡 

json中，根据指定的key值，来获取value值 

让input框只能输入数字 ，正整数（一般用于填数量）

JS字符串截取/截取字符串 

iframe自适应高度

jquery追加元素 / 插入元素

获取当前URL的参数值 / 对当前URL参数值替换成指定值

JS判断当前是浏览器，还是移动端

JS判断当前是否是微信浏览器

 

JavaScript Code复制内容到剪贴板
  1. <span class="label label-default" data-id="1" id="test">data-id是1</span>  
  2.   
  3. <script>  
  4.   var btn = document.getElementById("test");  
  5.     
  6.   //touch事件 写法1  
  7.   btn.onmousemove = function(e){  
  8.     alert("ok");  
  9.   };  
  10.   
  11.   //touch事件 写法2  
  12.   btn["onmousemove"] = function(e){  
  13.     alert("ok1");  
  14.   };  
  15.   
  16.   //click事件 写法1  
  17.   btn.onclick = function(e){  
  18.     alert("ok");  
  19.   };  
  20.   
  21.   //click事件 写法2  
  22.   btn["onclick"] = function(e){  
  23.     alert("ok1");  
  24.   };  
  25. </script>  

 

 

XML/HTML Code复制内容到剪贴板
  1. <form name="form1">  
  2.  <input type="text" id="phone" name="phone" value="">  
  3.  <input type="text" id="avatar" name="avatar">  
  4.   
  5. <select name="taocan" id="taocan">  
  6.   <option value="">选择套餐</option>  
  7.   <option value="经济套餐￥388">经济套餐￥388</option>  
  8.   <option value="标准套餐￥598">标准套餐￥598</option>  
  9.   <option value="高级套餐￥888">高级套餐￥888</option>  
  10.   <option value="豪华套餐￥1288">豪华套餐￥1288</option>  
  11.   <option value="卡通套餐￥1588">卡通套餐￥1588</option>  
  12. </select>  
  13.   
  14. <input class="vi" name="vi[]" type="checkbox" value="名片">  
  15. <input class="vi" name="vi[]" type="checkbox" value="纸杯">  
  16.   
  17. </form>  
  18. <script>  
  19. document.getElementsByName('phone').value;  //得到name=phone的数组
  20.  
  21. document.getElementsByTagName('input').value;  //得到所有标签为input的数组
  22.   
  23. document.getElementById("avatarimg").innerHTML;  
  24.   
  25. document.getElementsByClassName('vi').checked;  
  26.   
  27. document.form1.phone.focus();  
  28.   
  29. if(form1.taocan.value ==""){  
  30.      alert("套餐未选择!");  
  31.      document.form1.taocan.focus();  
  32.      return false;  
  33. }  
  34.   
  35. var vi = document.getElementsByClassName('vi');  
  36.     var j = 0;  
  37.     for (var i = 0; i < vi.length; i++) {  
  38.       if (vi[i].checked) {  
  39.         j++;  
  40.       }  
  41.     }  
  42. // alert(j); //获取多选按钮组的数量  
  43. // return false;  
  44. if(j<1){  
  45.     alert("VI项未选择!");  
  46.     document.form1.vi.focus();  
  47.     return false;  
  48. }  
  49.   
  50. </script>  

 

 

JavaScript Code复制内容到剪贴板
  1. var s= document.getElementById("test");    
  2. del_ff(s);               //清理空格    
  3. var chils= s.childNodes;  //得到s的全部子节点    
  4. var par=s.parentNode;   //得到s的父节点    
  5. var ns=s.nextSbiling;   //获得s的下一个兄弟节点    
  6. var ps=s.previousSbiling;  //得到s的上一个兄弟节点    
  7. var fc=s.firstChild;   //获得s的第一个子节点    
  8. var lc=s.lastChild;   //获得s的最后一个子节点    

 

javascript克隆一个对象并使用新对象替换它（本来是上传表单多次点击无效写的，发现这个方法没效果）：

JavaScript Code复制内容到剪贴板
  1. let imageInputObj = document.getElementById('uploadImageInput');  
  2.   
  3. let newNode = imageInputObj.cloneNode();//克隆一个上传表单  
  4. var oldNode = imageInputObj;  
  5. //imageInputObj.replaceNode(newObj);  
  6. imageInputObj.parentNode.replaceChild(newNode, oldNode);  

javascript为指定对象绑定事件：

JavaScript Code复制内容到剪贴板
  1. var fn1 = function () {alert('blue');this.style.background ='blue'};  
  2. var fn2 = function () {alert('red');this.style.background ='red'};  
  3.     
  4. function adde(){  
  5.   var d = document.getElementById('school');  
  6.   d.addEventListener('click',fn1);  
  7.   d.addEventListener('click',fn2);  
  8.  }  
  9. function reme(){  
  10.  var d = document.getElementById('school');  
  11.  //d.removeEventListener('click',fn1);//只剩fn1  
  12.  d.removeEventListener('click',fn2);  
  13. }  

 

 

 

1.addClass:为指定的dom元素添加样式
2.removeClass:删除指定dom元素的样式
3.toggleClass:如果存在(不存在)，就删除(添加)一个样式
4.hasClass:判断样式是否存在

XML/HTML Code复制内容到剪贴板
  1. <div id = "test" style = "width:250px;height:100px;">    
  2.         sssssssssssss    
  3. </div>    
  4. <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />    
  5.   
  6. <script type="text/javascript">    
  7. function hasClass(obj, cls) {    
  8.     return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));    
  9. }    
  10.     
  11. function addClass(obj, cls) {    
  12.     if (!this.hasClass(obj, cls)) obj.className += " " + cls;    
  13. }    
  14.     
  15. function removeClass(obj, cls) {    
  16.     if (hasClass(obj, cls)) {    
  17.         var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');    
  18.         obj.className = obj.className.replace(reg, ' ');    
  19.     }    
  20. }    
  21.     
  22. function toggleClass(obj,cls){    
  23.     if(hasClass(obj,cls)){    
  24.         removeClass(obj, cls);    
  25.     }else{    
  26.         addClass(obj, cls);    
  27.     }    
  28. }    
  29.     
  30. function toggleClassTest(){    
  31.     var obj = document. getElementById('test');    
  32.     toggleClass(obj,"testClass");    
  33. }    
  34. </script>    

 

 

 

JavaScript Code复制内容到剪贴板
  1. var el = document.getElementById("idHeader");   
  2. alert(el.getAttribute("id")); //获取属性为id的值  
  3. alert(el.id);  
  4.   
  5. setAttribute() 为设置属性值  
  6. el.setAttribute("disabled", true); //方式一
  7. el.className = "abc";//方式二

 

 

 js插入节点appendChild insertBefore

 1.jpg

XML/HTML Code复制内容到剪贴板
  1. <div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div>   
  2. <div id="box-one">   
  3.     <p class="con2" id="p1">1</p>   
  4.     <p class="con2" >2</p>   
  5.     <p class="con2" >3</p>   
  6. </div>   

 

2.jpg

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     window.onload = function () {   
  3.         var btn = document.getElementById("creatbtn");   
  4.         btn.onclick = function() {   
  5.             insertEle();   
  6.         }   
  7.     }   
  8.     function insertEle() {   
  9.         var oTest = document.getElementById("box-one");   
  10.         var newNode = document.createElement("div");   
  11.         newNode.innerHTML = " This is a newcon ";   
  12.         // oTest.appendChild(newNode);   
  13.         oTest.insertBefore(newNode,null); // 这两种方法均可实现,   
  14.     }   
  15. </script>  

 

3.jpg

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2.     window.onload = function () {   
  3.         var btn = document.getElementById("creatbtn");   
  4.         btn.onclick = function() {   
  5.             insertEle();   
  6.         }   
  7.     }   
  8.   
  9.     function insertEle() {   
  10.         var oTest = document.getElementById("box-one");   
  11.         var newNode = document.createElement("div");   
  12.         var reforeNode = document.getElementById("p1");   
  13.         newNode.innerHTML = " This is a newcon ";   
  14.         oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面   
  15.     }   
  16.   
  17. </script>  

 

 

4.jpg

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     window.onload = function () {   
  3.         var btn = document.getElementById("creatbtn");   
  4.         btn.onclick = function() {   
  5.             insertEle();   
  6.         }   
  7.     }   
  8.   
  9.     function insertEle() {   
  10.         var oTest = document.getElementById("box-one");   
  11.         var newNode = document.createElement("div");   
  12.         var reforeNode = document.getElementById("p1");   
  13.         newNode.innerHTML = " This is a newcon ";   
  14.         oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的前面，也就是说 插入id为P1节点元素的后面。   
  15.     }   
  16.   
  17. </script>  

 

 

1、关闭指定的dom

javascript版：

JavaScript Code复制内容到剪贴板
  1. <a href="javascript:;" onClick="document.getElementById('DV').style.display = 'none';">关闭</a>  

 

jquery版：

JavaScript Code复制内容到剪贴板
  1. <a href="javascript:;" onClick="$('#shop_car').fadeOut()">关闭</a>  

 

2、返回，退后一步，后退，后退一步

XML/HTML Code复制内容到剪贴板
  1. <a href="javascript:history.go(-1)">返回上一页</a>   
  2.   
  3. <a href="javascript:location.reload()">刷新当前页面</a>   
  4.   
  5. <a href="javascript:" onclick="history.go(-2); ">返回前两页</a>   
  6.   
  7. <a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>   
  8.   
  9. <a href="javascript:" onclick="history.back(); ">返回上一页</a>   

 

页面跳转：

XML/HTML Code复制内容到剪贴板
  1. <span onclick="window.location.href='list.php'">点击跳转</span>  

 

在新窗口打开链接，在新窗口页面跳转

JavaScript Code复制内容到剪贴板
  1. window.open("http://www.yoyo88.cn");  

 

 

Javascript刷新页面的几种方法：

JavaScript Code复制内容到剪贴板
  1. history.go(0);  
  2.   
  3. location.reload();   
  4.   
  5. location=location;  
  6.   
  7. location.assign(location);  
  8.   
  9. document.execCommand('Refresh');  
  10.   
  11. window.navigate(location);  
  12.   
  13. location.replace(location);  
  14.   
  15. document.URL=location.href;  

 

自动刷新页面的方法：

1.页面自动刷新：把如下代码加入<head>区域中

XML/HTML Code复制内容到剪贴板
  1. <meta http-equiv="refresh" content="10">  

 

10指每隔10秒刷新一次页面.

2.页面自动跳转：把如下代码加入<head>区域中

XML/HTML Code复制内容到剪贴板
  1. <meta http-equiv="refresh" content="10;url=http://www.baidu.com">  

 

10指隔10秒后跳转到http://www.baidu.com页面

 

js自动刷新当前页面：

JavaScript Code复制内容到剪贴板
  1. <script language="JavaScript">   
  2.     function myrefresh()   
  3.     {   
  4.         window.location.reload();   
  5.     }   
  6.     setTimeout('myrefresh()',1000); //指定1秒刷新一次   
  7. </script>   

 

js刷新框架

JavaScript Code复制内容到剪贴板
  1. <script language=JavaScript>   
  2. //刷新包含该框架的页面用   
  3. parent.location.reload();   
  4.   
  5. //子窗口刷新父窗口 或 <a href="javascript:opener.location.reload()">刷新</a>  
  6. self.opener.location.reload();   
  7.   
  8. //如何刷新另一个框架的页面用   
  9. parent.另一FrameID.location.reload();   
  10.   
  11. </script>   

 

js字符串常用判断方法

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">  
  2. /*  
  3.     function obj$(id)                      根据id得到对象    
  4.     function val$(id)                      根据id得到对象的值    
  5.     function trim(str)                      删除左边和右边空格    
  6.     function ltrim(str)                    删除左边空格    
  7.     function rtrim (str)                    删除右边空格    
  8.     function isEmpty(str)                  字串是否有值    
  9.     function equals(str1, str2)            js判断比较两字符串是否相等    
  10.     function equalsIgnoreCase(str1, str2)  js判断忽略大小写比较两个字符串是否相等    
  11.     function isChinese(str)                js判断判断是否中文    
  12.     function isEmail(strEmail)              js判断是否电子邮件    
  13.     function isImg(str)                    js判断是否是一个图片格式的文件jpg|jpeg|swf|gif    
  14.     function isInteger(str)                js判断是否是一个整数
  15.     function IsNum1(str)                js判断是否是正整数
  16.     function IsNum2(str)                js判断是否为数字   
  17.     function isFloat                        js判断是否是一个浮点数    
  18.     function isPost(str)                    js判断是否邮编(1位至6位    
  19.     function isMobile(str)                  js判断是否是手机号    
  20.     function isPhone(str)                  js判断是否是电话号码必须包含区号,可以含有分机号    
  21.     function isQQ(str)                      js判断是否合法的QQ号码              
  22.     function isIP(str)                      js判断是否是合法的IP    
  23.     function isDate(str)                    js判断是否日期类型(例:2005-12-12)    
  24.     function isIdCardNo(idNumber)          js判断是否是合法的身份证号    
  25. */     
  26. function obj$(id)     
  27. {     
  28.     return document.getElementById(id);     
  29. }     
  30.     
  31.     
  32. function val$(id)     
  33. {     
  34.     var obj = document.getElementById(id);     
  35.     if(obj !== null)     
  36.     {     
  37.         return obj.value;     
  38.     }     
  39.     return null;     
  40. }     
  41.     
  42.     
  43. function trim(str)     
  44. {     
  45.     return str.replace(/(^\s*)|(\s*$)/g, '');     
  46. }     
  47.     
  48.     
  49. function ltrim(str)     
  50. {     
  51.     return str.replace(/^\s*/g,'');     
  52. }     
  53.     
  54.     
  55. function rtrim(str)     
  56. {     
  57.     return str.replace(/\s*$/,'');     
  58. }     
  59.     
  60.     
  61. function isEmpty(str)     
  62. {     
  63.     if(str != null && str.length > 0)     
  64.     {     
  65.         return true;     
  66.     }     
  67.     return false;     
  68. }     
  69.     
  70.     
  71. function equals(str1, str2)     
  72. {     
  73.     if(str1 == str2)     
  74.     {     
  75.         return true;     
  76.     }     
  77.     return false;     
  78. }     
  79.     
  80.     
  81. function equalsIgnoreCase(str1, str2)     
  82. {     
  83.     if(str1.toUpperCase() == str2.toUpperCase())     
  84.     {     
  85.         return true;     
  86.     }     
  87.     return false;     
  88. }     
  89.     
  90.     
  91. function isChinese(str)     
  92. {     
  93.   var str = str.replace(/(^\s*)|(\s*$)/g,'');     
  94.   if (!(/^[\u4E00-\uFA29]*$/.test(str)     
  95.           && (!/^[\uE7C7-\uE7F3]*$/.test(str))))     
  96.   {     
  97.       return false;     
  98.   }     
  99.   return true;     
  100. }     
  101.     
  102.     
  103. function isEmail(str)     
  104. {     
  105.     if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str))     
  106.     {     
  107.         return true    
  108.     }     
  109.     return false;     
  110. }     
  111.     
  112.     
  113. function isImg(str)     
  114. {     
  115.     var objReg = new RegExp("[.]+(jpg|jpeg|swf|gif)$", "gi");     
  116.     if(objReg.test(str))     
  117.     {     
  118.         return true;     
  119.     }     
  120.     return false;     
  121. }     
  122.     
  123.     
  124. function isInteger(str)     
  125. {     
  126.     if(/^-?\d+$/.test(str))     
  127.     {     
  128.         return true;     
  129.     }     
  130.     return false;     
  131. }     
  132.     
  133.     
  134. function isFloat(str)     
  135. {     
  136.     if(/^(-?\d+)(\.\d+)?$/.test(str)     
  137.     {     
  138.         return true;     
  139.     }     
  140.     return false;     
  141. }     
  142.     
  143.     
  144. function isPost(str)     
  145. {     
  146.     if(/^\d{1,6}$/.test(str))     
  147.     {     
  148.         return true;     
  149.     }     
  150.     return false;     
  151. }     
  152.     
  153.     
  154. function isMobile(str)     
  155. {     
  156.     if(/^1[35]\d{9}/.test(str))     
  157.       {     
  158.           return true;     
  159.       }     
  160.     return false;     
  161. }     
  162.     
  163.     
  164. function isPhone(str)     
  165. {     
  166.     if(/^(0[1-9]\d{1,2}-)\d{7,8}(-\d{1,8})?/.test(str))     
  167.     {     
  168.         return true;     
  169.     }     
  170.     return false;     
  171. }     
  172.     
  173.     
  174. function isQQ(str){     
  175.     if(/^\d{5,9}$/.test(str))     
  176.     {     
  177.         return true;     
  178.     }     
  179.     return false;     
  180. }     
  181.     
  182.     
  183. function isIP(str){     
  184.     var reg = /^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$/;     
  185.     if(.test(str))     
  186.     {     
  187.         return true;     
  188.     }     
  189.     return false;     
  190. }     
  191.     
  192.     
  193. function isDate(str)     
  194. {     
  195.     var reg = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/;     
  196.     if(reg.test(str))     
  197.     {     
  198.         return true;     
  199.     }     
  200.     return false;       
  201. }     
  202.     
  203.     
  204. function isIdCardNo(idNumber)     
  205. {     
  206.     var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);     
  207.     var varArray = new Array();     
  208.     var lngProduct = 0;     
  209.     var intCheckDigit;     
  210.     var idNumber.length = ;     
  211.     
  212.     if ((idNumber.length != 15) && (idNumber.length != 18))     
  213.     {     
  214.         return false;     
  215.     }       
  216.     for(i=0;i<idNumber.length;i++)     
  217.     {     
  218.         varArray[i] = idNumber.charAt(i);     
  219.         if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17))     
  220.         {     
  221.             return false;     
  222.         }     
  223.         else if (i < 17)     
  224.         {     
  225.             varArray[i] = varArray[i]*factorArr[i];     
  226.         }     
  227.     }     
  228.     if (idNumber.length == 18)     
  229.     {     
  230.         var date8 = idNumber.substring(6,14);     
  231.         if (checkDate(date8) == false)     
  232.         {     
  233.             return false;     
  234.         }           
  235.         for(i=0;i<17;i++)     
  236.         {     
  237.             lngProduct = lngProduct + varArray[i];     
  238.         }           
  239.         intCheckDigit = 12 - lngProduct % 11;     
  240.         switch (intCheckDigit)     
  241.         {     
  242.             case 10:     
  243.                 intCheckDigit = 'X';     
  244.                 break;     
  245.             case 11:     
  246.                 intCheckDigit = 0;     
  247.                 break;     
  248.             case 12:     
  249.                 intCheckDigit = 1;     
  250.                 break;     
  251.         }           
  252.         if (varArray[17].toUpperCase() != intCheckDigit)     
  253.         {     
  254.             return false;     
  255.         }     
  256.     }     
  257.     else    
  258.     {           
  259.         var date6 = idNumber.substring(6,12);     
  260.         if (checkDate(date6) == false)     
  261.         {     
  262.             return false;     
  263.         }     
  264.     }     
  265.     return true;     
  266. }   
  267. </script>  

 

JavaScript Code复制内容到剪贴板
  1. //判断是否是正整数  
  2. function IsNum1(s)  
  3. {  
  4.     if(s!=null){  
  5.         var r,re;  
  6.         re = /\d*/i; //\d表示数字,*表示匹配多个数字  
  7.         r = s.match(re);  
  8.         return (r==s)?true:false;  
  9.     }  
  10.     return false;  
  11. }  
  12.   
  13. //判断是否为数字  
  14. function IsNum2(s)  
  15. {  
  16.     if (s!=null && s!="")  
  17.     {  
  18.         return !isNaN(s);  
  19.     }  
  20.     return false;  
  21. }  

 

 自从javascript有了各种框架之后，比如jquery，使用ajax已经变的相当简单了。但有时候为了追求简洁，可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢？下面和大家分享几种利用javascript实现原生ajax的方法。

实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器，则需要创建 ActiveXObject，具体方法如下：

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2.   var xmlHttp;  
  3.   function createxmlHttpRequest() {  
  4.     if (window.ActiveXObject) {  
  5.       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  6.     } else if (window.XMLHttpRequest) {   
  7.       xmlHttp=new XMLHttpRequest();  
  8.     }  
  9.   }  
  10. </script>  

 

（1）下面使用上面创建的xmlHttp实现最简单的ajax get请求：

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2. function doGet(url){   
  3.   // 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码   
  4.   createxmlHttpRequest();   
  5.   xmlHttp.open("GET",url);   
  6.   xmlHttp.send(null);   
  7.   xmlHttp.onreadystatechange = function() {   
  8.     if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {   
  9.       alert('success');   
  10.     } else {   
  11.       alert('fail');   
  12.     }   
  13.   }   
  14. }   
  15. </script>  

 

（2）使用上面创建的xmlHttp实现最简单的ajax post请求：

 

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2. function doPost(url,data){   
  3.   // 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码   
  4.   createxmlHttpRequest();   
  5.   xmlHttp.open("POST",url);   
  6.   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
  7.   xmlHttp.send(data);   
  8.   xmlHttp.onreadystatechange = function() {   
  9.     if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {   
  10.       alert('success');   
  11.     } else {   
  12.       alert('fail');   
  13.     }   
  14.   }   
  15. }   
  16. </script>  

 

 json中，根据指定的key值，来获取value值

JavaScript Code复制内容到剪贴板
  1. var jsonObj={"name":"傅红雪","age":"24","profession":"刺客"},key = 'age';  
  2. alert(jsonObj[''+key+'']);  

 

第二种

JavaScript Code复制内容到剪贴板
  1. console.log(eval('jsonObj.'+key))  

 

 

让input框只能输入数字 ，正整数（一般用于填数量）

在input上添加onkeyup="value=value.replace(/[^\d]/g,'')"

 

JS字符串截取/截取字符串  

JavaScript Code复制内容到剪贴板
  1. var str = "0123456789";//   
  2. alert(str.substring(0));//------------"0123456789"   
  3. alert(str.substring(5));//------------"56789"   
  4. alert(str.substring(10));//-----------""   
  5. alert(str.substring(12));//-----------""   
  6. alert(str.substring(-5));//-----------"0123456789"   
  7. alert(str.substring(-10));//----------"0123456789"   
  8. alert(str.substring(-12));//----------"0123456789"   
  9. alert(str.substring(0,5));//----------"01234"   
  10. alert(str.substring(0,10));//---------"0123456789"   
  11. alert(str.substring(0,12));//---------"0123456789"   
  12. alert(str.substring(2,0));//----------"01"   
  13. alert(str.substring(2,2));//----------""   
  14. alert(str.substring(2,5));//----------"234"   
  15. alert(str.substring(2,12));//---------"23456789"   
  16. alert(str.substring(2,-2));//---------"01"   
  17. alert(str.substring(-1,5));//---------"01234"   
  18. alert(str.substring(-1,-5));//--------""   
  19. alert(str.substr(0));//---------------"0123456789"   
  20. alert(str.substr(5));//---------------"56789"   
  21. alert(str.substr(10));//--------------""   
  22. alert(str.substr(12));//--------------""   
  23. alert(str.substr(-5));//--------------"0123456789"   
  24. alert(str.substr(-10));//-------------"0123456789"   
  25. alert(str.substr(-12));//-------------"0123456789"   
  26. alert(str.substr(0,5));//-------------"01234"   
  27. alert(str.substr(0,10));//------------"0123456789"   
  28. alert(str.substr(0,12));//------------"0123456789"   
  29. alert(str.substr(2,0));//-------------""   
  30. alert(str.substr(2,2));//-------------"23"   
  31. alert(str.substr(2,5));//-------------"23456"   
  32. alert(str.substr(2,12));//------------"23456789"   
  33. alert(str.substr(2,-2));//------------""   
  34. alert(str.substr(-1,5));//------------"01234"   
  35. alert(str.substr(-1,-5));//-----------""   

 

 

 

 

demo1：发送验证码倒计时

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <input type="button" id="GetCode" value="获取验证码" onclick="javascript:getCode(this);">    
  2.   
  3. <script>  
  4. function getCode(obj){    
  5.     var phe=document.getElementById('username').value;    
  6.     var countdown=60;     
  7.     if(phe.length<11)    
  8.     {    
  9.       layer.msg('请输入正确的手机格式');    
  10.       return false;    
  11.     }    
  12.     time(obj);    
  13.     $.ajax({    
  14.       type: "POST",    
  15.       url: "/e/extend/phone/index.php",    
  16.       dataType: 'html',    
  17.       data:{    
  18.           phe:phe,    
  19.       },    
  20.       success:function(data,status){    
  21.           layer.msg('发送成功');    
  22.           return false;    
  23.        },    
  24.       error:function(){    
  25.           layer.msg('发送验证码不成功，请重试');    
  26.           return false;    
  27.       }    
  28.     })    
  29. };     
  30. var wait=60;     
  31. function time(obj) {     
  32.   if (wait == 0) {     
  33.     obj.removeAttribute("disabled");      
  34.     obj.value="免费获取验证码";     
  35.     wait = 60;     
  36.   } else {     
  37.     obj.setAttribute("disabled", true);     
  38.     obj.value="重新发送(" + wait + ")";     
  39.     wait--;     
  40.     setTimeout(function() {     
  41.     time(obj)     
  42.     },     
  43.     1000)     
  44.   }     
  45. }     
  46. </script>  

 

 

demo2：获取checkbox的值

1.jpg

XML/HTML Code复制内容到剪贴板
  1. <input type="checkbox" class="selection" name="selection[]" value="436">  
  2. <input type="checkbox" class="selection" name="selection[]" value="437">  
  3. <input type="checkbox" class="selection" name="selection[]" value="438">  

 

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     (function($){  
  3.         var userPlugin = function(){  
  4.             var _self = this;  
  5.             var ses = {  
  6.                 'checkbox_class' : '.selection',  
  7.             };  
  8.   
  9.             _self.getChooseCheckboxVal = function(e){  
  10.                 var valObj  = [];  
  11.                 var valString = "";  
  12.                 var temp = $(ses.checkbox_class);  
  13.                 for(var i=0;i<temp.length;i++){  
  14.                     if(temp[i].checked == true){  
  15.                         valObj.push(temp[i].value);  
  16.                     }  
  17.                 }  
  18.                 valString = valObj.join();  
  19.                 return valObj;  
  20.             }  
  21.         }  
  22.   
  23.         var userHandle = new userPlugin();  
  24.         $(".comply").on('click', function() {  
  25.             userHandle.getChooseCheckboxVal();  
  26.         });  
  27.   
  28.     })(jQuery);  
  29. </script>  

 

 

demo3：全选与取消全选切换

demo3.1.jpgdemo3.2.jpg

XML/HTML Code复制内容到剪贴板
  1. <table>  
  2.     <tr>  
  3.         <td><input type="checkbox" name="code_Value">1</td>  
  4.     </tr>  
  5.     <tr>  
  6.         <td><input type="checkbox" name="code_Value">2</td>  
  7.     </tr>  
  8.     <tr>  
  9.         <td><input type="checkbox" name="code_Value">3</td>  
  10.     </tr>  
  11.     <tr>  
  12.         <td><input type="checkbox" name="code_Value">4</td>  
  13.     </tr>  
  14.     <tr>  
  15.         <td>  
  16.             <input type="button" name='selectAll' value="全选" onclick="CheckAll(this);">  
  17.         </td>  
  18.     </tr>  
  19. </table>  
  20.   
  21. <script>  
  22. //全选  
  23. function CheckAll(obj){  
  24.     var $dom = document.all['code_Value'];   
  25.     // var $dom = document.getElementsByName("code_Value");   
  26.   
  27.     if(obj.name == 'selectAll'){  
  28.       if($dom.length){   
  29.         for(var i=0;i<$dom.length;i++)   
  30.         {   
  31.           $dom[i].checked = true;  
  32.         }  
  33.         obj.name='unSelectAll';  
  34.         obj.value='取消全选';  
  35.       }else{   
  36.         $dom.checked = true;   
  37.       }  
  38.     }else{  
  39.       if($dom.length){   
  40.         for(var i=0;i<$dom.length;i++)   
  41.         {   
  42.           $dom[i].checked = false;   
  43.         }  
  44.         obj.name='selectAll';  
  45.         obj.value='全选';  
  46.       }else{  
  47.         $dom.checked = false;   
  48.       }  
  49.     }  
  50. };  
  51. </script>  

 

JavaScript Code复制内容到剪贴板
  1. jQuery(function($){  
  2.       
  3.     //全选   
  4.     $("#btn1").click(function(){  
  5.         $("input[name='checkbox']").attr("checked","true");  
  6.     });  
  7.       
  8.       
  9.     //取消全选   
  10.     $("#btn2").click(function(){  
  11.         $("input[name='checkbox']").removeAttr("checked");  
  12.     });  
  13.       
  14.       
  15.     //选中所有基数   
  16.     $("#btn3").click(function(){  
  17.         $("input[name='checkbox']:even").attr("checked","true");  
  18.     });  
  19.       
  20.       
  21.     //选中所有偶数   
  22.     $("#btn6").click(function(){  
  23.         $("input[name='checkbox']:odd").attr("checked","true");  
  24.     });  
  25.       
  26.       
  27.     //反选   
  28.     $("#btn4").click(function(){  
  29.         $("input[name='checkbox']").each(function(){  
  30.             if($(this).attr("checked"))  
  31.             {  
  32.                 $(this).removeAttr("checked");  
  33.             }  
  34.             else  
  35.             {  
  36.                 $(this).attr("checked","true");  
  37.             }  
  38.         })  
  39.     });  
  40.       
  41.       
  42.     //或许选择项的值   
  43.     var aa="";  
  44.     $("#btn5").click(function(){  
  45.         $("input[name='checkbox']:checkbox:checked").each(function(){  
  46.             aa+=$(this).val()  
  47.         })  
  48.         document.write(aa);  
  49.     })  
  50.       
  51. });  

 

 

demo4：获取下拉表单的值或文本

demo4.1.jpg

XML/HTML Code复制内容到剪贴板
  1. <table>  
  2.     <tr>  
  3.         <td>  
  4.             <select id="test">  
  5.                 <option value="A">英语</option>  
  6.                 <option value="B">汉语</option>  
  7.                 <option value="C" selected="selected">德语</option>  
  8.                 <option value="D">法语</option>   
  9.             </select>  
  10.         </td>  
  11.     </tr>  
  12.     <tr>  
  13.         <td>  
  14.             <input type="button" name='selectAll' value="获取" onclick="getSelect(this);">  
  15.         </td>  
  16.     </tr>  
  17. </table>  
  18.   
  19. <script>  
  20. function getSelect(){  
  21.     //1:拿到select对象：   
  22.     var  myselect=document.getElementById("test");  
  23.     //2：拿到选中项的索引：  
  24.     var index=myselect.selectedIndex ;             // selectedIndex代表的是你所选中项的index  
  25.     //3:拿到选中项options的value：   
  26.     var val = myselect.options[index].value;  
  27.     //4:拿到选中项options的text：    
  28.     var text = myselect.options[index].text;  
  29.   
  30.     console.log(val);  
  31.     console.log(text);  
  32. }  
  33. </script>  

 

JQ版本：

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>  
  2. <script>  
  3. $(document).ready(function(){  
  4.    //获取当前值及label  
  5.    alert($("#test option:selected").val() + ","+ $("select option:selected").text());  
  6.        
  7.    //指定默认选项  
  8.    $("#test option:nth-child(4)").attr("selected", true);  
  9.        
  10.    //绑定onchange事件  
  11.    $("#test").change(function(){  
  12.        if($("#test option").is(":selected")){  
  13.         alert("you select the value is "+$(this).val());  
  14.       }  
  15.    });  
  16.        
  17.    //获取选中项的值和label  
  18.    $("#test option").click(function() {  
  19.         alert($(this).val() + "," + $(this).text());  
  20.    });  
  21.   
  22. });  
  23. </script>  

 

获取radio选中的value值

XML/HTML Code复制内容到剪贴板
  1. <form name="form1" id="loginbox" method="post">  
  2.    <input name="lifetime" type="radio" value="0" checked="">不保存  
  3.    <input type="radio" name="lifetime" value="3600">一小时   
  4.    <input type="radio" name="lifetime" value="86400">一天   
  5.    <input type="radio" name="lifetime" value="2592000">一个月  
  6.    <input type="radio" name="lifetime" value="315360000">永久  
  7. </form>  

 

javascript版：

JavaScript Code复制内容到剪贴板
  1. <script language="javascript">  
  2. var radionum = document.getElementById("loginbox").lifetime;  
  3.     for(var i=0;i<radionum.length;i++){  
  4.         if(radionum[i].checked){  
  5.             lifetime = radionum[i].value  
  6.         }  
  7.     }  
  8. lifetime=lifetime;  
  9. alert(lifetime);  
  10. </script>  

 

JQ版：

PHP Code复制内容到剪贴板
  1. <script>  
  2. var value  = $('input[name="radioName"]:checked').val(); //获取被选中Radio的Value值  
  3. </script>  

 

 

 

demo5：分别获取指定父元素下的指定子元素

QQ截图20161031153036.jpg

XML/HTML Code复制内容到剪贴板
  1. <table width="500">  
  2.   <tr>  
  3.     <td><input type="text" id="ids" value="" class="form-control"><br></td>  
  4.   </tr>  
  5.     
  6.   <tr>  
  7.     <td id="test">  
  8.       <span class="label label-default" data-id="1">data-id是1</span>  
  9.       <span class="label label-default" data-id="2">data-id是2</span>  
  10.       <span class="label label-default" data-id="3">data-id是3</span>  
  11.       <span class="label label-default" data-id="4">data-id是4</span>  
  12.     </td>  
  13.   </tr>  
  14. </table>  
  15.   
  16. <script>  
  17.   var obj = document.getElementById("test");  
  18.       obj.addEventListener("click",function(ev){  //绑定点击事件  
  19.       var target = ev.target; //返回事件的目标节点，这里返回span的dom  
  20.               
  21.       console.log(target);  
  22.            
  23.       return target;//返回的target即是你要的子元素  
  24.   });  
  25.   
  26. </script>  

 

 demo5.1.jpg

XML/HTML Code复制内容到剪贴板
  1. <table width="500">  
  2.   <tr>  
  3.     <td><input type="text" id="ids" value="" class="form-control"><br></td>  
  4.   </tr>  
  5.     
  6.   <tr>  
  7.     <td id="test">  
  8.       <span class="label label-default" data-id="1">data-id是1</span>  
  9.       <span class="label label-default" data-id="2">data-id是2</span>  
  10.       <span class="label label-default" data-id="3">data-id是3</span>  
  11.       <span class="label label-default" data-id="4">data-id是4</span>  
  12.     </td>  
  13.   </tr>  
  14. </table>  
  15.   
  16. <script>  
  17. var $obj = document.getElementById("test"),       
  18.     $hid_input = document.getElementById("ids"),   
  19.     $cls = "label-info";  
  20.   
  21.     $obj.addEventListener("click",function(ev){  
  22.         var target = ev.target,   
  23.             $attribute = target.getAttribute("data-id"),    
  24.             $wz = $hid_input.value.indexOf($attribute);     
  25.           
  26.             if(hasClass(target, $cls)) {                
  27.                 var reg = new RegExp('(\\s|^)' + $cls + '(\\s|$)');  
  28.                 target.className = target.className.replace(reg, ' ');  
  29.             }else{  
  30.                 target.className += " " + $cls;   
  31.             }     
  32.             s0 = "," + $hid_input.value;  
  33.             var new_val = "," + $attribute;  
  34.             if(s0.indexOf(new_val) != -1){  
  35.                 $hid_input.value = s0.replace(new_val,"").substr(1);  
  36.             }else{  
  37.                 if($hid_input.value === ""){  
  38.                     $hid_input.value += $attribute;  
  39.                 }else{  
  40.                     $hid_input.value += new_val;  
  41.                 }  
  42.             }  
  43.             return $hid_input.value;   
  44.     });  
  45.   
  46. function hasClass(obj, cls) {      
  47.     return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));      
  48. }  
  49. </script>  

 


提示:可以修改后运行.

 

 

DEMO6：javascript 使用数组生成html

PHP Code复制内容到剪贴板
  1. var EasyReflection = {  
  2.     "美肤" : "e1",  
  3.     "素描" : "e2",  
  4.     "自然增强" : "e3",  
  5.     "紫调" : "e4",  
  6.     "柔焦" : "e5",  
  7.     "复古" : "e6",  
  8.     "黑白" : "e7",  
  9.     "仿lomo" : "e8",  
  10.     "亮白增强" : "e9",  
  11.     "灰白" : "e10",  
  12.     "灰色" : "e11",  
  13.     "暖秋" : "e12",  
  14.     "木雕" : "e13",  
  15.     "粗糙" : "e14"  
  16. };  
  17.   
  18. var effectModel = '<li class="e_item"><div class="imgWrapper"><img src="theme/alloyimage/images/effect/{pic}.png" alt="" />{effect}</div></li>';  
  19.   
  20. var html = '<li class="e_item"><div class="imgWrapper"><img src="theme/alloyimage/images/effect/e1.jpg" alt="" />原图</div></li>';  
  21. for(var i in EasyReflection){  
  22.     html += effectModel.replace("{effect}",i.length < 3 ? i + "效果" : i).replace("{pic}", EasyReflection[i]);  
  23. }  
  24.   
  25. document.getElementById("effects").innerHTML = html;  

 

延迟加载

JavaScript Code复制内容到剪贴板
  1. setTimeout(function () {  
  2.             alert("111");  
  3.         }, 5000);  

 

JS数组与字符串互相转换：

一、数组转字符串 

JavaScript Code复制内容到剪贴板
  1. var a, b;  
  2. a = new Array(0,1,2,3,4);  
  3. b = a.join("-");  

二、字符串转数组

JavaScript Code复制内容到剪贴板
  1. var s = "abc,abcd,aaa";  
  2. ss = s.split(",");// 在每个逗号(,)处进行分解。  

三、each元素，组合字符串

JavaScript Code复制内容到剪贴板
  1. //保存常用选择器  
  2.             var list = $(".left-panel dl#list"); //dom  
  3.             var listChildren = "dd";              //dom下操作的元素  
  4.             var orderList = $(".left-panel #weightList");   //原来的排序数组  
  5.             var idList = $(".left-panel #widgetList");   //原来的插件ID数组  
  6.   
  7.             // 保存原来的排列顺序  
  8.             var orders = [];     // 原来的排列顺序  
  9.             var ids = [];        // 插件ID数组  
  10.             list.children(listChildren).each(function() {  
  11.                 orders.push($(this).attr("id"));     //获取原排列顺序  
  12.                 ids.push($(this).attr("widget-id"));  
  13.             });  
  14.             orderList.val(orders.join(','));  
  15.             idList.val(ids.join(','));  

四、JS判断数组数量

JavaScript Code复制内容到剪贴板
  1. var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr   
  2. document.write(arr.length); //显示数组长度8  
  3. document.write(arr[7]); //显示第8个元素的值54  

五、es6中，对象转数组 / JS对象转JS数组 / 数组转json  ：

JavaScript Code复制内容到剪贴板
  1. //es6中的from方法  
  2. let arr = Array.from(对象名);  

 

 六、json字符串与json对象互转 / json转数组：

JavaScript Code复制内容到剪贴板
  1. JSON.parse(jsonstr); //可以将json字符串转换成json对象   
  2. JSON.stringify(jsonobj); //可以将json对象转换成json对符串  

  

JavaScript Code复制内容到剪贴板
  1. //数组转json串  
  2. var arr = [1,2,3, { a : 1 } ];  
  3. JSON.stringify( arr );  
  4.   
  5. //json字符串转数组  
  6. var jsonStr = '[1,2,3,{"a":1}]';  
  7. JSON.parse( jsonStr );  

 

php数组与json对象互转：

1.png

2.png

PHP Code复制内容到剪贴板
  1. <?php  
  2. $arr = array(0 => 'a', 1 => 'b', 2 => 'c');  
  3. $jsarr = "";  
  4. foreach ($arr as $key => $value) {  
  5.     $jsarr .= "'{$value}',";  
  6. }  
  7. $jsarr = '[' . trim($jsarr, ',') . ']';  
  8. ?>  
  9. <script>  
  10. var arr = <?=$jsarr?>;  
  11. console.log(arr)  
  12. </script>  

 

 

JS替换指定字符串

 

JavaScript Code复制内容到剪贴板
  1. var str = '我是一字符串';  
  2. str.replace('一',''); // 将“一”变成空字符（删除）  

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     //批量替换指定的符号  
  3.     var ext = "jpg|png|gif|pdf|jpeg|xls|xlsx|docx|doc";  
  4.     var regS = new RegExp("\\|","g");  
  5.     var ext2 = ext.replace(regS,"，");   //将所有的 | 替换成，  输出：jpg，png，gif，pdf，jpeg，xls，xlsx，docx，doc  
  6.   
  7.   
  8.   
  9.     // 替换所有要替换字符  
  10.     var str = "$Hello World!$Hello World!$Hello World!";  
  11.     //把所有的“Hello World!”替换为“Welcome you!”。“/g”是替换全部。  
  12.     alert(str.replace(/Hello World!/g,"Welcome you!"));  
  13. </script>  

 

JavaScript Code复制内容到剪贴板
  1. // 方法1：循环替换，因为js里的replace默认只会替换一个  
  2. var a = 'abc;def;hij;';  
  3. while(a.indexOf(';') >= 0)  
  4. a = a.replace(';',',');  
  5. alert(a);  
  6.   
  7. //方法2用正则替换：  
  8. var a = 'abc;def;hij;';  
  9. a = a.replace(/;/g,',');  
  10. alert(a);  

 

javascript时间戳和日期字符串相互转换 

2019.3.16 

JavaScript Code复制内容到剪贴板
  1. function formatDateTime(timeStamp) {  
  2.                 var date = date = new Date();  
  3.                 // date.setTime(timeStamp * 1000);//如果是10位的时间戳（正常后端都是10位时间戳，js需要13位时间戳），需要乘1000  
  4.                 date.setTime(timeStamp);  
  5.                 var y = date.getFullYear();  
  6.                 var m = date.getMonth() + 1;  
  7.                 m = m < 10 ? ('0' + m) : m;  
  8.                 var d = date.getDate();  
  9.                 d = d < 10 ? ('0' + d) : d;  
  10.                 var h = date.getHours();  
  11.                 h = h < 10 ? ('0' + h) : h;  
  12.                 var minute = date.getMinutes();  
  13.                 var second = date.getSeconds();  
  14.                 minute = minute < 10 ? ('0' + minute) : minute;  
  15.                 second = second < 10 ? ('0' + second) : second;  
  16.                 return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  
  17.             };  
  18.   
  19.   
  20. console.log(formatDateTime(1551052800000));  
  21. // 2019-02-25 08:00:00  

 

 

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">  
  2. // 获取当前时间戳(以s为单位)  
  3. var timestamp = Date.parse(new Date());  
  4. timestamp = timestamp / 1000;  
  5. //当前时间戳为：1403149534  
  6. console.log("当前时间戳为：" + timestamp);  
  7.   
  8.   
  9. // 获取某个时间格式的时间戳  
  10. var stringTime = "2014-07-10 10:21:12";  
  11. var timestamp2 = Date.parse(new Date(stringTime));  
  12. timestamp2 = timestamp2 / 1000;  
  13. //2014-07-10 10:21:12的时间戳为：1404958872   
  14. console.log(stringTime + "的时间戳为：" + timestamp2);  
  15.   
  16.   
  17. // 将当前时间换成时间格式字符串  
  18. var timestamp3 = 1403058804;  
  19. var newDate = new Date();  
  20. newDate.setTime(timestamp3 * 1000);  
  21. // Wed Jun 18 2014   
  22. console.log(newDate.toDateString());  
  23. // Wed, 18 Jun 2014 02:33:24 GMT   
  24. console.log(newDate.toGMTString());  
  25. // 2014-06-18T02:33:24.000Z  
  26. console.log(newDate.toISOString());  
  27. // 2014-06-18T02:33:24.000Z   
  28. console.log(newDate.toJSON());  
  29. // 2014年6月18日   
  30. console.log(newDate.toLocaleDateString());  
  31. // 2014年6月18日 上午10:33:24   
  32. console.log(newDate.toLocaleString());  
  33. // 上午10:33:24   
  34. console.log(newDate.toLocaleTimeString());  
  35. // Wed Jun 18 2014 10:33:24 GMT+0800 (中国标准时间)  
  36. console.log(newDate.toString());  
  37. // 10:33:24 GMT+0800 (中国标准时间)   
  38. console.log(newDate.toTimeString());  
  39. // Wed, 18 Jun 2014 02:33:24 GMT  
  40. console.log(newDate.toUTCString());  
  41.   
  42.   
  43. Date.prototype.format = function(format) {  
  44.        var date = {  
  45.               "M+": this.getMonth() + 1,  
  46.               "d+": this.getDate(),  
  47.               "h+": this.getHours(),  
  48.               "m+": this.getMinutes(),  
  49.               "s+": this.getSeconds(),  
  50.               "q+": Math.floor((this.getMonth() + 3) / 3),  
  51.               "S+": this.getMilliseconds()  
  52.        };  
  53.        if (/(y+)/i.test(format)) {  
  54.               format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));  
  55.        }  
  56.        for (var k in date) {  
  57.               if (new RegExp("(" + k + ")").test(format)) {  
  58.                      format = format.replace(RegExp.$1, RegExp.$1.length == 1  
  59.                             ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));  
  60.               }  
  61.        }  
  62.        return format;  
  63. }  
  64. console.log(newDate.format('yyyy-MM-dd h:m:s'));  
  65.   
  66. </script>  

 

获取字符串长度，中英文不限

JavaScript Code复制内容到剪贴板
  1. //第一种    
  2. GetLength = function(str)     
  3. {    
  4.     var realLength = 0;    
  5.     for (var i = 0; i < str.length; i++)     
  6.     {    
  7.         charCode = str.charCodeAt(i);    
  8.         if (charCode >= 0 && charCode <= 128)     
  9.         realLength += 1;    
  10.         else     
  11.         realLength += 2;    
  12.     }    
  13.     return realLength;    
  14. }    
  15. //第二种（采取将255意外的字符替换成"aa"的做法，取长度）    
  16. GetLength = function(str)     
  17. {    
  18.     return str.replace(/[^\x00-\xff]/g,"aa").length;    
  19. };     
  20. //第三种    
  21. GetLength = function(s)     
  22. {    
  23.     var len = 0;    
  24.     for(var i=0; i<s.length; i++)     
  25.     {    
  26.         var c = s.substr(i,1);    
  27.         var ts = escape(c);    
  28.         if(ts.substring(0,2) == "%u")     
  29.         {    
  30.             len+=2;    
  31.         } else     
  32.         {    
  33.             len+=1;    
  34.         }    
  35.     }    
  36.     return len;    
  37. }   

 

for循环加定时器，中断循环几秒 

 
JavaScript Code复制内容到剪贴板
  1. var time;  
  2.   
  3. pauseMp3() {  
  4.                 console.log(time);  
  5.                 clearInterval(time);  
  6.             },  
  7. timePlay(data) {  
  8.                 var i = 0;  
  9.                 var that = this; //作用域的原因，在定时器中，this变化  
  10.                 time = setInterval(function() {  
  11.                     if(i >= data.length) {  
  12.                         clearInterval(time);  
  13.                         return false;  
  14.                     }  
  15.                     that.playMp3(data[i].attachment_en);  
  16.                     i++;  
  17.                 }, 3000);  
  18.             },  

 

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     //setTimeout 1000ms后执行1次  
  3.    var i = setTimeout(function(){  
  4.    },1000);  
  5.    
  6.     //setInterval 每隔1000ms执行一次  
  7.     var j = setInterval(function(){  
  8.    
  9.     },1000)  
  10.    
  11.     //清除Timeout的定时器,传入id(创建定时器时会返回一个id)  
  12.     clearTimeout(i);  
  13.    
  14.     //清除Interval的定时器,传入id(创建定时器时会返回一个id)  
  15.     clearInterval(j);  
  16. </script>  

 

优化后：（vue.js）

JavaScript Code复制内容到剪贴板
  1.    var timers; /* 定时器变量，用于停止定时器使用 */    
  2.     var playNum = 0; /* 定时器暂停的位置，用于继续使用  */    
  3.     
  4.     
  5. /*传data播放数组连续播放,第二个参数为true表示播放两个文件*/    
  6. timePlay(dataObj, mode) {    
  7.     if(!dataObj) {    
  8.         this.$toast({    
  9.             message: "获取阅读文件失败，请刷新重试",    
  10.             duration: 1000    
  11.         });    
  12.     }    
  13.     this.playData = dataObj;    
  14.     var i = playNum ? playNum : 0;    
  15.     var that = this; //作用域的原因，在定时器中，this变化    
  16.     timers = setInterval(function() {    
  17.         if(i >= dataObj.length) {    
  18.             playNum = 0;    
  19.             clearInterval(timers);    
  20.             return false;    
  21.         }    
  22.     
  23.         /*先读中文，再读英文*/    
  24.         if(mode == 1) {    
  25.             that.playMp3(dataObj[i].attachment_zh, dataObj[i].attachment_en);    
  26.         } else if(mode == 2) {    
  27.     
  28.         } else {    
  29.             that.playMp3(dataObj[i].attachment_en);    
  30.         };    
  31.     
  32.         playNum++;    
  33.         i++;    
  34.     }, 4000);    
  35.     
  36. },    
  37.     
  38. /*控制播放 停止和继续*/    
  39. controlPlay() {    
  40.     
  41.     if(timers) {    
  42.         this.pauseMp3();    
  43.     
  44.         if(this.playBtnType5Msg == "暂停") {    
  45.             this.playBtnType5Msg = "继续";    
  46.             this.pauseMp3();    
  47.         } else {    
  48.             this.playBtnType5Msg = "暂停";    
  49.             this.timePlay(this.playData);    
  50.         }    
  51.     } else {    
  52.         this.$toast({    
  53.             message: "请先选择一种播放模式",    
  54.             duration: 1000    
  55.         });    
  56.     }    
  57.     
  58. },    
  59. /*中断正在播放的音频，中断定时器*/  
  60. pauseMp3() {  
  61.     clearInterval(timers);  
  62. },  
  63. playMp3(url1, url2) {  
  64.     var audio = document.createElement("audio");  
  65.     audio.src = url1;  
  66.     audio.play();  
  67.     if(url2) {  
  68.         setTimeout(function() {  
  69.             audio.src = url2;  
  70.             audio.play();  
  71.         }, 1500)  
  72.     }  
  73. },  

 

JS阻止事件冒泡  

JavaScript Code复制内容到剪贴板
  1. endTimeEvent(event) {  
  2.     event.stopPropagation();//停止事件冒泡  
  3.   
  4. },  

 

JS判断最后一个字符是否为指定字符串，如果是，则替换掉

比如一串这样的字符串

11，22，33，44，55，66，

最后一个逗号可能有可能没有，判断最后一个是否逗号如果是就去掉这个逗号，如果不是逗号则不操作

JavaScript Code复制内容到剪贴板
  1. let link = "http://localhost:8080/test/?";  
  2. let linkEndString = link.charAt(link.length-1);  
  3. if(linkEndString == '?'){  
  4.     link=link.substring(0,link.length-1)  
  5. }  

 

 

拓展：

1、获取字符串最后一位

方法一: 运用String对象下的charAt方法

charAt() 方法可返回指定位置的字符。

代码如下:

str.charAt(str.length-1)

方法二: 运用String对象下的substr方法

substr() 方法可在字符串中抽取从start下标开始的指定数目的字符。

str.substr(start[, length])，其中start为必选参数，表示坐标开始的位置，正值则正向数数，负值则反向数数，length为可选参数，表示从开始位置数几个数。

代码如下:

str.substr(str.length-1,1)

方法三: 运用String对象下的split方法

split() 方法用于把一个字符串分割成字符串数组。

代码如下:

var str = “Bastian″;
arr= str.split(“ ”);
arr[arr.length-1];

方法四: 运用正则

2、判断字符串是否以指定字符串开始或结尾

判断是否以指定字符串开始用startsWith，结尾用endsWith

function confirmEnding(str, target) {

if(str.endsWith(target)){
return true;
}
return false;

}

confirmEnding("Bastian", "n");

该例子说明的是如果字符串以给定的target结尾，则返回true,否则返回false。

 

 iframe自适应高度

XML/HTML Code复制内容到剪贴板
  1. <iframe scrolling="yes" frameborder="0" src="/admin/index.php?r=invest%2Fcontract-pay%2Fpay-list&cid=17" width="100%" onload="setIframeHeight(this)"></iframe>  
  2.   
  3. <script>  
  4.     // iframe自适应高度  
  5.     function setIframeHeight(iframe) {  
  6.         if (iframe) {  
  7.             var iframeiframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;  
  8.             if (iframeWin.document.body) {  
  9.                 iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;  
  10.             }  
  11.         }  
  12.     }  
  13. </script>  

 

 jquery追加元素 / 插入元素

PHP Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>js中常用追加元素的几种方法</title>  
  6.         <link rel="stylesheet" href="css/rest.css" />  
  7.         <style>  
  8.             .container {  
  9.                 width: 1200px;  
  10.                 padding: 10px;  
  11.                 margin: 50px auto;  
  12.                 border: 1px solid lightcoral;  
  13.             }  
  14.             #wrap{  
  15.                 border: 1px solid lightseagreen;  
  16.             }             
  17.             .container p{  
  18.                 height: 30px;  
  19.                 line-height: 30px;  
  20.             }  
  21.             .btn-group{  
  22.                 margin-top: 20px;  
  23.             }  
  24.             button{  
  25.                 width: 80px;  
  26.                 height: 32px;  
  27.                 margin-right: 10px;  
  28.                 line-height: 32px;  
  29.                 text-align: center;  
  30.                 border: 0px;  
  31.             }  
  32.         </style>  
  33.     </head>  
  34.     <body>  
  35.         <div class="container">  
  36.             <div id="wrap">  
  37.                 <p class="first">我是第一个子元素</p>  
  38.                 <p class="second">我是第二个子元素</p>  
  39.             </div>  
  40.             <div class="btn-group">  
  41.                 <button class="append">append</button>  
  42.                 <button class="appendTo">appendTo</button>  
  43.                 <button class="prepend">prepend</button>  
  44.                 <button class="prependTo">prependTo</button>  
  45.                 <button class="after">after</button>  
  46.                 <button class="before">before</button>  
  47.                 <button class="appendChild" onclick="appChild()">appendChild</button>  
  48.                 <button class="insertAfter">insertAfter</button>  
  49.                 <button class="insertBefore">insertBefore</button>  
  50.             </div>  
  51.               
  52.         </div>  
  53.           
  54.     </body>  
  55. </html>  
  56. <script src="js/jquery-1.9.1.min.js"></script>  
  57. <script>  
  58.     $(function(){  
  59.         //append(),在父级最后追加一个子元素  
  60.         $(".append").click(function(){  
  61.             $("#wrap").append("<p class='three'>我是子元素append</p>");  
  62.         });  
  63.           
  64.         //appendTo(),将子元素追加到父级的最后  
  65.         $(".appendTo").click(function(){  
  66.             $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));  
  67.         });  
  68.           
  69.         //prepend(),在父级最前面追加一个子元素  
  70.         $(".prepend").click(function(){  
  71.             $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");  
  72.         });  
  73.           
  74.         //prependTo(),将子元素追加到父级的最前面  
  75.         $(".prependTo").click(function(){  
  76.             $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));  
  77.         });  
  78.           
  79.         //after(),在当前元素之后追加（是同级关系）  
  80.         $(".after").click(function(){  
  81.             $("#wrap").after("<p class='siblings'>我是同级元素after</p>");  
  82.         });  
  83.           
  84.         //before(),在当前元素之前追加（是同级关系）  
  85.         $(".before").click(function(){  
  86.             $("#wrap").before("<p class='siblings'>我是同级元素before</p>");  
  87.         });  
  88.           
  89.         //insertAfter(),将元素追加到指定对象的后面（是同级关系）  
  90.         $(".insertAfter").click(function(){  
  91.             $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));  
  92.         });  
  93.         //insertBefore(),将元素追加到指定对象的前面（是同级关系）  
  94.         $(".insertBefore").click(function(){  
  95.             $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));  
  96.         });  
  97.     });   
  98.       
  99.     //appendChild(),在节点的最后追加子元素  
  100.     function appChild(){  
  101.             // 创建p节点  
  102.             var para=document.createElement("p");  
  103.             // 创建文本节点  
  104.             var node=document.createTextNode("我是子集appendChild新段落。");  
  105.             // 把文本节点添加到p节点里  
  106.             para.appendChild(node);  
  107.                
  108.             // 查找div1  
  109.             var element=document.getElementById("wrap");  
  110.             // 把p节点添加到div1里  
  111.             element.appendChild(para);  
  112.     }  
  113. </script>  

 

获取当前URL的参数值 / 对当前URL参数值替换成指定值 

JavaScript Code复制内容到剪贴板
  1. /** 
  2.  * 获取当前url的指定参数值 
  3.  * @param name 
  4.  * @returns {string|null} 
  5.  */  
  6. function getQueryString(name) {  
  7.     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
  8.     var r = window.location.search.substr(1).match(reg);  
  9.     if (r != null) return decodeURI(r[2]); return null;  
  10. }  

 

JavaScript Code复制内容到剪贴板
  1. /** 
  2.  * 替换当前Url中指定参数值，如果没有就加上 
  3.  * @param find 
  4.  * @param value 
  5.  * @returns {string} 
  6.  */  
  7. function replaceQueryStringParam(find,value) {  
  8.     let base = window.location.href;  
  9.     console.log(base)  
  10.     let offset = base.indexOf(find);  
  11.     let index;  
  12.     let rr = '';  
  13.     if(offset < 0){  
  14.         if(base.indexOf('?') < 0) {  
  15.             base += '?';  
  16.         }else{  
  17.             base += '&';  
  18.         }  
  19.         base += find + '=' + value;  
  20.     }else{  
  21.         left = base.substr(0, offset);  
  22.         right = base.substr(offset);  
  23.         index = right.indexOf('&');  
  24.         if(index >= 0){  
  25.             rr = right.substr(index);  
  26.         }  
  27.         base = left + find + "=" + value + rr;  
  28.     }  
  29.     return base;  
  30. }  

 

 

JS判断当前是浏览器，还是移动端

JavaScript Code复制内容到剪贴板
  1. function detectDeviceType() {  
  2.   var ua = navigator.userAgent;  
  3.   var isMobile = /mobile|tablet|ip(ad|od)|android/i.test(ua);  
  4.   if (isMobile) {  
  5.     console.log("当前为移动端");  
  6.   } else {  
  7.     console.log("当前为PC浏览器端");  
  8.   }  
  9. }  
  10.   
  11. // 调用示例  
  12. detectDeviceType();  

 

JS判断当前是否是微信浏览器

JavaScript Code复制内容到剪贴板
  1. function isWeiXin() {  
  2.   var ua = window.navigator.userAgent.toLowerCase();  
  3.   if (ua.match(/MicroMessenger/i) == 'micromessenger') {  
  4.     return true;  
  5.   } else {  
  6.     return false;  
  7.   }  
  8. }  
  9.   
  10. // 调用示例  
  11. if (isWeiXin()) {  
  12.   console.log("当前为微信浏览器");  
  13. } else {  
  14.   console.log("当前非微信浏览器");  
  15. }  

 

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/42.html

上一篇 Sublime Text添加插入带当前时间说明
下一篇 JavaScript HTML DOM 事件
相关的文章
Powered by yoyo苏ICP备15045725号