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++语言的另类性,因保留有其原始特性,其语法并不象其它高级语言一样易理 ...
随机推荐
- 区别 PHP 的 $_POST、$HTTP_RAW_POST_DATA 和 php://input
Mac Pro 电脑编译安装了 PHP 5.6.21,先前的系统运行时报如下警告级错误: Deprecated: Automatically populating $HTTP_RAW_POST_DAT ...
- APPCAN MAS接口之SOAP
APPCAN MAS接口中使用webservice接口形式,示例代码如下: 1 var MEAP=require("meap"); 2 3 function run(Par ...
- 使用 Github Pages 发布你的项目文档
导读 你可能比较熟悉如何用 Github Pages 来分享你的工作,又或许你看过一堂教你建立你的第一个 Github Pages 网站的教程.近期 Github Pages 的改进使得从不同的数据源 ...
- 移动前端头部mete
原文链接:http://caibaojian.com/mobile-meta.html//code from http://caibaojian.com/mobile-meta.html<!DO ...
- 全部springxml文件约束 applicationContext.xml
<?xml version="1.0" encoding="utf-8"?> <beans xmlns="http://www.sp ...
- [黑科技]bit reverse
写FFT的时候yy出来了这个bit reverse...时间复杂度O(n),常数大概是(a[x>>1]>>1)|((x&1)<<26)的二分之一(-O3下) ...
- Hibernate 多对多关联查询条件使用
from Brand as b inner join fetch b.styles as s where s.styleId=?
- Java文件读写操作指定编码方式防乱码
读文件:BufferedReader 从字符输入流中读取文本,缓冲各个字符,从而提供字符.数组和行的高效读取. 可以指定缓冲区的大小,或者可使用默认的大小.大多数情况下,默认值就足够大了. 通常,Re ...
- css常用效果总结
1.给input的placeholder设置颜色 .phColor::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:maroo ...
- 左侧导航栏复制粘贴保存html即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...