當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS_ECMA基本语法中的几种封装的小函数-1
生活随笔
收集整理的這篇文章主要介紹了
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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 本地预览图片html和js例子
- 下一篇: gradle idea java ssm