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正则
PHP代码 $str = preg_replace("/(<a.*?>)(.*?)(<\/a>)/", '\1<span class="li ...
- 02快速学习ExtJs之---第一个HelloWord!
这篇主要讲部署下ExtJS开发环境,以及搭建项目.我们使用ExtJs官方提供的Sencha Cmd来搭建 1.搭建项目 1.下载官方的Sencha Cmd工具,安装. 2..Window用户进入到命令 ...
- mysql 设置可以外部访问
GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY 'mypassword' WITH GRANT OPTION; --授权可以外部 ...
- 迷之this？（转）
1. 迷之this 对于刚开始进行 JavaScript 编程的开发者来说,this 具有强大的魔力,它像谜团一样需要工程师们花大量的精力去真正理解它. 在后端的一些编程语言中,例如 Java.PHP ...
- ios中二维码的使用之一： 二维码的生成
iOS在7之后,具备了原生的二维码生成API; 生成二维码的准备: #import <CoreImage/CoreImage.h> 导入框架: 开始生成: //1- 创建过滤器 CIFi ...
- hiho #1309 任务分配
#1309 : 任务分配 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定 N 项任务的起至时间( S1, E1 ), ( S2, E2 ), ..., ( SN, ...
- 如何用Wireshark捕获USB数据？
现在越来越多的电子设备采用USB接口进行通讯,通讯标准也在逐步提高.那么,我们就会好奇这些设备是如何工作的?而无论你是一个硬件黑客,业余爱好者或者只是对它有一点兴趣的,USB对我们都是具有挑战性的. ...
- Codeforces 519 E. A and B and Lecture Rooms
Description 询问一个树上与两点距离相等的点的个数. Sol 倍增求LCA. 一棵树上距离两点相等,要么就只有两点的中点,要么就是与中点相连的所有点. 有些结论很容易证明,如果距离是偶数,那 ...
- hibernate query.list() 返回的数据类型
在hibernate中,用hql语句查询实体类,采用list方法的返回结果为一个List,该List中封装的对象分为以下三种情况: 1.查询全部字段的情况下,如"from 实体类" ...
- YUVviewerPlus使用教程
1.YUVviewerPlus用于播放yuv文件,点击Open File打开yuv文件 2.点击Play播放yuv文件