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++语言的另类性,因保留有其原始特性,其语法并不象其它高级语言一样易理 ...
随机推荐
- CentOS-6.5-NFS部署
nfs-server与nfs-client端配置一样 NFS(network file system)网络文件系统:用于在网络上共享存储. 服务端-192.16 ...
- CF570D——Tree Requests
1.题目大意:给你一棵树,每个点有一个字符,然后我们定义1的深度是1,然后1的儿子深度是2... 然后有一个询问,询问以i为根节点的子树,然后深度是k的那层的所有字符,可否组成一个回文串 2.分析:首 ...
- 最牛X的GCC 内联汇编
导读 正如大家知道的,在C语言中插入汇编语言,其是Linux中使用的基本汇编程序语法.本文将讲解 GCC 提供的内联汇编特性的用途和用法.对于阅读这篇文章,这里只有两个前提要求,很明显,就是 x86 ...
- jbuilder的set!方法重构接口
https://github.com/rails/jbuilder 的set!方法重构接口, 因为grape没法使用 jBuilder 的缓存,所以直接用 Rails 写 API (1)多个图片 i ...
- 移动端压缩并ajax上传图片解决方案
1.需求 做一个前端可压缩并且上传图片到后台的功能 2.使用组件 用到的主要是jq和LocalResizeIMG这2个库 3.使用方法 a.引入脚本文件 <script type='text/j ...
- [BZOJ1691][Usaco2007 Dec]挑剔的美食家
[BZOJ1691][Usaco2007 Dec]挑剔的美食家 试题描述 与很多奶牛一样,Farmer John那群养尊处优的奶牛们对食物越来越挑剔,随便拿堆草就能打发她们午饭的日子自然是一去不返了. ...
- [转载]Web 研发模式演变
原文链接:https://github.com/lifesinger/blog/issues/184 前不久徐飞写了一篇很好的文章:Web 应用的组件化开发.本文尝试从历史发展角度,说说各种研发模式的 ...
- [转载]PO BO VO DTO POJO DAO概念及其作用
原文链接:http://jeoff.blog.51cto.com/186264/88517/ POJO = pure old java object or plain ordinary java ob ...
- (备忘)android清单文件中<meta-data>标签,以及<intent-filter>下的<data>标签及其他标签
1.metadata可以写在application下也可以写在activity下,作为全局或activity内共享的数据 以键值对形式保存 <meta-data android:name=&qu ...
- BZOJ 4579: [Usaco2016 Open]Closing the Farm
Description 依次删去一个点和它的边,问当前图是否连通. Sol 并查集. 倒着做就可以了. 每次将一个点及其的边加入,如果当前集合个数大于 1,那么就不连通. Code /******** ...