日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

JS_ECMA基本语法中的几种封装的小函数-1

發布時間:2025/4/16 javascript 16 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JS_ECMA基本语法中的几种封装的小函数-1 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天給大家介紹js ECMA中幾個封裝的小函數以及一些常用的函數小案例;

1,找重復的函數

<script>//在數組里面找重復;function findInArr(n,arr){for(var i=0; i< arr.length; i++){if(arr[i]==n){return true;}}return false;}</script>

2 隨機數函數

<script>function rnd(n,m) {return parseInt(Math.random()*(m-n)+n)}</script>

3 補零的函數

<script>function addZero(n){return n<10 ? '0'+n : ''+n;}</script>

4 求和

<script>function sum(){var res=0;for(var i=0;i<arguments.length;i++){res+=arguments[i];}return res;}alert(sum(1,2,5,7,9))</script>

5 ?獲取非行間樣式的函數.html

<script>function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}</script>

下面再給大家介紹幾個使用的案例

1 雙色球

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;background: red;color: white;font-weight: bold;font-size: 35px;border-radius:50%;text-align: center;line-height: 100px;float: left;margin:10px;}</style><script>function rnd(n,m){return parseInt(Math.random()*(m-n)+n);}function findInArr(n,arr){for(var i=0;i<arr.length;i++){if(arr[i]==n){return true;}}return false;}function addZero(n){return n<10 ? '0'+n : ''+n;}window.οnlοad=function(){var aDiv=document.getElementsByTagName('div');var oBtn=document.getElementById('btn');var timer=null;tab();oBtn.οnclick=function(){clearInterval(timer);timer=setInterval(tab,10);setTimeout(function tab(){clearInterval(timer);},1000)};function tab(){var arr=[];while(arr.length<8){var n=addZero(rnd(1,34));if(findInArr(n,arr)==false){arr.push(n);}}for(var i=0;i<aDiv.length;i++){aDiv[i].innerHTML=arr[i];}}}</script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div style="background: blue"></div> <input type="button" value="搖號" name="" id="btn"> </body> </html>

2 升級版全選(類似于購物車的效果)

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script>window.οnlοad=function(){var oBtn=document.getElementById('btn');var aInput=document.getElementsByTagName('input');var iNow=0;oBtn.οnclick=function(){for(var i=1;i<aInput.length;i++){if(oBtn.checked==true){aInput[i].checked=true;iNow=aInput.length-1;}else{aInput[i].checked=false;iNow = 0;}}document.title=iNow;};for(var i=1;i<aInput.length;i++){aInput[i].οnclick=function(){if(this.checked==true){iNow++;}else{iNow--;}document.title=iNow;if(iNow==aInput.length-1){oBtn.checked=true;}else{oBtn.checked=false;}}}}</script> </head> <body> <input type="checkbox" name="" id="btn"/> <hr> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> </body> </html>

3  升級版本的選項卡

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script>window.onload=function(){var oBtn=document.getElementById('btn');var aInput=document.getElementsByTagName('input');var iNow=0;oBtn.onclick=function(){for(var i=1;i<aInput.length;i++){if(oBtn.checked==true){aInput[i].checked=true;iNow=aInput.length-1;}else{aInput[i].checked=false;iNow = 0;}}document.title=iNow;};for(var i=1;i<aInput.length;i++){aInput[i].onclick=function(){if(this.checked==true){iNow++;}else{iNow--;}document.title=iNow;if(iNow==aInput.length-1){oBtn.checked=true;}else{oBtn.checked=false;}}}}</script> </head> <body> <input type="checkbox" name="" id="btn"/> <hr> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> </body> </html>

好了 今天就給大家分享到這里,明天再繼續給大家分享別的小方法以及函數;謝謝大家!

 

 Never too old to learn. 

  

  

  

  

  

轉載于:https://www.cnblogs.com/lianzhibin/p/6063895.html

總結

以上是生活随笔為你收集整理的JS_ECMA基本语法中的几种封装的小函数-1的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。