基础知识
拖拽时候元素要用绝对定位
数据类型的相互转换
其它类型转: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>
</html5
8,素数
<!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:00
var 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 % 60
var 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:00
let 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 % 60
Ose_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");//进行的innerhtml
let Osub=$(".aeras .sub");//完成的innerhtml
let 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:00
var 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 % 60
var 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="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/timg (2).jpg" alt=""></li>
<li><img src="images/timg (3).jpg" alt=""></li>
<li><img src="images/timg (4).jpg" alt=""></li>
<li><img src="images/timg (5).jpg" alt=""></li>
<li><img src="images/timg (6).jpg" alt=""></li>
<li><img src="images/timg (7).jpg" alt=""></li>
</ul>
<img src="images/l.png" id="prev" alt="">
<img src="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 - 1
move("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)) * 20
food.point.y = Math.floor(Math.random() * ((gameInfo.width - snake.width) / 20)) * 20
food.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(字符串)
返回值： boolean
console.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位数字 第一位不能是0
6、邮箱： 必须有@符号
一段数字或字母包含下划线@一段数字或字母.字母
7、邮编：6位数字
8、身份证： 18位 最后一位考虑有xX
9、验证码
输入的验证码必须和红色框中的相同， 点击看不清可以实现验证码的切换
验证码由字母 数字组成
-->
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
