2021-07-08 javascript 上
2024-04-18 07:26:53
基础知识
拖拽时候元素要用绝对定位
数据类型的相互转换
其它类型转:number
1.string转number:除了纯数字，其它转换结果全为NaN,
2.boolean类型转化为number：ture为1，false为0，
3.undefine转number：结果直接NaN(NaN为非数字类型)
其他类型转：string
1.所有的转换都带有双引号("",也称字面量形式）
其他类型转bool
1.number转boolean:除了0和非数字类型（NaN），其它结果都为ture.
2.String转boolean:除了空字符串，其他结果都为ture.
3.undefine转boolean:直接false
4，空函数：ture
5.空对象：ture
6，null:false
字符串转化成数值型的三种方法
Number()
parseInt()
parseFloat()
隐式类型转换规则
1.有NaN一律返回false
2.有布尔类型，布尔类型转化为数字进行比较
3.有String类型，分两种情况，（1）对象，对象通过toString转化成String类型进行比较。（2）数字，String转化数字进行比较
4.null和undefine不会相互转化，相等
5.有数字类型，和对象比较，对象用valueof转化成原始值进行比较，
注意：字符串、布尔和Number（数字）进行运算时，会自动的转化为Number类型，然后再进行运算，但是，字符串加法除外，因为字符串加号表示为字符串拼接，会将前后两个表达式拼接起来
6.其它情况，一律返回false
7；比较相等两个等号会有隐式类型转换，只需值相等即可，三个等号必须类型和值同时相等结果才为trure
字符串之间的大小比较是按照ACSII编码大小，“2”的ASCII码比“1”的ASCII大，所以C正确
数字跟字符串比较大小会将字符串隐式转换为数字
表达式的副作用：如果一个表达式对js的上下执行有影响，那么就称之为有副作用的表达式。
回调函数
一个被当作参数的函数
函数的形参和实参个数不统一时：
实参数量大于形参时，程序会忽略多余的实参
形参大于实参时，未被赋值的形参带入到计算时值为undefine,整个计算结果为NaN
数组
Arguments：函数中的参数对象，类数组，若干个实参的集合，拥有数组下标特性和.length特性，当不确定调用函数时传递的实参个数的时候，我们就会用arguments来代替形参
数组的全局方法
往前插入：arr.unshift()
往后插：arr.push()
中间插入/删除：arr.splice(2，0，“新元素”)，表示从第二个开始，删除0个，插入新元素中间插入/删除：arr.splice(2，0，“新元素”)，表示从第二个开始，删除0个，插入新元素
拼接数组：arr.concat(arr2)
删除最前面：arr.shift()
删除最后面：arr.pop()
arr.join(“分隔符”)，以字符串形式返回数组内容
切割：arr.slice(2,6),第二个开始，执行到第六个，但不包含第六个
颠倒数组顺序：arr.reverse(),
修改数组成员：arr[1]=“被修改的元素”
字符串的全局方法
1.str.charAt(2)//通过下标查找字符，此语句为查找str下面的第二个元素
2.拼接字符串：str.concat(str2)
3.根据字符找下标 indexOf(开始位置找) lastIndexOf(从后往前找)
4.str.indexOf(“c”,4);//为两个参数时，表示从第四个开始，查找c出现的位置（会自动略掉前面的),为一个参数时，查找元素首先出现得位置
5. 替换字符 replace() 如果要全局匹配 String.replace(/被替换字符/g,替换的新字符)
6. console.log(str.substr(2,5))//代表从第二个开始切割五个,包含第二个和第五个。
7. str.slice(2，6));//代表从第二个开始切割到第六个,但不包含第六个，类似于数组中的.slice(),开始位置包含，结束位置不包含
8. str.substring(2,6));//等价于上面的.slice 唯一的区别是它不接受负数。
9. 根据字符将字符串切割成长度若干的数组 split()
设置获取元素的自定义属性
- setAttribute(key,value) 设置元素的自定义属性
- getAttribute(key) 获取元素的自定义属性的属性值
Data()对象
1, Date().getFullYear())//返回年份
// 2 赋给变量：var now=new Date();
// 3.now.getFullYear()//返回年份
// 4.now.getMonth()//返回月份,从0开始，一般都加1
// 5 now.getDate();//返回日
// 6 now.getHours();//返回小时
// 7 now.getMinutes()//返回分钟
// 8 now.getSeconds()//返回秒；
// 9 now.getDay()//返回星期
// 10 now.getTime()//返回时间戳，从1970年到现在一共过了对少毫秒
// 11 var b=new Date(“2020-12-12 18:00”);//括号里面也可以插入参数，用于获取未来的某一个
Math内置对象
// 返回绝对值
console.log(Math.abs(-3))
// 向上取整
console.log(Math.ceil(3.00000000001))
// 向下取整
console.log(Math.floor(3.999999999))
// 四舍五入
console.log(Math.round(3.4))
Math.max(1,5,6,8);//返回最大值
Math.min(1,4,5));//返回最小值
// 返回 x 的 y 次方。
Math.pow(x,y)
解构赋值
1.解构对象
2，解构对象
快速的从对象中获取成员// ES5 的方法向得到对象中的成员
const obj = {name: 'Jack',age: 18,gender: '男'
}let name = obj.name
let age = obj.age
let gender = obj.gender
// 解构赋值的方式从对象中获取成员
const obj = {name: 'Jack',age: 18,gender: '男'
}// 前面的 {} 表示我要从 obj 这个对象中获取成员了
// name age gender 都得是 obj 中有的成员
// obj 必须是一个对象
let { name, age, gender } = obj
2.解构数组
3，解构数组
快速的从数组中获取成员// ES5 的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']
let a = arr[0]
let b = arr[1]
let c = arr[2]
// 使用解构赋值的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']// 前面的 [] 表示要从 arr 这个数组中获取成员了
// a b c 分别对应这数组中的索引 0 1 2
// arr 必须是一个数组
let [a, b, c] = arr
注意
{} 是专门解构对象使用的
[] 是专门解构数组使用的
不能混用
javascript 案例
编程题
随机颜色
function getRandom(){var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];var reselt="#";for(var i=0;i<6;i++){var sum=parseInt(Math.random()*16);reselt=reselt+arr[sum];}return reselt;}console.log(getRandom());
1,珠峰：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>span{display: inline-block;width: 20px;height: 20px;background: pink;text-align: center;line-height: 20px;}</style></head><body><script>var h=0.1;cut=0;while(h<8848){h*=2;cut++;}console.log(h)</script></body>
</html>2,芝麻与方格
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height:80px;border: 1px solid #CCC;float: left;}</style></head><body><script>// 有一个棋盘，有64个方格，在第一个方格里面放1粒芝麻重量是0.00001kg，//第二个里面放2粒，//第三个里面放4，// 第四个里面放8，在页面中画出棋盘并输出放的所有芝麻的重量。z=1;//存放的芝麻数量for( var i=1;i<=64;i++){if(i===1){document.write("<div> 0.00001 kg</div>")}else{document.write("<div>"+ z*2*0.00001+"kg</div>");z=z*2;}}</script></body>
</html>
3,银行利息
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>本金:<input type="text" id="ben" /> 年限：<input type="text" id="num" /> 利息：<button id="box">计算</button><script>box.onclick = function() {var b = Number(ben.value); //本金var n = Number(num.value); //年限var v; //月利率if (n === 1) {v = 0.0063;} else {if (n === 2) {v = 0.0066} else {if (n === 3) {v = 0.0069} else {if (n === 5) {v = 0.0075} else {v = 0.0084}}}}var w = b * v * 12 * n;console.log(w);}</script></body></html>
4,选择排序
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--6.选择排序--><script>var a = [6,5,4,7,3,8,2,9,1,0];var t;var k;for(var i=0; i<a.length-1; i++){k = i;for(var j=i+1; j<a.length; j++){if(a[k]>a[j]){k = j;}}t = a[i];a[i] = a[k];a[k] = t;}console.log(a);//思路：找到最小的数，将它放在最前面，每次都将最小的数归为
</script></body>
</html>5,薪资
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>span{display: inline-block;width: 20px;height: 20px;background: pink;text-align: center;line-height: 20px;}</style></head><body><!--1. 入职薪水10K，每年涨幅5%，50年后工资多少？--><script>var lay=10000;var i=0;while(i<=50){lay=lay*(1+0.05);i++;}console.log(lay)</script></body>
</html>6,小时转化为天
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" id="h" placeholder="工作了多少小时呢？"/><button id="box">计算</button><script>box.onclick=function(){var datahours=h.value;var datahours=89;//总的小时数var day=(datahours - datahours %24)/24; var hours=89%24;console.log(datahours + "小时一共是" + day + "天零" +hours+"小时");}</script></body>
</html>
7,随机点名
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--随机点名程序提示：把人名都放进数组，随机产生一个下标，根据下标取出一个人名--><script>
// var arr =["张三","李四","王五","赵六"];
// var index = Math.floor((Math.random()*arr.length));
// console.log(arr[index])function add(arr){var index=Math.floor(Math.random() * arr.length);return arr[index];}console.log(add(["张三","李四","王五","赵六"]))</script></body>
</html58,素数
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--页面中有两个文本框，点击按钮后输出n-m之间所有的素数(素数:只能被1和自己本身整除的数)(双层for循环)--><script>var n=10;var m=100;var t=0;for(n;n<=m;n++){var ss=true;for(j=2;j<=n-1;j++){if(n % j===0){ss=false;}}if(ss===true){console.log(n);}}</script></body></html>9,水仙花
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>span{display: inline-block;width: 20px;height: 20px;background: pink;text-align: center;line-height: 20px;}</style></head><body><script>for(var i=100;i<1000;i++){var j=i;var bai=parseInt(j/100);var shi=parseInt((j-bai * 100)/10);var ge=j % 10;if(ge*ge*ge+bai*bai*bai+shi*shi*shi===i){console.log(i);}}</script></body>
</html>10,数组去重(1)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--8.编写函数noRepeat(Array) 将数组的重复元素去掉，并返回新的数组--><script>function noRepeat(array){var reselt=[];for(var i=0;i<array.length;i++){var buer=false;for(var j=0;j<reselt.length;j++){if(reselt[j]===array[i]){buer=true;}}if(buer===false){reselt.push(array[i]);}}return reselt;}console.log(noRepeat([1,2,2,3,3,4,4,5,6,6,5]))console.log(noRepeat([2,2,2,2,2,2]))</script></body>
</html>(2)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--.编写函数noRepeat(Array) 将数组的重复元素去掉，并返回新的数组--><script>function has(array,n){var buer=false;for(var i=0;i<array.length;i++){if(array[i]===n){buer=true;}}return buer;}function noRepeat(array){var reselt=[];for(var i=0;i<array.length;i++){if(has(reselt,array[i])===false){reselt.push(array[i])}}return reselt;}console.log(noRepeat([1,2,3,3,5,6,1,1,2,3,4]));</script></body>
</html>(3)
<script>let arr=[1,2,3,4,54,5,6,7,];console.log(Array.from(new Set(arr)))</script>
11,求平均值
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--5.定义一个含有80个元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。--><script>var arr=[];for(i=0;i<80;i++){arr[i]=(i + 1) *2;}var sum=0;var reselt=[];for(var i=0;i<arr.length;i++){if(i % 5===0 && i!==0){reselt.push(sum / 5);sum=0;}sum=sum+arr[i];}console.log(reselt)</script> </body>
</html>12,数码时钟
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{background: #232323;color: white;}</style></head><body><div id="fa"> <img src="img/0.png"/><img src="img/0.png"/>时<img src="img/0.png"/><img src="img/0.png"/>分<img src="img/0.png"/><img src="img/0.png"/>秒</div><script>function add(date){if(date<10){return "0" +date;}return date;}var Img=document.getElementsByTagName("img");console.log(Img)function time(){var now=new Date(); var str=add(now.getHours()) + add(now.getMinutes()) + add(now.getSeconds());for(var i=0;i<Img.length;i++){Img[i].src="./img/" + str[i] + ".png";}}time();setInterval(function(){time();},1000)</script></body>
</html>12-1 华氏度转摄氏度
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" placeholder="请输入华氏度" id="tem" /><button id="con">计算</button><script>con.onclick=function(){var huashidu=tem.value;var sheshidu=parseInt((5 / 9 *(huashidu - 32)) * 1000)/1000;console.log(huashidu+ "华氏度是"+sheshidu +"摄氏度");}</script></body>
</html>13，鼠标拖动
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;}#box{width: 600px;height: 600px;background: pink;overflow: hidden;position: absolute;top: 0;left: 0;font-size: 20px;pointer-events: none;}</style></head><body><div id="box">X:<span id="x">0</span>Y:<span id="y">0</span></div><script>var div=document.getElementById("box");var x=document.getElementById("x");var y=document.getElementById("y");window.onmousemove=function(event){x.innerHTML=event.offsetX;y.innerHTML=event.offsetY;div.style.top=event.offsetY-20+"px";div.style.left=event.offsetX-20 + "px";}</script></body>
</html>14,点击拖动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}html,body{height:100%;}.box{width: 300px;height: 300px;background-color: #f99;cursor:move;position: absolute;}</style>
</head>
<body><div class="box"></div><script>function $(sop){var reselt=document.querySelectorAll(sop);if(reselt.length===1){return reselt[0];}return reselt;}var box = $(".box");box.onmousedown = function(event){var X = event.offsetX;var Y = event.offsetY;var virtualNode = box.cloneNode(true);virtualNode.style.opacity = 0.5;$("body").appendChild(virtualNode)window.onmousemove = function(event){var x = event.clientX;var y = event.clientY;virtualNode.style.left = x - X + "px";virtualNode.style.top = y - Y + "px";if(parseInt(virtualNode.style.top)<=0){virtualNode.style.top = 0;}if(parseInt(virtualNode.style.top) >= document.body.clientHeight - virtualNode.offsetHeight){virtualNode.style.top = document.body.clientHeight - virtualNode.offsetHeight + "px";}}window.onmouseup = function(){box.style.left = virtualNode.style.left;box.style.top = virtualNode.style.top;virtualNode.remove();window.onmousemove = undefined;}}</script>
</body>
</html>
15,十六进制颜色值获取
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>
// .获取16进制颜色值。function getRandom(){var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];var reselt="#";for(var i=0;i<6;i++){var sum=parseInt(Math.random()*16);reselt=reselt+arr[sum];}return reselt;}console.log(getRandom());</script></body>
</html>16,随机生成5位数
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><!--.随机生成5位以内的数，然后输出该数字有多少位，每位分别是什么？--><script>function add(){var sum=parseInt(Math.random() * 10000);var qian=parseInt(sum/1000);//千位var bai=parseInt((sum-qian * 1000)/100);//百位var shi=parseInt((sum-qian * 1000 - bai *100)/10);//十位var ge=sum % 10;//个位console.log(sum)if(sum<10000 && sum>1000){console.log("共有四位数字,第一位为" + qian + "第二位为" + bai+ "第三位为" + shi + "第四位为" + ge);return [qian,bai,shi,ge];}if(sum<1000 && sum>100){return [bai,shi,ge]}if(sum<100 && sum>10){return [shi,ge]}if(sum <10){return [ge]}return [qian,bai,shi,ge]}console.log(add())</script></body>
</html>17,身高体重
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">--><title></title>
</head>
<body>身高：<input type="text" id="heightId">厘米体重：<input type="text" id="weightId">斤<input type="button" value="身材" onclick="testf()">结果：<input type="text" id="JG">
</body>
</html>
<script type="text/javascript">function testf(){var height=Number(document.getElementById("heightId").value)var weight=Number(document.getElementById("weightId").value)var standardWeight = (height-108)*2;//斤var str="";if(weight<standardWeight-10){str="亲，您应该多吃点";}else if(weight>standardWeight+10){str="亲，您应该跑步至少15分钟以上，，可以办个卡";}else{str="亲，您是魔鬼身材！";}document.getElementById("JG").value = str;}
</script>
17-1 对称数组
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--对称数组传入一个数组，起始元素类型与个数皆未知，返回新数组，由原数组的元素正序反序拼接而成传入[“One”, “Two”,”Three”] 返回[“One”, “Two”, “Three”,”Three”,”Two”, “One”]--><script>function add(arr){var reselt=[];for(var i=0;i<arr.length;i++){reselt.push(arr[i]);}return arr.concat(reselt.reverse()); }console.log(add(["one","two","three"]))console.log(add(["你","是","人"]))console.log(add([1,2,3]))</script></body>
</html>17-2 递归阶乘
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--2.编写函数，该函数接收一个Number类型的参数n，该函数会返回n的阶乘结果。（阶乘：一个非负整数n的阶乘是所有小于或等于 n的正整数之积）--><script>
// function add(n){// sum=1;
// for(var i=1;i<=n;i++){// sum*=i;
// }
// return sum;
// }
// console.log(add(10))function fn(n){if(n===1){return 1;}return n * fn(n-1);}console.log(fn(10))</script></body>
</html>17-3 当前为第几天
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>var sum=0;//用于存放总天数var x=3;//当前月份var y=25;//当前天数 switch(x-1){case 1:{sum+=31;}case 2:{sum+=28;}case 3:{sum+=31;}case 4:{sum+=30;}case 5:{sum+=31;}case 6:{sum+=30;}case 7:{sum+=31;}case 8:{sum+=31;}case 9:{sum+=30;}case 10:{sum+=31;}case 11:{sum+=30}}sum+=y;console.log(sum)</script></body>
</html>17-4 数组逆序
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>
<script>var arr = [5,6,4,7,3,8,2,9,0,1];var temp;for(var i=0; i<arr.length/2; i++){temp = arr[i];arr[i] = arr[arr.length-i-1];arr[arr.length-i-1] = temp;}for(var i=0; i<arr.length; i++){console.log(arr[i]);}
</script>
18,闰年
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>function add(year){if(year % 4===0){if(year % 100===0){if(year % 400===0){return true;}else{return false;}}else{return true;}}else{return false;}}console.log(add(2001));</script></body>
</html>19,闰年2(区间)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>var cun=0;for(i=1;i<=2021;i++){if(i % 4 ===0){if(i % 100===0){if(i % 400===0){cun++;console.log(cun);}}else{cun++;console.log(cun);}}}console.log("一共有"+ cun + "个闰年");</script></body>
</html>20 判断字符串及特殊字符
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>var str = "12a45bcAAB+#$%^";var count1 = 0;var count2 = 0;var count3 = 0;var count4 = 0;for(var i=0; i<str.length; i++){if(str.charAt(i) >= 'A' && str.charAt(i)<='Z'){count1++;}else if(str.charAt(i) >= 'a' && str.charAt(i)<='z'){count2++;}else if(str.charAt(i) >= '0' && str.charAt(i)<='9'){count3++;}else{count4++;}}console.log(count1,count2,count3,count4);//根据元素的Ascll码值进行运算</script></body>
</html>21 逆序输出
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--2.将字符串按照单词进行逆序，空格作为划分单词的唯一条件传入:"Welome to Beijing”改为 “Beijing to Welcome”--><script>function fn(string){var arr=string.split(" ");arr.reverse();return arr.join(" ");}console.log(fn("Welome to Beijing"));</script></body>
</html>21 敏感词过滤
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--3.敏感词过滤。（用户输入的内容中的敏感词替换为*）例：“今天有个傻子在旁边总tmd大喊大叫，tmd影响了我的操作。”，过滤后“今天有个*在旁边总*大喊大叫，*影响了我的*作。”。思路：把敏感词汇放在数组里：var arr=["傻子","tmd","操"];--><textarea name="" rows="10" cols="20" id="app"></textarea><button id="box">检测</button><textarea name="" rows="10" cols="20" disabled="disabled" id="aoo"></textarea><script>box.onclick=function(){var reselt=app.value;var arr=[/傻子/g,/tmd/g,/操/g];for(var i=0;i<arr.length;i++){reselt=reselt.replace(arr[i],"*");}aoo.value=reselt;}</script></body>
</html>22 密码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>function fn(pass){var qianwei = parseInt(pass / 1000);var baiwei = parseInt((pass - qianwei * 1000 ) / 100);var shiwei = parseInt((pass - qianwei*1000 - baiwei * 100) /10);var gewei = parseInt((pass - qianwei*1000 - baiwei * 100 - shiwei * 10) ); var a = String((qianwei + 5)%10);var b = String((baiwei + 5 )%10);var c = String((shiwei + 5 )%10);var d = String((gewei + 5 )%10);return Number(d+c+b+a)// console.log(qianwei)// console.log(baiwei)// console.log(shiwei)// console.log(gewei)}console.log(fn(6234))console.log(fn(1364))console.log(fn(8989))</script></body>
</html>23,冒泡排序
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--5.冒泡排序--><script>function add(array){for(var i=0;i<array.length-1;i++){for(var j=0;j<array.length-1-i;i++){if(array[j]>array[j + 1]){var tmelet=array[j];array[j]=array[j + 1];array[j + 1]=tmelet;}}}return array;}console.log(add([-10,1,2,14,6,5]))</script></body>
</html>24 箭头函数
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>正常函数 var fn=function(a,b){return a + b;}console.log(fn(10,12));箭头函数 var fn1=(a,b)=>a+b;console.log(fn1(1,5))以上两种写法完全等价,当函数的形参有两个时，括号不能省，只有一个形参时，可以省略括号如下正常函数 var fn=function(a){return a +10;}console.log(fn(10));箭头函数 var fn1=a=>a+10;console.log(fn1(10));</script></body>
</html>回文数
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>function huiwen(number){var wanwei=parseInt(number/10000);var qianwei=parseInt((number-wanwei*10000)/1000);var baiwei=parseInt((number-wanwei*10000-qianwei*1000)/100);var shiwei=(number % 100- number%10)/10;var gewei=number%10;if(wanwei===gewei && shiwei===qianwei){return true;}else{return false;}}console.log(huiwen(12321));console.log(huiwen(12345));</script></body>
</html>成绩等级存放
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--4.定义一个数组来存储12个学生的成绩[72,89,65,58,87,91,53,82,71,93,76,68]统计各成绩等级（90分以上为‘A’，80~89分为‘B’，70~79分为‘C’，60~69分为‘D’，60分以下为E）学生人数，并将其放入到数组count中，其中：count[0]存E级的人数，count[1]存D级的人数，……，count[4]存A级的人数--><script>var arr=[72,89,65,58,87,91,53,82,71,93,76,68];var count=[0,0,0,0,0];//存放成绩等级for(var i=0;i<arr.length;i++){if(arr[i]<60){count[4]++;}if(arr[i]>59 && arr[i]<70){count[3]++;}if(arr[i] > 69 && arr[i]<80){count[2]++}if(arr[i]>79 && arr[i]<90){count[1]++;}if(arr[i]>90){count[0]++;}}console.log(count)</script></body>
</html>封装
//获取元素函数
//function $(sele){// var reselt=document.querySelectorAll(sele);
// if(reselt.length===1){// return reselt[0];
// }
// return reselt;
//}
获取元素函数放法2
class Select{constructor(arg) {}//静态方法:如果一个类的成员函数和类的对象没有任何关系,则我们认为这种方法是静态方法// $(str){// if(str.charAt(0) == "#"){// return document.getElementById(str.slice(1,str.length));// }else if(str.charAt(0) == "."){// return document.getElementsByClassName(str.slice(1,str.length))[0];// }else{// return document.getElementsByTagName(str)[0];// }// }//static静态关键字，被修饰的函数为静态函数//静态函数只能通过类名调用，不能通过类对象调用static $(str){if(str.charAt(0) == "#"){return document.getElementById(str.slice(1,str.length));}else if(str.charAt(0) == "."){return document.getElementsByClassName(str.slice(1,str.length))[0];}else{return document.getElementsByTagName(str)[0];}}
}class Calc{static operator(l,r,opt){switch(opt){case "+":return l+r;case "-":return l-r;case "*":return l*r;case "/":return l/r;}}
}
//十六进制颜色值
function getcolor(){var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];var reselt="#";for(var i=0;i<6;i++){var sum=Math.floor(Math.random() * 16);reselt=reselt+arr[sum];}return reselt;
}
//生成随机数(m到n之间的数，)function rand(max,min){for(var i=0;i<60;i++){return Math.floor(Math.random()*(max-min)+min);//用最大的数减去//最小的然后加上最小的即可}}
//对称输出function fn(array){var reselt=[];for(var i=0;i<array.length;i++){reselt.push(array[i]);}return array.concat(reselt.reverse());}
//验证码function verify(){var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];var reselt="";for(var i=0;i<4;i++){var sum=parseInt(Math.random() * 16);reselt=reselt+arr[sum];}return reselt;}
//运动反弹
function chage(sele){clearInterval(time)let spanX=5;let spanY=5;time=setInterval(function(){sele.style.left=sele.offsetLeft + spanX + "px";sele.style.top=sele.offsetTop + spanY + "px";if(sele.offsetLeft<0 || sele.offsetLeft>innerWidth-sele.offsetWidth){spanX=spanX*-1}else{if(sele.offsetTop<0 || sele.offsetTop>innerHeight-sele.offsetHeight){spanY=spanY*-1}}},50)}
//拖拽
function tuo(sele){sele.onmousedown = function(evt){var e = evt || event;var offsetX = e.offsetX;var offsetY = e.offsetY;document.onmousemove = function(evt){var e = evt || event;var left = e.pageX - offsetX;var top = e.pageY - offsetY;if(left < 0){left = 0;}var maxLeft = window.innerWidth - sele.offsetWidth;if(left > maxLeft){left = maxLeft;}if(top < 0){top = 0;}var maxTop = window.innerHeight - sele.offsetHeight;if(top > maxTop){top = maxTop;}sele.style.left = left + "px";sele.style.top = top + "px";}document.onmouseup = function(){document.onmousemove = null;}}}
//抛物线function parabola(box,target){//y = ax*x + bx + c ;//通过已知公式可以通过x值求得a值;//曲率 >> 可以观察改变a的值会发生什么事情;//目标点的相对坐标; var a = 0.008;var coord = {x : target.offsetLeft - box.offsetLeft,y : target.offsetTop - box.offsetTop}//求系数b//y = ax*x + bx + 0//bx = y - a*x*x //公式为; b = (y - a*x*x) / x ; var b = (coord.y - a * coord.x * coord.x) / coord.x;//原点坐标;var center = {x : box.offsetLeft,y : box.offsetTop}var speed = 1;var offsetX = 0;//在坐标轴上移动的值var timer = setInterval(function(){//console.log(box.offsetLeft)box.style.left = center.x + (offsetX += speed) + "px";box.style.top = center.y + (a * offsetX * offsetX + b*offsetX) + "px";if(offsetX >= coord.x){box.style.left = target.offsetLeft + 'px';box.style.top = target.offsetTop + 'px';clearInterval(timer);}//轨迹;var div = document.createElement('div')div.className = "box";div.style.left = center.x + (offsetX += speed) + "px";div.style.top = center.y + (a * offsetX * offsetX + b*offsetX) + "px";document.getElementsByTagName("body")[0].appendChild(div);},30)}//篮球回弹function fantan(ball,container){//(前面传子元素，后面传父元素)var g = 1; //重力加速度;var vx = 1; //x轴速度;var vy = 0; //y轴速度;var cH = document.documentElement.clientHeight || document.body.clientHeight;var containerHeight = container.offsetHeight;var conTop = container.offsetTop;var left,top;setInterval(function(){if(ball.offsetTop >= containerHeight - ball.offsetHeight){ball.style.top = containerHeight - ball.offsetHeight + "px";vy = -vy*0.8;}vy = vy + g;left = ball.offsetLeft + vx;top = ball.offsetTop + vy;ball.style.left = left + "px";ball.style.top = top + "px";},30)}//放大镜业务
1 简易日历
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}#wrap{width: 300px;height: 500px;background:whitesmoke;margin: 100px auto;border: 1px solid transparent;}#wrap>ul{width: 90%;height: 300px;/*background: pink;*/margin: 0 auto;margin-top: 20px;display: flex;justify-content: space-around;flex-wrap: wrap;}#wrap>ul>li{list-style: none;width: 26%;height:52px;background:linear-gradient(to bottom,gray,grey);float: left;margin-top: 15px;text-align: center;color: white;font-size: 12px;cursor: pointer;}#wrap>ul>.focus{background: white;color:deeppink;font-weight: 700;}.foot{width: 90%;height: 150px;background:pink;margin: 0 auto;margin-top: 20px;background:url(img/123.gif) no-repeat;background-size: 100% 100%;}.foot h3{margin: 10px;}</style></head><body><div id="wrap"><ul><li class="focus" data-i="0"><h2>1</h2><p>JAN<p/></li><li data-i="1"><h2>2</h2><p>FER<p/></li><li data-i="2"><h2>3</h2><p>MAR<p/></li><li data-i="3"><h2>4</h2><p>APR<p/></li><li data-i="4"><h2>5</h2><p>MAY<p/></li><li data-i="5"><h2>6</h2><p>JUN<p/></li><li data-i="6"><h2>7</h2><p>JUL<p/></li><li data-i="7"><h2>8</h2><p>AUG<p/></li><li data-i="8"><h2>9</h2><p>SEP<p/></li><li data-i="9"><h2>10</h2><p>OCT<p/></li><li data-i="10"><h2>11</h2><p>NPV<p/></li><li data-i="11"><h2>12</h2><p>WFY<p/></li></ul><div class="foot"><h3><span id="san">1</span>月活动</h3><p>大家商量着去哪儿玩~</p></div></div><script>var liLIst=document.querySelectorAll("ul li");var span=document.getElementById("san")var h2=document.querySelectorAll("li h2");
// console.log(h2)index=0;for(var i=0;i<liLIst.length;i++){liLIst[i].onclick=function(){for(var i=0;i<liLIst.length;i++){liLIst[i].className="";}this.className="focus";index=Number(this.getAttribute("data-i"));span.innerHTML=this.innerHTML;}}</script></body>
</html>2 计算器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>input{outline: none;border:2px solid goldenrod;border-color:deeppink;animation: dh .6s linear infinite;}@keyframes dh{0%{border-color: pink;}33%{border-color: green;}66%{border-color: yellow;}100%{border-color: aqua;}}</style></head><body><p><input type="text" name="" id="ja" value="" />+<input type="text" name="" id="ji" /><button id="jia">计算</button></p><p><input type="text" id="jn">-<input type="text" id="jin" /><button id="jian">计算</button></p><p><input type="text" id="ce">*<input type="text" id="che"><button id="chen">计算</button></p><p><input type="text" id="cu"> /<input type="text" id="ch"> <button id="chu">计算</button></p><p><input type="text" id="qi">%<input type="text" id="qiu"><button id="qiuyu">计算</button></p><script>jia.onclick=function(){var num1=ja.value;var num2=ji.value;var num3=Number(ja.value)+Number(ji.value);document.write(num1 + "+" + num2 + "=" +num3);}jian.onclick=function(){var num1=jn.value;var num2=jin.value;var num3=Number(jn.value)-Number(jin.value);document.write(num3);}chen.onclick=function(){var num1=ce.value;var num2=che.value;var num3=Number(ce.value*che.value);document.write(num3);}chu.onclick=function(){var num1=cu.value;var num2=ch.value;var num3=Number(cu.value/ch.value);document.write(num3);}qiuyu.onclick=function(){var num1=qi.value;var num2=qiu.value;var num3=Number(qi.value%qiu.value);document.write(num3);}</script></body>
</html>3 计时器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h2 id="time"></h2><script>function writeNowDate(){var now = new Date();var year = now.getFullYear();var month = now.getMonth()+1;var date = now.getDate();var hours = now.getHours() <= 9 ? "0" + now.getHours() : now.getHours();var minutes = now.getMinutes() <= 9 ? "0" + now.getMinutes() : now.getMinutes();var seconds = now.getSeconds() <= 9 ? "0" + now.getSeconds() : now.getSeconds();var day = now.getDay();if(day === 0){day = "天";}if(day === 1){day = "一";}if(day === 2){day = "二";}if(day === 3){day = "三";}if(day === 4){day = "四";}if(day === 5){day = "五";}if(day === 6){day = "六";}time.innerHTML = "您好，今天是：" + year + "年" + month + "月" + date + "日" + hours + ":" + minutes + ":" + seconds + " 星期" + day}writeNowDate()setInterval(function(){writeNowDate()},1000)</script>
</body>
</html>
4 广高倒计时
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;}#box{width: 300px;height: 500px;background:pink;background: rgba(0,0,0,0.4);margin: 100px auto;position: relative;}#box span{position: absolute;top: 20px;right:45px;}p{width: 20px;height: 25px;text-align: center;border-radius: 20px;background:white;position: absolute;right: 20px;top: 20px;color: black;}</style></head><body><div id="box"><p id="oP">5</p><span>广告还有:</span></div><button id="btn" style="display: none;"></button><script>var div=document.getElementById("box");var oP=document.getElementById("oP")var btn=document.getElementById("btn");btn.onclick=function(){oP.innerHTML=Number(oP.innerHTML)-1;}setInterval(function(){div.style.display="none";},5000)setInterval(function(){btn.click();},1000)</script></body>
</html>5 多选
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}#fa{margin-left:30px;margin-top:30px;}</style></head><body><div id="fa"><p>请选择你的爱好:</p><input type="checkbox" id="box" value=""/> 全选/全不选<br/><input type="checkbox" name="oname" value=""/> 打篮球<input type="checkbox" name="oname" value=""/> 踢足球<input type="checkbox" name="oname" value=""/> 听音乐<input type="checkbox" name="oname" value=""/> 查BUG<input type="checkbox" name="oname" value=""/>睡觉<br/><button id="btn1">全选</button><button id="btn2">全不选</button><button id="btn3">反选</button></div><script>function $(sele){//获取元素函数var reselt=document.querySelectorAll(sele);if(reselt.length===1){return reselt[0];}return reselt;}var box=$("#box")//全选框/全不选var check=$("#btn1");//全选var Nocheck=$("#btn2");//全不选var Notall=$("#btn3");//反选var inpt=document.getElementsByName("oname")console.log(inpt)//全选/全不选box.onclick=function(){for(var i=0;i<inpt.length;i++){inpt[i].checked=check;}}//全选check.onclick=function(){for(var i=0;i<inpt.length;i++){inpt[i].checked=check;}}//全不选Nocheck.onclick=function(){for(var i=0;i<inpt.length;i++){inpt[i].checked=!check;}}//反选Notall.onclick=function(){for(var i=0;i<inpt.length;i++){inpt[i].click();}}</script></body>
</html>6,多阶段动画
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}#box{width: 300px;height: 300px;border-radius: 100%;background: deeppink;}</style></head><body><div id="box" style="margin-left: 0;margin-top: 0;margin-right: 0; "></div><script>var div=document.getElementById("box");var move1=setInterval(function(){var mL1=parseInt(div.style.marginLeft);if(mL1>=500){clearInterval(move1)div.style.marginLeft="500px";var move2=setInterval(function(){var mL2=parseInt(div.style.marginTop);if(mL2>=500){clearInterval(move2);div.style.marginTop="500px";return;}div.style.marginTop=mL2 + 7 +"px";},16)return;}div.style.marginLeft=mL1 + 7 + "px";},16)</script></body>
</html>7, 窗口滚动
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}li{list-style: none;}#nav{width: 60px;position: fixed;right: 20px;top: 50%;background:white;border-radius: 10px;}#nav>li{font-size: 20px;text-align: center;line-height: 32px;margin-bottom: 5px;/*margin-top: 10px;*/cursor:pointer;}#nav>.focus{background-color:pink;}</style></head><body><!--<div id="box"></div>--><ul id="nav" class="right"><li class="focus" data-i="0">1F</li><li data-i="1">2F</li><li data-i="2">3F</li><li data-i="3">4F</li><li data-i="4">5F</li><li data-i="5">6F</li><li data-i="6">7F</li><li data-i="7">8F</li><li data-i="8">9F</li><li>NF</li></ul><script>function getRandomColor(){var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];var reselt="#";for(var i=0;i<6;i++){var sum=parseInt(Math.random()*16);reselt=reselt+arr[sum];}return reselt;}for(var i = 0; i < 100;i++){var div = document.createElement("div");div.style.height ="500px";div.style.backgroundColor = getRandomColor();document.getElementsByTagName("body")[0].appendChild(div);}var liList=document.querySelectorAll("#nav li");var rightnav=document.querySelectorAll(".right li");var index=0;window.onscroll=function(){var n=Math.floor(document.documentElement.scrollTop/500);n=n>=9?9:n;for(var i=0;i<liList.length;i++){liList[i].className="";}liList[n].className="focus";}for(var i=0;i<rightnav.length;i++){rightnav[i].onclick=function(){for(var i=0;i<rightnav.length;i++){rightnav[i].className="";}this.className="focus";index=Number(this.getAttribute("data-i"));console.log(index)document.documentElement.scrollTop=index*500;//点击时滚动的距离}}</script></body>
</html>8 购物车
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>table {width: 50%;position: relative;margin: 30px auto;border-collapse: collapse;border: 1px solid gray;box-sizing: border-box;}th {background: yellow;height: 2.5em;margin: 0 auto;}tr {height: 2.5em;margin: 0 auto;text-align: center;}.box{margin: auto;width: 50%;}</style></head><body><table border="1px" id="goods"><tr><th>序号</th><th>商品名称</th><th>数量</th><th>单价</th><th>小计</th><th>操作</th></tr><tr><td>1</td><td>青椒肉丝盖饭</td><td><button type="button">-</button><span class="goods-num">0</span><button type="button">+</button></td><td>单价:<span class="goods-price">13</span></td><td>小计:<span class="goods-single-price">0</span></td><td>操作:<input type="button" class="deled" value="删除" /></td></tr><tr><td>2</td><td>酸辣土豆丝盖饭</td><td><button type="button">-</button><span class="goods-num">0</span><button type="button">+</button></td><td>单价:<span class="goods-price">10</span></td><td>小计:<span class="goods-single-price">0</span></td><td>操作:<input type="button" class="deled" value="删除" /></td></tr><tr><td colspan="6">一共<span id="goods-total-num">0</span>件商品,共计花费<span id="goods-total-price">0</span>元。</td></tr></table><hr><table border="1px" id="update-table"><tr><th>序号</th><th>商品名称</th><th>单价</th><th>操作</th><th>操作</th></tr><tr class="update-goods"><td>1</td><td>鱼香肉丝</td><td>13</td><td>增加：<input type="button" class = "update" value="增加" /></td><td>删除：<input type="button" class="deled-update" value="删除" /></td></tr></table><hr><div class="box">商品名称：<input type="text" class="goods-update" /><br>商品单价：<input type="text" class="goods-update" /><br><input type="button" id="update" value="添加" /></div></body>
</html>
<script>class Cart {constructor() {this.eventBind();}//获取且更新总货物总数量getGoodsNumAndUpdate() {//获取所有商品的数量let oGoodsNum = document.getElementsByClassName("goods-num");//存放商品数量叠加的总值let goodsTotalNum = 0;for (let i = 0; i < oGoodsNum.length; i++) {goodsTotalNum += Number(oGoodsNum[i].innerHTML);}let oGoodsTotalNum = document.getElementById("goods-total-num");oGoodsTotalNum.innerHTML = goodsTotalNum;}//获取且更新总货物总价格getGoodsPriceAndUpdate() {let oGoodsSinglePrice = document.getElementsByClassName("goods-single-price");let goodsTotalPrice = 0;for (let i = 0; i < oGoodsSinglePrice.length; i++) {goodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);}let oGoodsTotalPrice = document.getElementById("goods-total-price");oGoodsTotalPrice.innerHTML = goodsTotalPrice;}//获取小计getSinglePrice(num, price) {return num * price;}//增加获取addGoods(btn) {//获取数量let oGoodsNum = btn.previousElementSibling;//1.oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;//获取单价let oPrice = btn.parentNode.nextElementSibling.firstElementChild;//获取小计let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;//2.oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);//3.this.getGoodsNumAndUpdate();//4.this.getGoodsPriceAndUpdate();}minGoods(btn) {//获取数量let oGoodsNum = btn.nextElementSibling;if (oGoodsNum.innerHTML > 0) {oGoodsNum.innerHTML = oGoodsNum.innerHTML - 1;//获取单价let oPrice = btn.parentNode.nextElementSibling.firstElementChild;//获取小计let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;//2.oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);//3.this.getGoodsNumAndUpdate();//4.this.getGoodsPriceAndUpdate();}}delGoods(btn) {let god = document.getElementById("goods");let oTr = btn.parentNode.parentNode;oTr.remove();//3.重新排序号for(let i =1;i<god.firstElementChild.children.length-1;i++){god.firstElementChild.children[i].firstElementChild.innerHTML = i;}this.getGoodsNumAndUpdate();//4.this.getGoodsPriceAndUpdate();}eventBind() {let oBtns = document.getElementsByTagName("button");//这个this是为了避免在事件体内cart的对象被覆盖let that = this;for (let i = 0; i < oBtns.length; i++) {if (i % 2 == 0) {oBtns[i].onclick = function() {that.minGoods(this);}} else {oBtns[i].onclick = function() {that.addGoods(this);}}}let oDelBtns = document.getElementsByClassName("deled");for (let i = 0; i < oDelBtns.length; i++) {oDelBtns[i].onclick = function() {that.delGoods(this);}}this.goodsUpdate();this.update();}goodsUpdate() {//添加菜品let texts = document.getElementsByClassName("goods-update");let updateTable = document.getElementById("update-table");let btn = document.getElementById("update");let that = this;let flag = false;let reg = /^[\u4e00-\u9fa5]+$/;let reg2 = /^[0-9]+.?[0-9]*$/;btn.onclick = function() {for(let i = 1;i<updateTable.firstElementChild.children.length;i++){if(updateTable.firstElementChild.children[i].children[1].innerHTML == texts[0].value){texts[0].value = "";texts[1].value = "";alert('这个菜品已有请勿重复添加');flag = false;break;}else flag = true;}if(flag){if(reg.test(texts[0].value)&®2.test(texts[1].value)){let tr = document.createElement('tr');tr.className = "update-goods";tr.innerHTML = '<td>'+(updateTable.firstElementChild.children.length)+'</td>'+'<td>' +texts[0].value + '</td>'+' <td>' +texts[1].value+' </td>'+' <td> 增加: <input type = "button" class = "update"value = "增加"/> </td><td>删除：<input type="button" class="deled-update" value="删除" /></td>';updateTable.firstElementChild.appendChild(tr);that.update();texts[0].value = "";texts[1].value = "";}else {texts[0].value = "";texts[1].value = "";alert('请输入正确的值');}}}}update(){//添加订单let btn = document.getElementsByClassName("update");let btn2 = document.getElementsByClassName("deled-update");let updateTable = document.getElementById("update-table");let god = document.getElementById("goods");//获取goods的table;let gods = god.firstElementChild.children;let flag = false;let that = this;for(let i = 0;i<btn.length;i++){btn[i].onclick = function(){for(let j = 0;j<gods.length-1;j++){//循环判断菜单中是否有这个菜，如果有这个菜则加1；if(gods[j].children[1].innerHTML == this.parentNode.previousElementSibling.previousElementSibling.innerHTML ){gods[j].children[2].children[1].innerHTML = " "+ (Number(gods[j].children[2].children[1].innerHTML)+1)+" " ;that.getGoodsPriceAndUpdate();gods[j].children[4].innerHTML = '小计:<span class="goods-single-price">'+gods[j].children[2].children[1].innerHTML*gods[j].children[3].firstElementChild.innerHTML+'</span>';that.getGoodsPriceAndUpdate();that.getGoodsNumAndUpdate();flag = false;break;}else{flag = true;}}if(flag){//如果没有这个菜则添加let tr= document.createElement("tr");tr.innerHTML ='<td>'+(gods.length-1)+'</td>'+'<td>'+this.parentNode.previousElementSibling.previousElementSibling.innerHTML+'</td><td><button type="button">-</button><span class="goods-num"> 1 </span><button type="button"> +</button></td><td>单价:<span class="goods-price">'+this.parentNode.previousElementSibling.innerHTML+'</span></td><td>小计:<span class="goods-single-price">'+this.parentNode.previousElementSibling.innerHTML+'</span></td><td>操作:<input type="button" class="deled" value="删除" /></td>';god.firstElementChild.insertBefore(tr,god.firstElementChild.lastElementChild);that.eventBind();that.getGoodsPriceAndUpdate();that.getGoodsNumAndUpdate();}}btn2[i].onclick = function(){btn2[i].parentNode.parentNode.remove();//重新排序号for(let i = 1;i<updateTable.firstElementChild.children.length;i++){updateTable.firstElementChild.children[i].firstElementChild.innerHTML = i;}}}}}let c = new Cart();
</script>9, tab的两种方法
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}li{list-style: none;}#wrap{width: 500px;margin: 100px auto;background: #ccc;border: 1px solid gray;overflow: hidden;}#wrap ul{overflow: hidden;}#wrap li{float:left;padding: 15px 10px;/*background: pink;*/border-right: 1px solid gray;border-bottom: 1px solid gray;}#wrap li.focus{background: whitesmoke;}section{height: 300px;background:#FFC0CB;border: 1px solid gray;padding: 0px 20px;display:none;}.show{display: block;}</style></head><body><div id="wrap"><ul><li data-index ="0">你好世界</li><li data-index ="1">你好世界</li><li data-index ="2">你好世界</li></ul><section class="show">你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊你hi哦啊 你hi哦啊 你hi哦啊 你hi哦啊</section><section>安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过安王鹏举i热火不过</section><section>安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过 安王鹏举i热火不过安王鹏举i热火不过</section></div><script>var liList=document.querySelectorAll("ul li")var section=document.getElementsByTagName("section");//方法一(函数传参法)function add(reselt){for(var i=0;i<liList.length;i++){liList[i].className="";}liList[reselt].className="focus";//for(var i=0;i<section.length;i++){section[i].className="";}section[reselt].className="show";}liList[0].onclick=function(){add(0)}liList[1].onclick=function(){add(1)}liList[2].onclick=function(){add(2)}//方法二(先枚举出来，添加点击事件后在枚举……，将枚举出来的元素去掉class，然后再加上)
// for(var i=0;i<liList.length;i++){// liList[i].οnclick=function(){// for(var i=0;i<liList.length;i++){// liList[i].className="";
// section[i].className="";
// }
// this.className="focus";
// section[this.getAttribute("data-index")].className="show"
// }
// }</script></body>
</html>10,解构赋值
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>
<script>//解构赋值//1.解析结构进行赋值:注意等号左右两边的格式要统一// let x = 1;// let y = 2;// let z = 3;// let [x,y,z] = [1,2,3];// console.log(x,y,z);// let {name,age} = {"name":"老王","age":18};// console.log(name,age);//2.可以让一个函数返回多个返回值// function fun(){// return [1,2,3];// }// let arr = fun();// console.log(arr);//返回1~100能被3整除的数之和，以及这样的数有多少个。// function is3(){// let count = 0;// let sum = 0;// for(let i=1; i<100; i++){// if(i%3==0){// sum += i;// count++;// }// }// return [count,sum];// }// console.log(is3()[0],is3()[1]);//3.两个数的交换let x = 123;let y = 456;[x,y] = [y,x];console.log(x,y);
</script>
11 跟随鼠标弹出框
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}#fa{width: 1000px;height: 500px;background:teal;margin: 0 auto;}li{list-style: none;line-height: 120px;text-decoration:underline;color: white;width: 200px;}#none{width: 200px;height: 200px;background: #808080;display: none;position: absolute;}</style></head><body><div id="fa"><div id="none">弹出框</div><ul><li>个人信息AAA</li><li>个人信息BBB</li><li>个人信息CCC</li><li>个人信息DDD</li></ul></div><script>var liList=document.querySelectorAll("ul li");var div=document.getElementById("none");for(var i=0;i<liList.length;i++){liList[i].onclick=function(event){div.style.display="block";div.style.left=event.pageX + "px";div.style.top=event.pageY + "px";event.stopPropagation()return false;}}window.onclick=function(){div.style.display="none";}</script></body>
</html>12 游戏下拉菜单
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;}body{background: #23384e;}#fa{width: 440px;height: 230px;border: 1px solid gray;margin: 0 auto;}#fa>nav{width: 100%;height: 40px;background:#808080;position: relative;}#fa>nav>span,input,button{margin-left:40px;float: left;margin-top:10px;}button{outline: none;}button:hover{color: orange;}nav>input{background: #CCCCCC;outline: none;border: 1px solid #CCCCCC;border-radius: 10px;height:25px;color:white;text-indent: 10px;}#fa>nav>b{display: inline-block;border: 5px solid transparent;border-top: 5px solid white;position: absolute;left: 240px;top: 20px;}#fa>ul{width: 252px;height: 188px;background: #232323;border: 1px solid white;margin:0 auto;display: none;}#fa>ul>li{list-style: none;text-align: center;color: white;border-bottom: 1px dotted white;line-height: 30px;}#nne{width: 100px;height: 30px;background: white;color: #232323;position: absolute;bottom: 0px;left: 0px;display: none;}</style></head><body><div id="fa"><nav><span><img src="img/捕23获_03.png"/></span><input type="text" id="inpt" placeholder="请选择游戏名称"/><button id="bt" style="width:80px;height:30px;border-radius: 20px;">搜索</button><b></b></nav><ul id="UL"><li>魔兽世界(国服)</li><li>地下城与勇士</li><li>魔兽世界(台服)</li><li>热血江湖</li><li>大话西游</li><li>QQ幻想世界</li></ul></div><p id="nne">javascript;;</p><script>var UL=document.getElementById("UL");var inpt=document.getElementById("inpt");var liList=document.querySelectorAll("ul li");var btn=document.getElementById("bt");var nne=document.getElementById("nne")console.log(liList)inpt.onclick=function(e){e.stopPropagation();UL.style.display="block";}document.onclick=function(){UL.style.display="none";}for(var i=0;i<liList.length;i++){liList[i].onclick=function(){inpt.value=this.innerHTML;}}btn.onmouseenter=function(){nne.style.display="block";}btn.onmouseleave=function(){nne.style.display="none";}</script></body>
</html>13 放大镜
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;}#wrap{width: 500px;height: 600px;border:1px solid gray;/*margin: 20px auto;*/position: relative;}li{list-style: none;}ul{width: 100%;height:500px;background:gold;}ul li{list-style: none;display: none;}.focus{display: block;}ul img{width: 100%;height: 100%;}ol{width: 100%;height:100px;background:green;display: flex;justify-content: space-between;}ol>li{width:24%;height: 100%;}ol>li>img{width: 100%;height: 100%;}nav{width: 110px;height: 140px;position: absolute;background:black;top: 0;left: 0;opacity: 0.7;display: none;pointer-events:none;}#Obj{width: 500px;height: 500px;overflow:hidden;/*background: hotpink;*/border-radius:50%;position:absolute;top:30px;/*display: none;*/position: absolute;top: 20px;right:400px;}#Obj img{width: 2500px;height: 2500px;position: absolute;left: 0;top: 0;}</style></head><body><div id="wrap"><div id="fath"><ul><li class="focus"><img src="img/1.jpg"/></li><li><img src="img/2.jpg"/></li><li><img src="img/3.jpg"/></li><li><img src="img/4.jpg"/></li><li><img src="img/5.jpg"/></li></ul></div><ol><li data-i="0"><img src="img/1.jpg"/></li><li data-i="1"><img src="img/2.jpg"/></li><li data-i="2"><img src="img/3.jpg"/></li><li data-i="3"><img src="img/4.jpg"/></li><li data-i="4"><img src="img/5.jpg"/></li></ol><nav id="Onav"></nav></div><div id="Obj"><img src="img/1.jpg" id="big"/></div> <script>let wrapList=document.querySelectorAll("ol li");let Lilist=document.querySelectorAll("ul li");let index=0;let Onav=document.getElementById("Onav");let Obig=document.getElementById("big");let Obj=document.getElementById("Obj");function chage(){for(var i=0;i<Lilist.length;i++){Lilist[i].className="";}Lilist[index].className="focus";}for(var i=0;i<wrapList.length;i++){wrapList[i].onclick=function(){index=parseInt(this.getAttribute("data-i"));chage();//改变大图的src属性var Src=this.getElementsByTagName("img")[0].getAttribute("src");Obig.setAttribute("src",Src)}}fath.onmousemove=function(event){//取出Onav的left和top值(跟随放大镜)var lf=parseInt(Onav.style.left);var tp=parseInt(Onav.style.top)Onav.style.display="block";Obj.style.display="block";//跟随放大镜的边界判断if(event.pageX + 110>Onav.offsetWidth){Onav.style.left=event.pageX -110 + "px";Onav.style.top=event.pageY + "px";}else{Onav.style.left=event.pageX + "px";Onav.style.top=event.pageY + "px";}//大图跟随Obig.style.left= -(lf * 5) + "px";Obig.style.top= -(tp * 5) + "px";}//鼠标移出fath.onmouseleave=function(){Onav.style.display="none";Obj.style.display="none";}</script></body>
</html>14 时间差
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h2 id="time"></h2><script>function getTime(){// 目标时间var targetDate = new Date("2021-03-03 00:00:00")// 当前时间var nowDate = new Date()// 返回时间戳 1970-01-01 00:00:00var total = Math.floor((targetDate.getTime() - nowDate.getTime()) / 1000);var hours = Math.floor(total / 3600)var minutes = Math.floor((total - hours * 3600) / 60)var seconds = total % 60var hours = hours < 10 ? "0" + hours : hours;var minutes = minutes < 10 ? "0" + minutes : minutes;var seconds = seconds < 10 ? "0" + seconds : seconds;time.innerHTML = hours + ":" + minutes + ":" + seconds}getTime()setInterval(function(){getTime()},1000)</script></body>
</html>
15 倒计时代码
//倒计时代码let Ose_sp1=document.getElementById(".se_sp1");//天let Ose_sp2=document.getElementById(".se_sp2");//时let Ose_sp3=document.getElementById(".se_sp3");//分let Ose_sp4=document.getElementById(".se_sp4");//秒function getTime(){// 目标时间let targetDate = new Date("2021-05-20 00:00:00")// 当前时间let nowDate = new Date()// 返回时间戳 1970-01-01 00:00:00let total = Math.floor((targetDate.getTime() - nowDate.getTime())/ 1000);let hours = Math.floor(total / 3600);let day = Math.floor(hours / 24)let minutes = Math.floor((total - hours * 3600) / 60)let seconds = total % 60Ose_sp1.innerHTML=day;Ose_sp2.innerHTML=hours;Ose_sp3.innerHTML=minutes;Ose_sp4.innerHTML=seconds; Ose_sp1.innerHTML=Ose_sp1.innerHTML<10? "0" + Ose_sp1.innerHTML:Ose_sp1.innerHTML;Ose_sp2.innerHTML=Ose_sp2.innerHTML<10? "0" + Ose_sp2.innerHTML:Ose_sp2.innerHTML;Ose_sp3.innerHTML=Ose_sp3.innerHTML<10? "0" + Ose_sp3.innerHTML:Ose_sp3.innerHTML;Ose_sp4.innerHTML=Ose_sp4.innerHTML<10? "0" + Ose_sp4.innerHTML:Ose_sp4.innerHTML;}getTime()setInterval(function(){getTime()},1000)
16 购物车2
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>购物车</title><style type="text/css">*{margin: 0;padding-left: 0;}.shopchart {border: 1px solid #000;margin: 50px auto;border-right: none;text-align: center;width: 600px;}.shopchart th {border-right: 1px solid #000;line-height: 30px;background:greenyellow;}.shopchart td {border-top: 1px solid #000;border-right: 1px solid #000;line-height: 30px;}.shopchart input {width: 20px;text-align: center;}button {padding: 0 6px;}#totalcount,#totalprice{color: red;margin: 0 3px;}#add-item {width: 600px;margin: 40px auto;}#template {display: none;}</style></head><body><table cellspacing="0" cellpadding="2" id="shopchart" class="shopchart"><thead><tr><th>商品名称</th><th>数量</th><th>单价</th><th>小计</th><th>操作</th></tr></thead><tbody class="fa"><tr class="item"><td>烧煎饼</td><td><button class="sub">-</button><input type="text" value="0" readonly class="count" /><button class="add">+</button></td><td>单价:<span class="price">2</span>元</td><td>小计:<span class="countPrice">0</span>元</td><td>操作:<button class="delete">删除</button></td></tr><tr class="item"><td>鱿鱼</td><td><button class="sub">-</button><input type="text" value="0" readonly class="count" /><button class="add">+</button></td><td>单价:<span class="price">15</span>元</td><td>小计:<span class="countPrice">0</span>元</td><td>操作:<button class="delete">删除</button></td></tr><!--模板--><tr class="item" id="template"><td class="Oname"></td><td><button class="sub">-</button><input type="text" value="0" readonly class="count" /><button class="add">+</button></td><td>单价:<span class="price"></span>元</td><td>小计:<span class="countPrice">0</span>元</td><td>操作:<button class="delete">删除</button></td></tr><tr class="zhong"><td colspan="5">商品一共<span id="totalcount">0</span>件商品;共计花费<span id="totalprice">0</span>元</td></tr></tbody></table><!--添加表格--><table class="shopchart" cellspacing="0" cellpadding="2" ><thead><tr><th>商品名称</th><th>单价</th><th>操作</th></tr></thead><tbody><tr class="item"><td class="foodName">炒饼</td><td>单价:<span class="price">32</span>元</td><td>操作:<button class="addItem">添加</button></td></tr><tr class="item"><td class="foodName">孜然羊肉</td><td>单价:<span class="price">52</span>元</td><td>操作:<button class="addItem">添加</button></td></tr></tbody></table><script>function $(rese){ //获取元素名的函数let reselt=document.querySelectorAll(rese)if(reselt.length===1){return reselt[0];}return reselt;}let Otemplate=$("#template");let Ofa=$("table .fa");//参照物父级let Oname=$("#template .Oname");//插入商品名称let OfoodName=$(".item .foodName");//赋给插入商品let tbody = $("#shopchart tbody");tbody.onclick=function(event){let _this=event.target || event.srcElement;//加if(_this.className==="add"){let newTr=_this.parentNode.parentNode;let inpt=newTr.getElementsByClassName("count")[0];inpt.value=parseInt(inpt.value) +1;Oprice=newTr.getElementsByClassName("price")[0];//单价OcountPrice=newTr.getElementsByClassName("countPrice")[0];//小计OcountPrice.innerHTML=Number(Oprice.innerHTML * inpt.value);//总件数let Ototalcount=$("#totalcount")Ototalcount.innerHTML=Number(Ototalcount.innerHTML) + 1;//共花费let Ototalprice=$("#totalprice");let xoj=$("table .countPrice");let total=0;//存放小计之和xoj.forEach(function(item){total+=parseInt(item.innerHTML);})Ototalprice.innerHTML=total;}//减if(_this.className==="sub"){let newTr=_this.parentNode.parentNode;let inpt=newTr.getElementsByClassName("count")[0];inpt.value=Number(inpt.value)-1;inpt.value=inpt.value>=0?inpt.value:0;Oprice=newTr.getElementsByClassName("price")[0];//单价OcountPrice=newTr.getElementsByClassName("countPrice")[0];//小计OcountPrice.innerHTML=Number(inpt.value * Oprice.innerHTML);//总件数let Ototalcount=$("#totalcount");Ototalcount.innerHTML=Number(Ototalcount.innerHTML)-1;Ototalcount.innerHTML=Ototalcount.innerHTML>0?Ototalcount.innerHTML:0;//共花费Ototalprice=$("#totalprice");let xoj=$("table .countPrice");let total=0;xoj.forEach(function(item){total+=Number(item.innerHTML);})Ototalprice.innerHTML=total;}//删除if(_this.className==="delete"){if(confirm("确定删除？")){_this.parentNode.parentNode.remove()}}}//添加OaddItem=$(".item .addItem");OaddItem.forEach(function(item){item.onclick=function(){let clone=Otemplate.cloneNode(true);clone.id="";Ofa.insertBefore(clone,Otemplate);clone.getElementsByClassName("Oname")[0].innerHTML = this.parentNode.parentNode.getElementsByClassName("foodName")[0].innerHTML;clone.getElementsByClassName("price")[0].innerHTML = this.parentNode.parentNode.getElementsByClassName("price")[0].innerHTML;}})</script></body>
</html>17 low版放大镜
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>html,body{height:100%;}*{margin:0;padding:0;}li{list-style:none;}#itemList{padding-top:100px;margin:0 auto;overflow:hidden;width: 1780px;}#itemList li{width:170px;margin-right:50px;height:170px;float:left;border:1px solid #999;cursor:pointer;overflow:hidden;margin-bottom: 20px;}#itemList li img{transition: all .5s;}#itemList li:hover img{opacity:.7;transform: scale(1.05);}#big{width: 400px;height: 400px;border:1px solid #e3e3e3;position:absolute;top: 100px;display: none;box-sizing: border-box;pointer-events: none;}</style>
</head>
<body><ul id="itemList"><li><img src="img/shirt_1.jpg" alt=""></li><li><img src="img/shirt_1.jpg" alt=""></li><li><img src="img/shirt_2.jpg" alt=""></li><li><img src="img/shirt_2.jpg" alt=""></li><li><img src="img/shirt_1.jpg" alt=""></li><li><img src="img/shirt_2.jpg" alt=""></li><li><img src="img/shirt_3.jpg" alt=""></li><li><img src="img/shirt_4.jpg" alt=""></li><li><img src="img/shirt_1.jpg" alt=""></li><li><img src="img/shirt_2.jpg" alt=""></li><li><img src="img/shirt_3.jpg" alt=""></li><li><img src="img/shirt_4.jpg" alt=""></li><li><img src="img/shirt_1.jpg" alt=""></li><li><img src="img/shirt_2.jpg" alt=""></li><li><img src="img/shirt_3.jpg" alt=""></li><li><img src="img/shirt_4.jpg" alt=""></li><li><img src="img/shirt_1.jpg" alt=""></li><li><img src="img/shirt_2.jpg" alt=""></li><li><img src="img/shirt_3.jpg" alt=""></li><li><img src="img/shirt_4.jpg" alt=""></li><li><img src="img/shirt_1.jpg" alt=""></li><li><img src="img/shirt_2.jpg" alt=""></li><li><img src="img/shirt_3.jpg" alt=""></li><li><img src="img/shirt_4.jpg" alt=""></li></ul><img src="img/shirt_1_big.jpg" id="big" alt=""><script>var liList = document.querySelectorAll("#itemList li");var big = document.getElementById("big");// 获取整个页面的宽度var pageWidth = document.body.clientWidth;var pageHeight = document.body.clientHeight;for(var i=0;i<liList.length;i++){liList[i].onmouseenter=function(){big.style.display="block";var SRC=this.getElementsByTagName("img")[0].getAttribute("src");big.setAttribute("src",SRC)}liList[i].onmouseleave=function(){big.style.display="none";}liList[i].onmousemove=function(event){if(event.pageX + 400>pageWidth){big.style.left=event.pageX - 400 + "px";big.style.top=event.pageY + "px";}else{big.style.left=event.pageX + "px";big.style.top=event.pageY + "px";}}}</script>
</body>
</html>
18 Todolist
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;}#fa{width:100%;/*height: 252px;*/background: #cdcdcd;}#fa>header{width: 100%;height: 72px;background: #313131;}.area{width: 926px;/*height: 100%;*//*background: green;*/margin: 0 auto;position: relative;}.area input{width:558px;height: 42px;float: right;background: #fdfefe;border-radius:15px;outline: none;border: 1px solid #fdfefe;margin-top: 15px;text-indent: 20px;font-size: 18px;/*color:#dedfe1;*/font-weight: 500;}.aeras{width: 926px;/*height:128px;*//*background: deeppink;*/margin:0 auto;}.aeras p{font-size: 32px;color:#000000;line-height:60px;position: relative;font-weight:bold;}.aeras p span{display: inline-block;width: 24px;height: 28px;border-radius: 50%;background: #e6e6fb;text-align: center;line-height: 28px;position: absolute;top: 20px;right: 20px;font-size:16px;}h2{width: 154px;height: 100%;text-align: center;line-height: 72px;color: #dedfe1;float: left;font-size: 26px;}#template{width: 558px;height: 42px;background: white;margin-top: 5px;border-radius:15px;margin-left: 230px;position: relative;line-height: 42px;text-indent: 30px;border-left: 5px solid green;}.nne{display: none;}#template>input{margin-left: 10px;/*position: relative;bottom: 15px;*/}#template>span{display: inline-block;width:460px;height: 42px;border-radius: 10px;background: white;margin-left: 20px;}#template>button{display: inline-block;width: 15px;height: 15px;border-radius:50%;outline: none;border: 1px solid #CCCCCC;position: absolute;right: 20px;top: 20px;}</style></head><body><div id="fa"><header><div class="area"><h2>ToDolist</h2><input type="text" id="inpt" placeholder="添加ToDo"/></div></header><div class="aeras"><p id="p1">正在进行<span class="add">0</span></p><ul id="done"></ul><p id="p2">已经完成<span class="sub">0</span></p><ul id="dtwo"></ul><!--//模板--><div id="template" class="nne"><input type="checkbox" id="click" class="txt"/><span id="vle"></span><button id="btn" class="delete"></button></div></div></div><script>function $(sele){//获取元素函数let reselt=document.querySelectorAll(sele);if(reselt.length===1){return reselt[0];}return reselt;}let inpt=$("#inpt");//输入框let temlete=$("#template");//模板let done=$("#done");//插入元素参照物,进行let dtwo=$("#dtwo");//插入元素参照物，完成let Oadd=$(".aeras .add");//进行的innerhtmllet Osub=$(".aeras .sub");//完成的innerhtmllet ofa=$("#fa");let Ovle=$("#vle");inpt.onkeydown=function(event){if(event.keyCode===13){Ovle.innerHTML=inpt.value;let newTr=temlete.cloneNode(true);//克隆模板done.appendChild(newTr);newTr.className="";Oadd.innerHTML=parseInt(Oadd.innerHTML) + 1;}}//点击事件//进行done.onclick=function(event){let _this=event.target || event.srcElement;if(_this.className==="txt"){let newTr=temlete.cloneNode(true);//克隆模板dtwo.appendChild(newTr);newTr.className="";Oadd.innerHTML=parseInt(Oadd.innerHTML) - 1;Oadd.innerHTML=Oadd.innerHTML>=0?Oadd.innerHTML:0;Osub.innerHTML=parseInt(Osub.innerHTML) + 1;_this.parentNode.remove()}if(_this.className==="delete"){_this.parentNode.remove();Oadd.innerHTML=parseInt(Oadd.innerHTML) - 1;Oadd.innerHTML=Oadd.innerHTML>=0?Oadd.innerHTML:0;}}
// 完成dtwo.onclick=function(event){let _this=event.target || event.srcElement;if(_this.className==="txt"){let newTr=temlete.cloneNode(true);//克隆模板done.appendChild(newTr);newTr.className="";_this.parentNode.remove();Osub.innerHTML=parseInt(Osub.innerHTML) - 1;Osub.innerHTML=Osub.innerHTML>=0?Osub.innerHTML:0;Oadd.innerHTML=parseInt(Oadd.innerHTML) + 1;}if(_this.className==="delete"){_this.parentNode.remove();Osub.innerHTML=parseInt(Osub.innerHTML) - 1;Osub.innerHTML=Osub.innerHTML>=0?Osub.innerHTML:0;}}</script></body>
</html>
19 京东秒杀
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/公共代码.css"/><link rel="stylesheet" type="text/css" href="css/index.css"/></head><body><div id="box"><dl class="one"><dt>京东秒杀<p>16:00点场 倒计时</p></dt><dd id="hours"><span id="time1">00</span><em>:</em><span id="time2">00</span><em>:</em><span id="time3">00</span></dd></dl><dl><dt><img src="img/789fb382da962ccd.jpg.webp"/></dt><dd><h3>第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机</h3><p><span>￥128:00</span><b>￥189</b></p></dd></dl><dl><dt><img src="img/a9dc6b696b32fa26.jpg.webp"/></dt><dd><h3>第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机</h3><p><span>￥128:00</span><b>￥189</b></p></dd></dl><dl><dt><img src="img/bfa9faf64f292907.jpg.webp"/></dt><dd><h3>第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机</h3><p><span>￥128:00</span><b>￥189</b></p></dd></dl><dl><dt><img src="img/cd6ec54426d6c19a.jpg.webp"/></dt><dd><h3>第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机</h3><p><span>￥128:00</span><b>￥189</b></p></dd></dl><dl><dt><img src="img/df7c180eb0966970.jpg.webp"/></dt><dd><h3>第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机第一卫 苹果12maxpro手机</h3><p><span>￥128:00</span><b>￥189</b></p></dd></dl></div><script>function getTime(){// 目标时间var targetDate = new Date("2021-03-04 00:00:00")// 当前时间var nowDate = new Date()// 返回时间戳 1970-01-01 00:00:00var total = Math.floor((targetDate.getTime() - nowDate.getTime()) / 1000);var hours = Math.floor(total / 3600)var minutes = Math.floor((total - hours * 3600) / 60)var seconds = total % 60var hours = hours < 10 ? "0" + hours : hours;var minutes = minutes < 10 ? "0" + minutes : minutes;var seconds = seconds < 10 ? "0" + seconds : seconds;time1.innerHTML = hours;time2.innerHTML = minutes;time3.innerHTML=seconds; }getTime()setInterval(function(){getTime()},1000)</script></body>
</html>20 航班表
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><style>*{margin:0;padding:0;}.hide{display:none;}.edit span{cursor:pointer;}.mask{position:absolute;width:100%;background-color:rgba(0,0,0,0.3);top:0;left:0;}.popup{background-color:#fff;padding:10px;display:none;position:absolute;width:500px;height:200px;z-index: 2;left:35%;top:50%;}.killMargin{overflow:hidden;}</style>
</head>
<body><div class="killMargin"><div class="right"><h3>XI'AN XIANYANG INT'L AIRPORT (陕西 西安 CN) ZLXY / XIY 离港 </h3><hr><table class="table editable"><thead><tr><th>标识符</th><th>机型</th><th>目的地</th><th>出发</th><th>到达</th><th>操作</th></tr></thead><tbody><tr><td>AAR348</td><td>A321</td><td>Incheon Int'l (ICN)</td><td>15:10 CST</td><td>18:14 KST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>FZA6695</td><td>B738</td><td>Quanzhou Jinjiang (JJN)</td><td>15:05 CST</td><td>17:45 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CHH7509</td><td>B738</td><td>Fuzhou Changle Int'l (FOC)</td><td> 15:00 CST</td><td>17:28 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>OKA2885</td><td>B738</td><td>Urumqi Diwopu Int'l (URC)</td><td> 14:54 CST</td><td>18:29 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2321</td><td>A319</td><td>Karamay (KRY)</td><td> 14:51 CST</td><td>18:26 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr><td>CES2259</td><td>A320</td><td>Lüliang (LLV)</td><td> 14:44 CST</td><td>15:31 CST</td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr><tr id="template" class="hide"><td></td><td></td><td></td><td></td><td></td><td class="edit"><button class="insertData btn btn-primary">插入</button><span class="deleat btn btn-danger">删除</span></td></tr></tbody></table></div><div class="popup"><button class="btn btn-primary" id="confirm">确定</button><button id="cancel" class="btn">取消</button></div></div><script>var deletebuttonList=document.querySelectorAll(".deleat");var chabuttonList=document.querySelectorAll(".insertData");var template=document.getElementById("template");for(var i=0;i<deletebuttonList.length;i++){deletebuttonList[i].onclick=function(){//绑定事件var Del=this.parentNode.parentNode;//找到要删除的元素if(confirm("确定删除吗")){Del.remove();//删除}}}for(var i=0;i<chabuttonList.length;i++){chabuttonList[i].onclick=function(){//绑定事件newTr=template.cloneNode(true);//克隆一个 要插入的元素this.parentNode.parentNode.parentNode.insertBefore(newTr,this.parentNode.parentNode.nextElementSibling);//找到要插入的地方newTr.className="";//将克隆元素的class名去掉newTr.setAttribute("id","");//将克隆元素的id名去掉}}//可编辑var tdList=document.querySelectorAll(".editable td");for(var i=0;i<tdList.length;i++){tdList[i].onclick=function(){if(this.className==="edit"){return;}var Input=document.createElement("input");Input.value=this.innerHTML;this.innerHTML="";this.appendChild(Input);Input.focus();Input.onblur=function(){this.parentNode.innerHTML=this.value;}}}以下是事件委托的写法事件委托版 事件委托版 事件委托版事件委托版代码如下$(".editable tbody").onclick = function(event){var _this = event.target;// 删除if(_this.className === "deleat btn btn-danger"){if(confirm("真删啊？")){_this.parentNode.parentNode.remove();}}// 插入if(_this.className === "insertData btn btn-primary"){var newItem = $("#template").cloneNode(true);newItem.id = ""newItem.className = "";this.insertBefore(newItem,_this.parentNode.parentNode.nextElementSibling)}// 编辑if(_this.className === ""){var txt = _this.innerHTML;_this.innerHTML = "";var input = document.createElement("input")input.value = txt;_this.appendChild(input)input.focus();input.onblur = function(){_this.innerHTML = this.value;}input.onkeydown = function(event){if(event.keyCode === 13){_this.innerHTML = this.value;}}}}</script>23 淡入淡出轮播图
//轮播图let Lilist=$("#ul li");let olList=$("#ol li");let leftimg=$("#leftimg");let rightimg=$("#rightimg");let index=0;function chage(){for(let i=0;i<Lilist.length;i++){Lilist[i].className="";Lilist[i].style.opacity=0;olList[i].className="";}Lilist[index].className="focus";olList[index].className="show";let time=setInterval(function(){let o=parseFloat(Lilist[index].style.opacity);if(o>=1){clearInterval(time);return;}Lilist[index].style.opacity=o + 0.03;},16)}leftimg.click(function(){if(index!==Lilist.length-1){index++;}else{index=0;}chage();})rightimg.click(function(){if(index!==0){index--;}else{index=Lilist.length-1;}chage();})for(let i=0;i<olList.length;i++){olList[i].onclick=function(){index=parseInt(this.getAttribute("data-i"));chage()}}let times=setInterval(function(){leftimg.click();},3000)banner.onmouseenter=function(){clearInterval(times);}banner.onmouseleave=function(){times=setInterval(function(){leftimg.click();},3000)}
2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#banner{width: 800px;height: 400px;/* background-color: aqua; */margin: 0 auto;position: relative;}li{list-style: none;}#banner ul{width: 100%;height: 100%;/* background-color: yellow; */}#banner ul li{width: 100%;height: 100%;display: none}#banner ul li img{display: block;width: 100%;height: 100%;}#banner ul .focus{display:block;}ol{width: 100px;height: 20px;/* background-color: red; */position: absolute;bottom: 10px;left: 50%;}ol li{width: 20px;height: 20px;background-color: hotpink;opacity: 0.5;float: left;margin-left: 3px;border-radius: 50%;}#leftimg{width: 30px;height: 30px;background-color: indianred;position: absolute;left: 0px;top: 50%;}#rightimg{width: 30px;height: 30px;background-color: indianred;position: absolute;right: 0px;top: 50%;}ol .show{opacity: 1;background-color: red;}</style>
</head>
<body><div id="banner"><ul id="ul"><li class="focus"><img src="./img/1.jpg" alt=""></li><li><img src="./img/2.jpg" alt=""></li><li><img src="./img/3.jpg" alt=""></li><li><img src="./img/4.jpg" alt=""></li></ul><ol id="ol"><li class="show" data-i="0"></li><li data-i="1"></li><li data-i="2"></li><li data-i="3"></li></ol><div id="leftimg"></div><div id="rightimg"></div></div>
</body>
</html><script>function $(sele){var reselt=document.querySelectorAll(sele);if(reselt.length===1){return reselt[0];}return reselt;
}//轮播图//轮播图let Lilist=$("#ul li");let olList=$("#ol li");let leftimg=$("#leftimg");let rightimg=$("#rightimg");let index=0;function chage(){for(let i=0;i<Lilist.length;i++){Lilist[i].className="";olList[i].className="";Lilist[i].style.opacity=0;}Lilist[index].className="focus";olList[index].className="show";let time=setInterval(function(){let o=parseFloat(Lilist[index].style.opacity);if(0>=1){clearInterval(time);return;}Lilist[index].style.opacity=o+0.03;},16)}for(let i=0;i<olList.length;i++){olList[i].onclick=function(){index=parseInt(this.getAttribute("data-i"))chage()}}leftimg.onclick=function(){if(index!=Lilist.length-1){index++;}else{index=0;}chage()}rightimg.onclick=function(){if(index!=0){index--;}else{index=Lilist.length-1;}chage()}let times=setInterval(function(){leftimg.click()},1000)banner.onmouseenter=function(){clearInterval(times);}banner.onmouseleave=function(){times=setInterval(function(){leftimg.click();},1000)}</script>
22 滑动轮播图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}li{list-style:none;}.wrap{width:1000px;margin:100px auto;position:relative;overflow:hidden;}#next,#prev{position:absolute;cursor:pointer;top:45%;opacity:.7;transition: all .5s;}#next:hover,#prev:hover{transform:scale(1.1);opacity:1;}#next{right:15px;}#prev{left:15px;}#dotWrap{position:absolute;bottom:20px;left:50%;transform:translate(-50%,0);}#dotWrap li{background-color:#fff;width: 16px;height:16px;border-radius:50%;cursor:pointer;float:left;margin-right:10px;}#dotWrap .focus{background-color:#f99;}.wrap ul{width:99999px;overflow:hidden;}.wrap li{float:left;}</style>
</head>
<body><div class="wrap"><ul style="margin-left:0;"><li><img src="data:images/1.jpg" alt=""></li><li><img src="data:images/2.jpg" alt=""></li><li><img src="data:images/3.jpg" alt=""></li><li><img src="data:images/4.jpg" alt=""></li><li><img src="data:images/5.jpg" alt=""></li><li><img src="data:images/6.jpg" alt=""></li><li><img src="data:images/timg (2).jpg" alt=""></li><li><img src="data:images/timg (3).jpg" alt=""></li><li><img src="data:images/timg (4).jpg" alt=""></li><li><img src="data:images/timg (5).jpg" alt=""></li><li><img src="data:images/timg (6).jpg" alt=""></li><li><img src="data:images/timg (7).jpg" alt=""></li></ul><img src="data:images/l.png" id="prev" alt=""><img src="data:images/r.png" id="next" alt=""><ol id="dotWrap"></ol></div><script src="machine.js"></script><script>let liList = $(".wrap ul li");let dotWrap = $("#dotWrap");let ul = $(".wrap ul");let next = $("#next");let prev = $("#prev");let n = 0;// 动态生成小圆点for(let i = 0; i < liList.length;i++){// 插入了一个小圆点let dot = document.createElement("li");dotWrap.appendChild(dot)if(i === 0){dot.className = "focus";}dot.setAttribute("data-index",i);dot.onclick = function(){let ago = n;let now = parseInt(this.getAttribute("data-index"));n = now;if(ago > now){move("left",ago-now)}if(ago < now){move("right",now-ago) }}}let dotList = $("#dotWrap li");function move(dir="right",count=1,speed = 20){if(dir === "right"){let move = setInterval(()=>{let ml = parseInt(ul.style.marginLeft);if(ml <= -(n * 1000)){clearInterval(move)ul.style.marginLeft = -(n * 1000) + "px";return;}ul.style.marginLeft = ml - speed * count + "px";},16)}if(dir === "left"){let move = setInterval(()=>{let ml = parseInt(ul.style.marginLeft);if(ml >= -(n * 1000)){clearInterval(move)ul.style.marginLeft = -(n * 1000) + "px";return;}ul.style.marginLeft = ml + speed * count + "px";},16)}upDataDotState()}function upDataDotState(){for(var i = 0; i < dotList.length;i++){dotList[i].className = ""}dotList[n].className = "focus";}next.onclick = function(){if(n !== liList.length - 1){n++;move()}else{n = 0;move("left",liList.length - 1)}}prev.onclick = function(){if(n !== 0){n--;move("left")}else{n = liList.length - 1move("right",liList.length - 1)}}</script>
</body>
</html>
24 五星好评
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;width: 27px;height: 28px;float: left;background-image: url(./IMG_0084.GIF);}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li></ul></body></html>
<script>//前面都要亮window.onload = function() {let alllis = document.getElementsByTagName("li");// console.log(alllis)for (let i = 0; i < alllis.length; i++) {alllis[i].index = i //存储到变量中，避免和之前的i发生冲突//其实在一定程度上来说，他就是给了内层循环一个结束的标志alllis[i].onmousemove = function() { //是要鼠标移动for (let j = 0; j < alllis.length; j++) { //控制是咧 if (j <= this.index) { //滑到的一个位置alllis[j].style.backgroundPositionY = "27px"} else {alllis[j].style.backgroundPositionY = "0px"}}}alllis[i].onclick=function () {for (let i = 0; i < alllis.length; i++) {alllis[i].onmousemove=null}}}}// var oLis = document.querySelectorAll("li");// for (var i = 0; i < oLis.length; i++) {// oLis[i].index = i;// oLis[i].onmousemove = function() {// for (var j = 0; j < oLis.length; j++) {// if (j <= this.index) {// oLis[j].style.backgroundPositionY = "28px";// } else {// oLis[j].style.backgroundPositionY = 0;// }// }// }// oLis[i].onclick = function() {// for (var j = 0; j < oLis.length; j++) {// oLis[j].onmousemove = null;// }// }// }
</script>25 ,ES6方法
1,filter
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>
// var arr=[1,2,12,6,8,10];
// arr.filter(function(a,b,c){// console.log(a)
// }) 类似于map函数，不同如下function fn(array){ //写一个函数，类似于定义一个数组var reselt=array.filter(function(a,b,c){ //使用filter方法，并赋值给reselt,类似于map方法，只是返回值的条件不一样return a % 2===0 //返回值条件})return reselt; //返回reselt,因为值赋给了它，所以返回值要围绕它进行计算,返回值都以数组的形式返回}console.log(fn([1,2,4,6,3,7,9,8]))</script></body>
</html>2 map
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>//map 类似于forEach 但区别是它有返回值，返回值为一个数组。长度与被循坏数组的长度一致//但这个数组里面的内容取决于return的返回值，具体操作如下：：
// var arr=[1,2,3,4,5];
// arr.map(function(num1,num2,num3){ //三个参数的意义与forEach三个参数的相同
console.log(num1) //将数组里面的元素一一枚举出来
console.log(num2) //输出元素的下标
console.log(num3) //输出数组
// }) 有返回值 如下
// var arr=[1,2,3,5,7,8]
// var a=arr.map(function(n1,n2,n3){ //调用返回值时同样需要将他赋值给一个变量
// return n1+1; //相当于给map元素中的每一个元素都加1,返回数组长度不变,
// //值取决于return返回值
// })
// console.log(a)</script></body>
</html>3 forEach
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><script>//forEach 另一种枚举数组的方法
// var arr=[1,2,3,4,5];
// arr.forEach(function(a,b,c){ //枚举数组的另一种方法，a表示数组里面的元素，b表示元素的下标，c表示数组本身
console.log(a); //将数组里面的元素一一枚举出来，类似于for循坏的"array[i]".
console.log(b); //数组元素的下标
console.log(c);//数组本身，输出5次
// }) //所有返回值都为undefined,如下：
// var arr=[1,2,3,4,5];
// a=arr.forEach(function(a,b,c){ //检查返回值时须将他赋值给一个变量
// return b; //返回给变量a,所有返回值都为undefined
// })
// console.log(a) </script></body>
</html>4 reduce
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>
// var arr=[1,2,3,4,5,6]
// arr.reduce(function(a,b){ //只有两个参数
console.log(a); //a第一次循坏时代表数组中的第一个元素，后面循坏时如果没有return返回值，都为undefined
console.log(b);//b第一次循坏时代表数组的第二个元素，后面循坏以此类推为3，4，5，6……
// })
// 返回值var arr=[1,2,3,4,5,6];a=arr.reduce(function(a,b){ //看返回值时需要将他赋值给一个变量return a + b; // 这时a的返回值为每一次a+b累加之和，第一次为1，第二次为3，第三次为6……// b的返回值仍然为从第二个开始，以此类推}) //使用场景，累加或累减运算、、、、】】 console.log(a);</script></body>
</html>26 贪吃蛇
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#game{width: 600px;height: 600px;border:1px solid #999;margin:100px auto;position:relative;}#game > div{width: 20px;height: 20px;position:absolute;background-color:#f99;}#game span{width: 20px;height: 20px;background-color:#f99;border-radius:50%;position:absolute;display: block;}</style>
</head>
<body><div id="game"><span id="food"></span></div><script src="machine.js"></script><script>var gameInfo = {timer:0,width:600,map:document.getElementById("game"),start:function(){snake.init()food.init()gameInfo.timer = setInterval(function(){snake.move()},100)},over:function(){clearInterval(gameInfo.timer);alert("死");}}var snake = {width:20,bodyList:[],dir:"right",init:function(){for(var i = 0; i < 20;i++){var newBody = document.createElement("div");newBody.style.top = 0;newBody.style.left = i * snake.width + "px";newBody.style.backgroundColor = getRandomColor()gameInfo.map.appendChild(newBody)snake.bodyList.push(newBody)}},move:function(){var foot = snake.bodyList[0];var head = snake.bodyList[snake.bodyList.length - 1];snake.bodyList.push(snake.bodyList[0])snake.bodyList.shift()// 往右走if(snake.dir === "right"){foot.style.top = head.style.top;foot.style.left = parseInt(head.style.left) + snake.width + "px"}// 往左走if(snake.dir === "left"){foot.style.top = head.style.top;foot.style.left = parseInt(head.style.left) - snake.width + "px"}// 往上走if(snake.dir === "top"){foot.style.top = parseInt(head.style.top) - snake.width + "px"foot.style.left = head.style.left;}// 往下走if(snake.dir === "bottom"){foot.style.top = parseInt(head.style.top) + snake.width + "px"foot.style.left = head.style.left;}// 得分碰撞检测var HEAD = snake.bodyList[snake.bodyList.length - 1];var HEADPoint = {x:parseInt(HEAD.style.left),y:parseInt(HEAD.style.top)}if(HEADPoint.x === food.point.x && HEADPoint.y === food.point.y){// 重新生成食物food.init()// 增加一节蛇身snake.addBody()}// 边缘死亡碰撞检测if(HEADPoint.x < 0 || HEADPoint.y < 0 || HEADPoint.x > gameInfo.width - snake.width || HEADPoint.y > gameInfo.width - snake.width){gameInfo.over();}// 自身死亡碰撞检测for(var i = 0; i < snake.bodyList.length - 1;i++){if(HEADPoint.x === parseInt(snake.bodyList[i].style.left) && HEADPoint.y === parseInt(snake.bodyList[i].style.top)){gameInfo.over();}}},addBody:function(){var newBody = document.createElement("div");newBody.style.top = snake.bodyList[0].style.top;newBody.style.left = snake.bodyList[0].style.left;newBody.style.backgroundColor = getRandomColor()gameInfo.map.appendChild(newBody)snake.bodyList.unshift(newBody)}}var food = {el:document.getElementById("food"),// 食物的坐标值point:{x:0,y:0},init:function(){food.point.x = Math.floor(Math.random() * ((gameInfo.width - snake.width) / 20)) * 20food.point.y = Math.floor(Math.random() * ((gameInfo.width - snake.width) / 20)) * 20food.el.style.left = food.point.x + "px";food.el.style.top = food.point.y + "px";}}window.onkeydown = function(event){if(event.keyCode === 38 && snake.dir !== "bottom"){snake.dir = "top"}if(event.keyCode === 40 && snake.dir !== "top"){snake.dir = "bottom"}if(event.keyCode === 37 && snake.dir !== "right"){snake.dir = "left"}if(event.keyCode === 39 && snake.dir !== "left"){snake.dir = "right"}}gameInfo.start()</script>
</body>
</html>
贪吃蛇中需要引入的machine.js如下：
function $(selector){var result = document.querySelectorAll(selector);if(result.length === 1){return result[0]}return result;
}
function bindEvent(nodeList,eventType,fn){for(var i = 0; i < nodeList.length;i++){nodeList[i][eventType] = fn}
}
function getRandomColor(){var arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];var result = "#";for(var i = 0; i < 6;i++){var index = Math.floor(Math.random() * 16)result = result + arr[index];}return result;
}
26 自定义菜单
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul,li {list-style: none;}ul {width: 100px;height: 120px;background-color: #eee;position: absolute;top: 0;left: 0;display: none;padding: 2px 0;}li {float: left;width: 100px;height: 40px;text-align: center;line-height: 40px;border: 1px solid #999;box-sizing: border-box;}li:hover {background-color: deepskyblue;color: #fff;}</style><script>window.onload = function() {var ul = document.getElementsByTagName('ul')[0]window.oncontextmenu = function(e) {// window.preventDefault()ul.style.left = e.clientX + 'px'ul.style.top = e.clientY + 'px'ul.style.display = 'block'return false}window.onclick = function() {ul.style.display = 'none'}}</script>
</head><body><ul><li>复制</li><li>粘贴</li><li>剪切</li></ul>
</body></html>
正则
1.定义：又名规则表达式，由自己制定规则，然后用自己制定好的规则去检测字符串是否符合规则，返回布尔类型
2.语法格式：
var reg = / \d+/
var str1 = '123'
var str2 = 'abc'
console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // false
reg就是自己自己制定的规则，用自己制定的规则打点test,(reg.test(str)),判断括号里面的字符串是否符合规则
创建一个正则表达式：想制定 “规则”，必须要按照人家要求的方式来制定
把一些字母和符号写在 / / 中间，叫做正则表达式，比如 /abcdefg/
创建正则表达式有两个方式 字面量 和 构造函数创建
字面量：var reg = /abcdefg/
构造函数：var reg = new RegExp(‘abcdefg’)
使用构造函数方式创建的和字面量创建的，得到的结果一样
元字符： （如下）
. ： 匹配非换行的任意字符
\ ： 转译符号，把有意义的 符号 转换成没有意义的 字符， 把
没有意义的 字符 转换成有意义的 符号
\s ： 匹配空白字符（空格/制表符/…）
\S ： 匹配非空白字符
\d ： 匹配数字
\D ： 匹配非数字
\w ： 匹配数字字母下划线
\W ： 匹配非数字字母下划线
** 注意：元字符可以用于制定规则**
**元字符规则案例：
var reg = / \s /**
var str = 'a b'
var str2 = 'ab'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // false
var reg = /\d/
var str = 'abc1'
var str2 = 'abc'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // false
var reg = /\w/
var str = 'a1'
var str2 = '#@$'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // false
限定符
星号(*): 前一个内容重复至少 0 次，也就是可以出现 0 ～ 正无穷 次
加号(+) ： 前一个内容重复至少 1 次，也就是可以出现 1 ～ 正无穷 次
? ： 前一个内容重复 0 或者 1 次，也就是可以出现 0 ～ 1 次
{n} ： 前一个内容重复 n 次，也就是必须出现 n 次
{n,} ： 前一个内容至少出现 n 次，也就是出现 n ～ 正无穷 次
{n,m} ： 前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次
限定符是配合元字符使用的
边界符
^ ： 表示开头
$ ： 表示结尾
边界符是限定字符串的开始和结束的
// 下面表示从开头到结尾只能有数字，并且出现 3 ～ 5 次
var reg = /^\d{3,5}$/
var str = 'abc'
var str2 = 'abc123'
var str3 = '1'
var str4 = '1234567'
var str5 = '123'
var str6 = '12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // false
console.log(reg.test(str4)) // false
console.log(reg.test(str5)) // true
console.log(reg.test(str6)) // true
特殊字符
() ： 限定一组元素
[] ： 字符集合，表示写在 [] 里面的任意一个都行
[^] ： 反字符集合，表示写在 [^] 里面之外的任意一个都行
- ： 范围，比如 a-z 表示从字母 a 到字母 z 都可以
| ： 或，正则里面的或 a|b 表示字母 a 或者 b 都可以
标识符
i ： 表示忽略大小写
这个 i 是写在正则的最后面的
/ \w/ i
就是在正则匹配的时候不去区分大小写
g ： 表示全局匹配
这个 g 是写在正则的最后面的
/ \w/ g
就是全局匹配字母数字下划线
正则表达式的方法
test
test 是用来检测字符串是否符合我们正则的标准语法： 正则.test(字符串)返回值： booleanconsole.log( / \d+/.test('123')) // true
console.log(/ \d+/.test('abc')) // false
exec
exec 是把字符串中符合条件的内容捕获出来语法： 正则.exec(字符串)返回值： 把字符串中符合正则要求的第一项以及一些其他信息，以数组的形式返回var reg = / \d{3}/
var str = 'hello123world456你好789'
var res = reg.exec(str)
console.log(res)
** 数组第 0 项就是匹配到的字符串内容
index 属性表示从字符串的索引几开始是匹配的到字符串
案例
邮箱案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>input[type="text"]{outline:none;}.error{border:1px solid #ff0000;}.success{border:1px solid green;}</style>
</head>
<body><input type="text" id="email" placeholder="请输入您的邮箱" class=""><input type="text" id="phone" placeholder="请输入您的手机号" class=""><input type="text" id="idNumber" placeholder="请输入身份证号" class=""><script>email.onkeyup = function(){// 邮箱的正则// 1位或多位的数字字母@1位或多位的数字字母.字母2位或多位var emailReg = /^\w{1,}@[0-9A-z]+\.[A-z]{2,}$/if(emailReg.test(this.value)){this.className = "success";}else{this.className = "error";}}phone.onkeyup = function(){var phoneReg = /^1[3-9]\d{9}$/if(phoneReg.test(this.value)){this.className = "success";}else{this.className = "error";}}idNumber.onkeyup = function(){var idReg = /^\d{17}[xX0-9]$/if(idReg.test(this.value)){this.className = "success";}else{this.className = "error";}}</script>
</body>
</html>
表单验证
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>综合表单验证</title><style type="text/css">#tin {margin-left: 10px;font-size: 12px;}#tip1 {width: 130px;height: 18px;/*background:#ddd;*/border-radius: 3px;margin-left: 10px;font-size: 14px;font-weight: bold;text-align: center;display: inline-block;}span {font-size: 14px;}.pass {border: 1px solid green;box-shadow: 0 0 10px green;}.error {border: 1px solid red;box-shadow: 0 0 10px red;}input{outline: none;}</style>
</head><body><table width="449" height="530" border="1" align='center'><tr><td colspan="2" align="center">用户名注册</td></tr><tr><td width="116" align="right">姓名：</td><td width="323"><label><input type="text" name="" id="username"/></label> <span id="tin"></span></td></tr><tr><td align="right">年龄：</td><td><label><input type="text" name="" id="age" /></label> <span id="tia"></span></td></tr><tr><td align="right">密码：</td><td><label><input type="password" name="" id="pwd" /></label> <span id="tip1"></span></td></tr><tr><td align="right">确认密码：</td><td><label><input type="password" name="" id="qpwd" /></label><span id="tip2"></span></td></tr><tr><td align="right">手机：</td><td><label><input type="text" name="" id="tel" /></label> <span id="tit"></span></td></tr><tr><td align="right">QQ:</td><td><label><input type="text" name="" id="qq" /></label><span id="tiq"></span></td></tr><tr><td align="right">邮箱：</td><td><label><input type="text" name="" id="email" /></label><span id="tiem"></span></td></td></tr><tr><td align="right">邮编：</td><td><label><input type="text" name="" id="eml" /></label><span id="tiec"></span></td></td></tr><tr><td align="right">身份证：</td><td><label><input type="text" name="" id="sname" /></label><span id="tisn"></span></td></tr><tr><td align="right">验证码：</td><td><label><input type="text" id="yCode" /><span style="width:80px;height: 20px;border: 1px solid red;display: inline-block; text-align: center;"id="sCode"></span><a href="#" id="shuaxin">看不清</a></label></td></tr><tr><td height="36" colspan="2" align="center"><label><!-- <input type="submit" value="注册" /> --></label></td></tr><tr><td colspan="2" align="center"><button id="btn">提交注册</button></td></tr></table>
</body></html><script>function $(sele){var reselt=document.querySelectorAll(sele);if(reselt.length===1){return reselt[0];}return reselt;}//姓名$("#username").onkeyup=function(){var username=/^[^\d][\u4e00-\u9fa5|\w]{1,18}$/;if(username.test(this.value)){this.className="pass"}else{this.className="error"}}//年龄$("#age").onkeyup=function(){var age=/^[0-9]{1,3}$/;if(age.test(this.value)){this.className="pass"}else{this.className="error"}}//密码$("#pwd").onkeyup=function(){var pwd=/^\w{5,18}$/;if(pwd.test(this.value)){this.className="pass";}else{this.className="error";}}//确认密码$("#qpwd").onkeyup=function(){var qpwd=/^\w{5,18}$/;if(qpwd.test(this.value)){this.className="pass";}else{this.className="error";}}//电话$("#tel").onkeyup=function(){var tel=/^1[3-9]\d{9}$/;if(tel.test(this.value)){this.className="pass";}else{this.className="error";}}//QQ$("#qq").onkeyup=function(){var qq=/^[^0]\d{4,12}$/;if(qq.test(this.value)){this.className="pass";}else{this.className="error"}}//邮箱$("#email").onkeyup=function(){var email=/^[^\u4e00-\u9fa5]@|\d|\w$/;if(email.test(this.value)){this.className="pass";}else{email.className="error";}}//邮编$("#eml").onkeyup=function(){var eml=/^\d{6}$/;if(eml.test(this.value)){this.className="pass";}else{this.className="error"}}//身份证$("#sname").onkeyup=function(){var sname=/^\w{18}$/;if(sname.test(this.value)){this.className="pass";}else{this.className="error"}}//验证码$("#yCode").onkeyup=function(){var yCode=/^\w{4}$/if(yCode.test(this.value)){this.className="pass";} else{yCode.className="error";}}//刷新$("#shuaxin").onclick=function(){var arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];var reselt="";for(var i=0;i<4;i++){var sum=parseInt(Math.random()*16);reselt=reselt+ arr[sum];}$("#sCode").innerHTML=reselt;}var btn=document.getElementById("btn");btn.onclick=function(){alert("注册成功")}</script>
<!-- 要求：1、使用失去焦点事件完成表单验证 每一项验证失去焦点时都可以即时验证2、姓名： 中文和英文字母组成 2-20位 ，不能用数字开头年龄： 只能由数字组成 年龄不能为负数密码：6-18位字符组成 3、确认密码和密码相同4、手机号：15 13 18 开头的11数字5、qq ： 5-12位数字 第一位不能是06、邮箱： 必须有@符号一段数字或字母包含下划线@一段数字或字母.字母7、邮编：6位数字8、身份证： 18位 最后一位考虑有xX9、验证码 输入的验证码必须和红色框中的相同， 点击看不清可以实现验证码的切换验证码由字母 数字组成-->
2021-07-08 javascript 上相关推荐
- 项目实训2021.07.08
组员写好了初步的代码,由我测试. 包括了服务器端app.py,分发端front.py,接口端interface.py.首先安装了所需要的requests.jason模块,刚开始直接运行了interfa ...
- Doris Weekly FAQ】2021.07.19~2021.08.01
观众朋友们: 晚上好! 欢迎收看[ Doris 近日要闻]~本次为您带来的是 2021年07月19日 - 2021年08月01日 的双周总结. Doris 社区周报每期会包含 FAQ 环节.我们会在社 ...
- 【iVX 初级工程师培训教程 10篇文拿证】07 08 新闻页制作
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
- 2021 年最佳 JavaScript 框架
据 Stackoverflow 的 2021 年开发者调查,JavaScript 已连续第八年成为使用最多的语言,有 67.7% 的受访者选择它.之所以如此受欢迎,主要是因为 JavaScript 是 ...
- 哔哩哔哩“2021.07.13 我们是这样崩的”报告的学习-1
哔哩哔哩"2021.07.13 我们是这样崩的"报告的学习-1 这份报告是我学计算机两年来第一次真实看到大厂的员工到底在干什么.出现了很多专有名词,以及当前最先进的互联网企业的应用 ...
- 2021.07.07 宇信科技
2021.07.07 宇信科技 宇信科技 晚上电话面 问了一堆java基础,离谱,jd上也没要求java:简历筛选扣工资! java小白,凭借c语言基础简单回答了一哈,面试官估计在电 ...
- 【Doris Weekly FAQ】2021.07.05~2021.07.18
观众朋友们: 晚上好! 欢迎收看[ Doris 近日要闻]~本次为您带来的是 2021年07月15日 - 2021年07月18日 的双周总结. Doris 社区周报每期会包含 FAQ 环节.我们会在社 ...
- 小啊呜产品读书笔记001：《邱岳的产品手记-04》第07+08讲 关于需求变更
小啊呜产品读书笔记001:<邱岳的产品手记-04>第07+08讲 关于需求变更 一.今日阅读计划 二.泛读&知识摘录 1.07讲 关于需求变更(上):需求背后的需求 2.08讲 关 ...
- 2021 年最佳 JavaScript 框架排名
微信搜索逆锋起笔关注后回复编程pdf 领取编程大佬们所推荐的 23 种编程资料! 作者 | Olivia Cuthbert 译者 | Sambodhi 策划 | 刘燕 据 Stackoverflow ...
- 新手如何理解一个Web应用的构建（2021.07.29更新）
Web应用构建 ==前言== 我为什么写这篇文章? 适合什么样的人看? ==摘要== 步骤汇总 (1)网站定位与功能设定 (2)信息架构 (3)UI设计 (4)应用架构 (5)开发 (6)部署 (7) ...
最新文章
- 语音信号处理_书单 | 语音研究进阶指南
- 撞库攻击：一场需要用户参与的持久战
- 软饮赛道竞争正酣，农夫山泉跨界遭遇“拦路虎”？
- web第二节2020.5.11
- kolla-ansible-----常用命令
- “约见”面试官系列之常见面试题第二十八篇之vue中的混合（minix）实例理解
- 一只猫引发的互联网争论
- 阿里巴巴在内蒙古旱区试水物联网灌溉技术，一年省出1.5个西湖
- python流量实时统计_Python实现获取nginx服务器ip及流量统计信息功能示例
- mvc:annotation-driven/浅析
- python语言的缺点-python优缺点分析及python种类
- HDU 1568 Fibonacci ★(取科学计数法)
- getAttribute实例例java,Java AttributedCharacterIterator.getAttribute方法代码示例
- php 虚拟主机和虚拟目录的配置
- （转）DeepMind 的下一场博弈：用机器学习颠覆资产管理？
- WPF解析Fnt字体
- 计算机图形学上机心得,计算机图形学学习的心得体会
- PPT 2013 提升演讲逼格 视频教程
- redis字符串的创建，set、mset、setex、setnx
- 高速电路中菊花链、fly-by与T点拓扑