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.onload=function(){
var aDiv=document.getElementsByTagName('div');
var oBtn=document.getElementById('btn');
var timer=null;
tab();
oBtn.onclick=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.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>
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=;
oBtn.onclick=function(){
for(var i=;i<aInput.length;i++){
if(oBtn.checked==true){
aInput[i].checked=true;
iNow=aInput.length-;
}else{
aInput[i].checked=false;
iNow = ;
}
}
document.title=iNow;
};
for(var i=;i<aInput.length;i++){
aInput[i].onclick=function(){
if(this.checked==true){
iNow++;
}else{
iNow--;
}
document.title=iNow;
if(iNow==aInput.length-){
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.
JS_ECMA基本语法中的几种封装的小函数-1的更多相关文章
- JS_ECMA基本语法中的几种封装的小函数-2
大家好!今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例: 首先先给大家说一下字符串.数组.数学方法以及json的一点小知识点: 字符串方法: str.length str.charAt(i ...
- JS_ECMA基本语法中的几种封装的小函数
先来回顾一下我们的字符串: 字符串方法: str.length str.charAt(i):取字符串中的某一个; str.indexOf('e');找第一个出现的位置;找不到返回-1; str.l ...
- axios在vue项目中的一种封装方法
记录下之前领导封装的axios请求 npm install axios // 安装 单独写个文件配置axios,此处为request.js import axios from 'axios' //自定 ...
- SQL中的5种常用的聚集函数
首先你要知道 where->group by->having->order by/limit ,这个就是写sql语句时的顺序 常用的5个聚集函数: Max ...
- MySQL存储过程中的3种循环,存储过程的基本语法,ORACLE与MYSQL的存储过程/函数的使用区别，退出存储过程方法
在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环.还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用,很容易引起程序的混乱,在这里就不错具体 ...
- Shell中的(),{}几种语法用法-单独总结
shell中的(),{}几种语法用法 查看脚本语法是否有错误: bash -n modify_suffix.sh 跟踪执行 sh -x modify_suffix.sh aaa 1. ${var} 2 ...
- 探究JavaScript中的五种事件处理程序
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...
- 【转】UML中的几种关系详细解析
UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现 类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中, ...
- C++ 炼气期之基本结构语法中的底层逻辑
1. 前言 从语言的分类角度而言,C++是一种非常特殊的存在.属于高级语言范畴,但又具有低级语言的直接访问硬件的能力,这也成就了C++语言的另类性,因保留有其原始特性,其语法并不象其它高级语言一样易理 ...
随机推荐
- nginx反向代理、根据浏览器分离访问
环境根据http://www.cnblogs.com/zzzhfo/p/6032095.html配置 修改LB的/usr/local/nginx/conf/nginx.conf upstream st ...
- java历史
1.产生: 1990年初sun公司James Gosling等员工开发java语言的雏形,最初被命名为Oak,定位于家用电器的控制和通讯,随后因为市场的需求,公司放弃计划,后面由于Internet的发 ...
- IE6支持max-height及min-height解决方法
我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定高度范围值,有时也需要设置一个最小高度值,以达到对齐等样式.接下来为大家总结的如何解决IE6不支持max-height和不支持min ...
- js 判断鼠标进去方向
function fx(id){ var obj= document.getElementById(id); var fun=function(e){ var w=obj.offsetWidth; v ...
- PYTHON 自动化之路 （二）
一.python 模块的使用 模块的使用: import os #调用 os 模块 cmd_s = os.popen("dir").read() #打开路径为结果保存为cmd_sp ...
- #Deep Learning回顾#之基于深度学习的目标检测（阅读小结）
原文链接:https://www.52ml.net/20287.html 这篇博文主要讲了深度学习在目标检测中的发展. 博文首先介绍了传统的目标检测算法过程: 传统的目标检测一般使用滑动窗口的框架,主 ...
- linux kernel i2c底层代码跟踪
其实跟上次跟的平台总线有关 在arch/arm/mach-mx6/board-mx6q_sabresd.c 文件中 static void __init mx6_sabresd_board_init( ...
- 2016年11月3日--Window.document对象
五.相关元素操作: var a = document.getElementById("id");找到a: var b = a.nextSibling,找a的下一个同辈元素,注意包含 ...
- weiphp执行的流程
微信交互 1.用户与微信进行交互,交互的事件包括:回复公众号,扫描与公众号有关的二微码,关注(取消关注)公众号,在公众号里点击自定义菜单等 2.微信把用户的交互事件及相关参数传递给weiphp的微 ...
- (C语言)精髓——指针
(1)作用:正确而灵活的运用指针,能够有效的表示复杂的数据结构,能动态分配内存,方便地使用字符串,有效而方便地使用数组,可以直接处理内存单元地址. (2)概念:①变量的指针:变量(3)的地址.(200 ...