1.页面返回顶部
比较基本的一个案例
只要检测页面卷上去的高度,到达一定数后给box显示
由快到慢部分我设置了一个每次间隔减少的值得计时器
<!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;
}
div{
position:relative;background-color: skyblue;
height: 8000px;
}
#box{
width: 50px;
height: 50px;
position: fixed;
bottom: 100px;
right: 100px;
background-color: red;
/* display: none; */
}
</style>
</head>
<body>
<div><a id="box">123</a> </div>
<script>
window.onscroll=function(){
var gao= document.documentElement.scrollTop
console.log(gao)
if(gao>100){
box.style.display = 'block';
}if(gao<100){
box.style.display = 'none';
}}
box.onclick=function(){
var gao= document.documentElement.scrollTop
var i=gao*0.04;
var time =setInterval(function(){
var gao= document.documentElement.scrollTop
i=i-gao*0.0015;
if(i>0)
{
var gao= document.documentElement.scrollTop
document.documentElement.scrollTop = gao-i
if(gao<1){
clearInterval(time)
}}
},50)
}
</script>
</body>
</html>
2.轮播图
途中遇到不少错误，比如两张图片交界切出入，正好尝试了许多方法，积累了很多经验
轮播主体，比较好做，溢出隐藏加间隔计时器移动即可，将i设置为全局变量方便后面
移入移出，轮播图我设置的函数，于是将函数内的计时器变为全局变量做删除，移出时再重新调用函数
左右箭头 ，移入出时显示隐藏，切换方面将定位加减做出固定到附近张和下一张图片效果
圆点切换，与箭头同理，点击时切换到相应定位，i到达一定数值切换
<!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;
}
#lun {
width: 3000px;
height: 400px;
background-color: skyblue;
position: absolute;
}
#kuang {
width: 600px;
height: 400px;
background-color: aqua;
overflow: hidden;
position: absolute;
}
#lun>img {
width: 600px;
height: 400px;
margin: 0;
box-sizing: border-box;
}
#zuo {
background-color: rgb(195, 195, 195, 50%);
width: 50px;
height: 80px;
position: absolute;
top: 40%;
z-index: 5;
display: none;
}
#you {
background-color: rgb(195, 195, 195, 50%);
width: 50px;
height: 80px;
position: absolute;
top: 40%;
right: 0;
z-index: 5;
display: none;
}
input {
z-index: 999;
position: relative;
top: 380px;
left: 200px;
margin-left: 20px;
}
span{
position: absolute;
z-index: 999;
font-size: 16px;
color: rgb(0, 0, 0);
/* width: 100px; */
height: 20px;
background-color: rgb(255, 255, 255,80%);
}
</style>
</head>
<body>
<div id="kuang">
<img src="返回箭头.png" id="zuo">
<div id="lun">
<img src="1.png"><img src="2.jpg"><img src="3.jpg"><img src="4.png"><img src="1.png">
<span style="left: 400px;">白玉老师！</span>
<span style="left: 1000px;">原神，启动！</span>
<span style="left: 1600px;">碧蓝档案</span>
<span style="left: 2200px;">星空铁道与白的旅行</span>
<span style="left: 2800px;">白玉老师！</span>
</div>
<img src="向右箭头.png" id="you">
<input type="radio" name="1"><input type="radio" name="1"><input type="radio" name="1"><input type="radio"
name="1">
</div>
<button id="b" style="position: absolute;right: 200px;">12
</button>
<script>
/* 轮 播 主 体 */
var lun = document.getElementById("lun")
var kuang = document.getElementById("kuang")
var left = lun.offsetLeft
i = 0
var time = function () {
var time1 = setInterval(function () {
i--
lun.style.left = i + "px"
if (i % 600 == 0) {
clearInterval(time1)
setTimeout(function () {
time()
}, 1000)
}
if (i <= -2400) {
i = 0
}
window.time1 = time1 /*将time1导出做全局变量，方便后面删除计时器*/
window.i = i
console.log(i)
panduan()
}, 5)
}
time()
/* 移 入 移 出 */
kuang.onmouseenter = function () {/*onmouseover属性会给到子盒子，导致图片切换的间隙也算移入移出,用onmouseenter*/
clearInterval(time1)
console.log(i)
zuo.style.display = "block"
you.style.display = "block"
}
kuang.onmouseleave = function () {
time()
console.log("2")
zuo.style.display = "none"
you.style.display = "none"
}
/* 左 右 箭 头 */
var zuo = document.getElementById("zuo")
var you = document.getElementById("you")
zuo.onclick = function () {/*移动后画面不再停止一直流，t值回合数对应错误*//*改为600整数倍可*/
console.log(i)
clearInterval(time1)
if (i % 600 == 0) { i = i + 600 }
else { i = i - i % 600 }
lun.style.left = i + "px"
window.i = i
if (i >= 0) {//time1被清除，图片无法从尾到头
i = -2400
}
panduan()
}
you.onclick = function () {
if (i <= -2400) {
i = 0
}
i = i - i % 600 - 600 /*当i=-2400时点击会变成i=-3000*/
console.log(i)
lun.style.left = i + "px"
window.i = i
panduan()
}
/* 圆 点 切 换*/
var yuan = document.querySelectorAll("input")
console.log(yuan[0])
yuan[0].onclick=(function(){
i=0
lun.style.left = i + "px"
window.i = i
})
yuan[1].onclick=(function(){
i=-600
lun.style.left = i + "px"
window.i = i
})
yuan[2].onclick=(function(){
i=-1200
lun.style.left = i + "px"
window.i = i
})
yuan[3].onclick=(function(){
i=-1800
lun.style.left = i + "px"
window.i = i
})
var panduan=function(){
if (i > -600) { yuan[0].checked = true }
if (i <= -600 && i > -1200) { yuan[1].checked = true }
if (i <= -1200 && i > -1800) { yuan[2].checked = true }
if (i <= -1800 && i > -2400) { yuan[3].checked = true }
if (i <= -2400) { yuan[0].checked = true }
}
</script>
</body>
</html>
3.瀑布流布局
难度不高，设置column-count列数
利用map遍历赋值
再设置高度计算即可
<!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;
}
img {
width: 280px;
margin-bottom: 10px;
/* float: left; */
/* display:inline */
/* break-inside: avoid; */
}
#list{
column-count: 6;
width: 99%;
}
</style>
</head>
<body>
<div id="list">
</div>
<script>
var arr1 = [{
url: "1.png"
},
{
url: "https://pic.maizuo.com/usr/movie/594ded98490b61549be7ecb5a9355b79.jpg?x-oss-process=image/quality,Q_70"
},
{
url: "https://pic.maizuo.com/usr/movie/d8419057142d94750cfcbaa69f5fd16b.jpg?x-oss-process=image/quality,Q_70"
},
{
url: "https://pic.maizuo.com/usr/movie/e6ee44927d2e3370dcf251c2627ef6d4.jpg?x-oss-process=image/quality,Q_70"
},
{
url: "https://pic.maizuo.com/usr/movie/ea32c21b19817f0a9d7d799c1262ac8d.jpg?x-oss-process=image/quality,Q_70"
},
{
url:"https://pic.maizuo.com/usr/movie/ea32c21b19817f0a9d7d799c1262ac8d.jpg?x-oss-process=image/quality,Q_70"
}
]
var arr2 = [{
url: "https://pic.maizuo.com/usr/movie/a17030216bc281dfc04c0964bd911497.jpg?x-oss-process=image/quality,Q_70"
},
{
url: "https://pic.maizuo.com/usr/movie/afdef208d7b72a950b164c007e8a0837.jpg?x-oss-process=image/quality,Q_70"
},
{
url: "https://pic.maizuo.com/usr/movie/635c53b2cbd14987870df6b3434e2a28.jpg?x-oss-process=image/quality,Q_70"
},
{
url: "https://pic.maizuo.com/usr/movie/46015aa8e08a661e7c559b6e7407ce08.jpg?x-oss-process=image/quality,Q_70"
},
{
url: "https://pic.maizuo.com/usr/movie/36e714044b7e5d555a81a74f816bde99.jpg?x-oss-process=image/quality,Q_70"
},
{
url:"https://pic.maizuo.com/usr/movie/36e714044b7e5d555a81a74f816bde99.jpg?x-oss-process=image/quality,Q_70"
}
]
renderHTML(arr1)
renderHTML(arr2)
renderHTML(arr1)
function renderHTML(arr) {
list.innerHTML += arr.map(function (item) {
return `
<img src="${item.url}">
`
}).join("")//将中间的，换成空白
}
window.onscroll = function(){
// console.log("1111")
var listHeight = list.offsetHeight//list为ul高度
var listTop = list.offsetTop//与顶部的偏移值,此时为0
// console.log(list.offsetHeight,listTop)
var scrollTop = document.documentElement.scrollTop //卷上去高度
var windowHeight = document.documentElement.clientHeight//屏幕高
console.log(scrollTop,windowHeight)
if((listHeight+listTop)-Math.round(windowHeight+scrollTop)<5){
// console.log("到底了")
//渲染下一页数据
renderHTML(arr1)
renderHTML(arr2)
renderHTML(arr1)
renderHTML(arr2)
}
}
</script>
</body>
</html>
4.发送验证码
难度不高
发送邀请码按钮按下后禁用按钮
并利用计时器做倒数并替换按钮内容
<!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>
div{
height: 200px;
width: 400px;
margin: auto;
background-color: skyblue;
box-sizing:border-box;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
}
#kuang{
margin-top: 20px;
height: 30px;
width: 250px;
}
button{
width: 90px;
height: 40px;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<input type="text" id="kuang" placeholder="请输入验证码0505" >
<button id="fa">发送验证码</button>
<button id="ti">提交</button>
</div>
<script>
var kuang = document.getElementById("kuang")
var fa = document.getElementById("fa")
var ti = document.getElementById("ti")
var t=60;
fa.onclick=function(){
fa.disabled ="disabled"
var time=setInterval(function(){
console.log(t)
t=t-1
if(t==-1)
{
clearInterval(time);
fa.innerHTML= "发送验证码"
fa.disabled = false
} else{
fa.innerHTML= "剩余" + t +"秒"
}
},1000)
}
ti.onclick=function(){
var mi=kuang.value
console.log(mi)
if(mi=="0505")
{
alert("密码正确，等待跳转中……")
setTimeout(function(){
location.reload()
},1000)
}else{
alert("验证码错误，请重试")
}
}
</script>
</body>
</html>
5.随机点名
点击抽奖后，数组map，再用计时器轮播
<!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>
#chou{
height: 200px;
width: 400px;
background-color: green;
text-align: center;
line-height: 180px;
font-size: 60px;
color: white;
}
#kai{
height: 200px;
width: 200px;
background-color: blue;
text-align: center;
line-height: 180px;
font-size: 60px;
color: white;
}
#jie{
height: 200px;
width: 200px;
background-color: red;
text-align: center;
line-height: 180px;
font-size: 60px;
color: white;
}
.a{
display: flex;
width: 400px;
height: 400px;
background-color: rgb(0, 0, 0);
flex-wrap:wrap;
margin: auto;
}
</style>
</head>
<body>
<div class="a">
<div id="chou"></div>
<div id="kai">开始</div>
<div id="jie">结束</div>
</div>
<script>
var arr1=[{
name: "lbw",
number:"114514"
},{
name:"xcw",
number:"1514321"
},{
name:"chenrui",
number:"5884"
},{
name:"zgkm",
number:"115483"
},{
name:"sda",
number:"13454"
}
]
var chou=document.getElementById("chou")
console.log(chou)
var arr=arr1.map(function(name){
return`<div>
${name.name}
${name.number}
</div>`
})
console.log(arr)
kai.onclick=function(){
var i=0
time=setInterval(function(){
chou.innerHTML=arr[i]
i++
console.log(i)
if(i==4)
{
i=0
}
},100)
}
jie.onclick=function(){
clearInterval(time)
}
</script>
</body>
</html>
6.tab选项卡
利用for循环建立dataset.index找出点击的序号将display值改变
<!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;
}
ul{
display: flex;
width: 500px;
background-color: skyblue;
list-style: none;
margin: auto;
}
.head li{
flex:1;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
.body li{
width: 500px;
height: 300px;
background-color:skyblue ;
display: none;
}
.head>.a{
background-color: red;
}
.body>.a{
display: block;
}
</style>
</head>
<body>
<ul class="head">
<li class="a">英雄联盟</li>
<li>DOTA</li>
<li>风暴英雄</li>
<li>酸败英雄</li>
</ul>
<ul class="body">
<li class="a">英雄联盟</li>
<li>DOTA</li>
<li>风暴英雄</li>
<li>酸败英雄</li>
</ul>
<script>
var head =document.querySelectorAll(".head li")
var body =document.querySelectorAll(".body li")
console.log(body)
for(i=0;i<4;i++)
{
head[i].dataset.index=i
head[i].onclick=a
}
function a(){
var index=this.dataset.index//取点击数所赋的值
console.log(index)
for(i=0;i<4;i++)
{
head[i].classList.remove("a")
body[i].classList.remove("a")
}
head[index].classList.add("a")
body[index].classList.add("a")
}
</script>
</body>
</html>
7.省市区三级联动
定义数组后加入下拉菜单
利用.value查询前者内容从而改变后者赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<body>
<select class="sheng" id="sheng">
<option> </option>
<option>广东</option>
<option>江苏</option>
<option>山东</option>
</select>
<select id="shi">
</select>
<select id="qv">
</select>
</body>
<script>
var guang = [
{ a: "" }, {
a: "广州"
},
{
a: "深圳"
},
{
a: "汕头"
}
]
shan = [{ a: "" }, { a: "青岛" },
{ a: "淄博" },
{ a: "枣庄" }]
su = [{ a: "" }, {
a: "南京"
},
{ a: "南通" },
{ a: "扬州" }
]
su1 = [{ a: "" },
{ a: "玄武" },
{ a: "六合" }]
su2 = [{ a: "" }, { a: "通州" },
{ a: "海门" }]
su3 = [{ a: "" }, { a: "广陵" },
{ a: "邗江" }]
shan1 = [{ a: "" }, { a: "市南" },
{ a: "市北" }]
shan2 = [{ a: "" }, { a: "周村" },
{ a: "博山" }]
shan3 = [{ a: "" }, { a: "薛城" },
{ a: "山亭" }]
guang1 = [{ a: "" }, { a: "白云" },
{ a: "黄埔" }]
guang2 = [{ a: "" }, { a: "盐田" },
{ a: "南山" }]
guang3 = [{ a: "" }, { a: "金平" },
{ a: "龙湖" }]
var head = document.getElementById("sheng")
// var sheng = document.querySelectorAll(".sheng option")
//改变省时改变市，同时给区赋初值
head.oninput = function () {
// console.log(this.value)
if (this.value == "广东") { shi.innerHTML = arr1 }
else if (this.value == "山东") { shi.innerHTML = arr2 }
else if (this.value == "江苏") { shi.innerHTML = arr3 }
else { shi.innerHTML = "" }
// console.log(body.value)
if (head.value == "广东") {
if (body.value == "广州") { qv.innerHTML = arr11 }
else if (body.value == "深圳") { qv.innerHTML = arr12 }
else if (body.value == "汕头") { qv.innerHTML = arr13 }
// else{ qv.innerHTML=" "}
}
if (head.value == "山东") {
if (body.value == "青岛") { qv.innerHTML = arr21 }
else if (body.value == "淄博") { qv.innerHTML = arr22 }
else if (body.value == "枣庄") { qv.innerHTML = arr23 }
// else{ qv.innerHTML=" "}
}
if (head.value == "江苏") {
if (body.value == "南京") { qv.innerHTML = arr31 }
else if (body.value == "南通") { qv.innerHTML = arr32 }
else if (body.value == "扬州") { qv.innerHTML = arr33 }
// else{ qv.innerHTML=" "}
}
// console.log(shi.value)
if (shi.value == "") { qv.innerHTML = "" }
}
//定义数组
var arr1 = guang.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr2 = shan.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr3 = su.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr11 = guang1.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr12 = guang2.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr13 = guang3.map(function (name) {
return `<option>
${name.a}
</option>`
})
// console.log(arr1)
var arr21 = shan1.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr22 = shan2.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr23 = shan3.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr31 = su1.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr32 = su2.map(function (name) {
return `<option>
${name.a}
</option>`
})
var arr33 = su3.map(function (name) {
return `<option>
${name.a}
</option>`
})
//改变市时改变区
var body = document.getElementById("shi")
body.oninput = function () {
console.log(body.value)
if (head.value == "广东") {
if (body.value == "广州") { qv.innerHTML = arr11 }
else if (body.value == "深圳") { qv.innerHTML = arr12 }
else if (body.value == "汕头") { qv.innerHTML = arr13 }
else { qv.innerHTML = " " }
}
if (head.value == "山东") {
if (body.value == "青岛") { qv.innerHTML = arr21 }
else if (body.value == "淄博") { qv.innerHTML = arr22 }
else if (body.value == "枣庄") { qv.innerHTML = arr23 }
else { qv.innerHTML = " " }
}
if (head.value == "江苏") {
if (body.value == "南京") { qv.innerHTML = arr31 }
else if (body.value == "南通") { qv.innerHTML = arr32 }
else if (body.value == "扬州") { qv.innerHTML = arr33 }
else { qv.innerHTML = " " }
}
}
</script>
</html>
8.动态表格
获取body下的div即条数组成数组
使单和双分别赋值做出黑白效果
添加删除时要重新读取数组改变颜色
<!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;
}
div {
width: 100px;
}
button {
width: 40px
}
ul {
width: 800px;
display: flex;
}
li {
width: 100px;
height: 20px;
border: 1px solid blue;
list-style: none;
text-align: center;
padding: 8px;
}
#shanque {
width: 400px;
height: 200px;
background-color: rgb(0, 255, 255);
position: absolute;
left: 800px;
top: 40px;
text-align: center;
font-size: 30px;
line-height: 120px;
display: none;
}
#jiaru {
width: 400px;
height: 200px;
background-color: rgb(0, 255, 255);
position: absolute;
left: 800px;
top: 40px;
text-align: center;
display: none;
}
#que {
width: 50px;
height: 30px;
position: absolute;
bottom: 40px;
left: 100px;
}
#qv {
width: 50px;
height: 30px;
position: absolute;
bottom: 40px;
right: 100px;
}
input {
width: 100px;
}
</style>
</head>
<body>
<ul>
<li>学号</li>
<li>姓名</li>
<li>性别</li>
<li>二级学院</li>
<li>班级</li>
<li>专业</li>
<li>辅导员</li>
<li><button id="jia">增加</button></li>
</ul>
<p id="shanque">
确认删除？
<button id="que">确认</button>
<button id="qv">取消</button>
</p>
<p id="jiaru">
学号<input>
姓名<input><br>
性别<input>班级<input><br>
专业<input>
辅导员<input><br> 二级学院<input>
<button id="que2">确认</button>
<button id="qv2">取消</button>
</p>
<script>
/*建立信息数组*/
var ren1 = [ { hao: "1", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, { hao: "2", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, { hao: "3", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, { hao: "4", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, { hao: "5", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, { hao: "6", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, { hao: "7", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, { hao: "8", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, { hao: "9", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, { hao: "10", name: "cjx", sex: "男", er: "计算机工程", ban: "7", major: "软件工程", fu: "bear" }, ]
/* 建 立 行 样 式 */
var arr = ["black", "while"]
var a = document.createElement("div")
a.style.width = "800px"
a.style.display = "flex"
document.body.appendChild(a)
/*赋值10份*/
for (i = 0; i < 10; i++) {
var a = a.cloneNode(true)/*复制a为a*/
a.innerHTML = `<div>${ren1[i].hao}</div><div>${ren1[i].name}</div><div>${ren1[i].sex}</div><div>${ren1[i].er}</div><div>${ren1[i].ban}</div><div>${ren1[i].major}</div><div>${ren1[i].fu}</div><button>删除</button>`
document.body.appendChild(a)
}
/* 黑 白 效 果 */
var w = document.querySelectorAll("body>div")
console.log(w)
for (i = 0; i < w.length; i++) {
if (i % 2 == 0) {
w[i].style.color = "white"
w[i].style.background = "black"
}
else {
w[i].style.color = "black"
w[i].style.background = "white"
}
}
/* 删 除 效 果 */
var shan = document.querySelectorAll("body button")
var shanque = document.getElementById("shanque")
var shanzong=function(){
for (i = 0; i < w.length; i++) {
w[i].dataset.index = i
console.log(i)
w[i].onclick = handler
}
function handler() {
var index = this.dataset.index
// console.log(w[i])
console.log(w[index])
shanque.style.display = "block"
que.onclick = handler2
qv.onclick = function () {
shanque.style.display = "none"
}
function handler2() {
console.log(w[index])
w[index].remove()
shanque.style.display = "none"
/*删除后重新读取条数并赋黑白*/ /*此处导致错位*/
/*原因，被赋index值固定，删除后index错位*/
w = document.querySelectorAll("body>div")
for (i = 0; i < w.length; i++) {/*解决方案*/
w[i].dataset.index = i
w[i].onclick = handler
}
console.log(w)
for (i = 0; i < w.length; i++) {
if (i % 2 == 0) {
w[i].style.color = "white"
w[i].style.background = "black"
}
else {
w[i].style.color = "black"
w[i].style.background = "white"
}
}
}
}
}
shanzong()
/*添加条*/
var jia = document.getElementById("jia")
var jiaru = document.getElementById("jiaru")
var qv2 = document.getElementById("qv2")
var que2 = document.getElementById("que2")
jia.onclick = function () {
jiaru.style.display = "block"
que2.onclick = handler4
qv2.onclick = handler3
}
function handler3() {
jiaru.style.display = "none"
}
function handler4() {
var jianei = document.querySelectorAll("input")
var b = a.cloneNode(true)
b.innerHTML = `<div>${jianei[0].value}
</div><div>${jianei[1].value}
</div><div>${jianei[2].value}
</div><div>${jianei[3].value}
</div><div>${jianei[4].value}
</div><div>${jianei[5].value}
</div><div>${jianei[6].value}
</div><button>删除</button>`
document.body.appendChild(b)
jiaru.style.display = "none"
/*超过十的部分删除 按钮不起作用*//*未触发index赋值，重复即可*/
shanzong()
/*添加重新读条赋颜色*/
w = document.querySelectorAll("body>div")
for (i = 0; i < w.length; i++) {
if (i % 2 == 0) {
w[i].style.color = "white"
w[i].style.background = "black"
}
else {
w[i].style.color = "black"
w[i].style.background = "white"
}
}
/*输入后清空*/
for(i=0;i<7;i++){
jianei[i].value=""
}
}
</script>
</body>
</html>
9.注册表单提交
placeholder设置输入提醒时点击会消失
利用onfocus,onblur聚焦失焦
设置i值当密码验证触发时i值改变以验证密码是否符合
<!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>
.box{
width: 600px;
height: 800px;
box-sizing: border-box;
border: 1px solid black;
margin: auto;
/* display: flex; */
line-height: 50px;
}
p{
width: 10px;
height: 10px;
background-color: red;
display:inline-block;
display: none;
}
div{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box" id="box">
<div>昵称：<input id="ni" placeholder="输入昵称" ><p></p></div>
<div>姓名：<input id="na" placeholder="输入姓名"><p></p></div>
<div>QQ号：<input id="qq" placeholder="输入QQ号"><p></p></div>
<div>手机号：<input id="shou" placeholder="输入手机号"><p></p></div>
<div>邮箱：<input id="you" placeholder="输入邮箱"><p></p></div>
<div>密码：<input id="mi" placeholder="输入密码"><p></p></div>
<div>确认密码：<input id="mima" placeholder="再次输入密码"><p></p></div>
<button id="ti">提交</button>
<button id="chong">重置</button>
</div>
<script>
var box=document.querySelectorAll(".box div")
var box=document.getElementById("box")
var ni=document.getElementById("ni")
var na=document.getElementById("na")
var qq=document.getElementById("qq")
var shou=document.getElementById("shou")
var you=document.getElementById("you")
var mi=document.getElementById("mi")
var mima=document.getElementById("mima")
var ti=document.getElementById("ti")
var chong=document.getElementById("chong")
/* 设 置 选 中 清 空 提 示*/
ni.onfocus=function(){
ni.placeholder=" "
}
ni.onblur=function(){
ni.placeholder="输入昵称"
}
na.onfocus=function(){
na.placeholder=" "
}
na.onblur=function(){
na.placeholder="输入姓名"
}
qq.onfocus=function(){
qq.placeholder=" "
}
qq.onblur=function(){
qq.placeholder="输入QQ号"
}
shou.onfocus=function(){
shou.placeholder=" "
}
shou.onblur=function(){
shou.placeholder="输入手机号"
}
you.onfocus=function(){
you.placeholder=" "
}
you.onblur=function(){
you.placeholder="输入邮箱"
}
mi.onfocus=function(){
mi.placeholder=" "
}
mi.onblur=function(){
mi.placeholder="输入密码"
}
mima.onfocus=function(){
mima.placeholder=" "
}
mima.onblur=function(){
mima.placeholder="再次输入密码"
}
/* 设 置 密 码 验 证 */
// var p1=ni.childNode1
// console.log(p1)
ti.onclick=function(){
var i=1;
if (ni.value.length>10 ||ni.value.length==0)//昵称超10个
{
i--
alert("昵称有误")
}
if (na.value.length>4 ||na.value.length==0)//名字超4个
{
i--
alert("姓名有误")
}
if(qq.value.length>10 || qq.value.length<6)
{
i--
alert("QQ号出错")
}
if (shou.value.length!=11)//手机超过11位
{
i--
alert("手机号出错")
}
var reg=/(?=.*[0-9])(?=.*[a-zA-Z]).{8,16}/
if (String(reg.test(mi.value))=="false")//密码>8,<16,字母数字组成
{
i--
alert("密码错误")
}
if(mi.value!=mima.value){
i--
alert("两次密码 输入不一样")
}
if(i>0)
{
alert("登录成功")
}
}
/* 重 置 设 置*/
chong.onclick=function(){
alert("重置成功")
ni.value=""
na.value=""
qq.value=""
shou.value=""
you.value=""
mi.value=""
mima.value=""
}
</script>
</body>
</html>
10.放大镜效果
设定取镜跟放镜，取镜定位乘负数给放镜图片移动溢出隐藏 pointer-events: none;给取的镜子使定位上去的方框不会遮挡图片影响显示
<!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;
}
#img{
width: 589px;
height: 381px;
background: url(-1e18dfe54255b948.jpg);
background-size: 589px 381px;
/* float: left; */
}
#jing{
width: 50px;
height: 50px;
border: 2px solid yellow;
/* z-index: 5; */
position: absolute;
pointer-events: none;
}
#img2{
width: 1413px;
height: 914px;
background-color: bisque;
position: relative;
background: url(-1e18dfe54255b948.jpg);
background-size: cover;
}
#jing2{
width: 120px;
height: 120px;
background-color: aqua;
overflow: hidden;
position: relative;
}
.c{
position: absolute;
right: 500px;
top: 20px;
}
</style>
</head>
<div>
<div id="img" ><div id="jing" disbled="true"> </div></div>
<div class="c">
<div id="jing2">
<div id="img2"></div>
</div>
</div>
</body>
<script>
var img =document.getElementById("img")
var jing =document.getElementById("jing")
var img2 =document.getElementById("img2")
var jing2 =document.getElementById("jing2")
var h=img.offsetHeight-25 //取图宽高做突出
var w=img.offsetWidth-25
console.log(w,h)
img.onmousemove=function(evt){
//避免突出
x=evt.offsetX
y=evt.offsetY
if(evt.offsetX>w){
x=w;
}else if(evt.offsetX<25)
{
x=25
}
if(evt.offsetY>h){
y=h;
}
else if(evt.offsetY<25)
{
y=25
}
console.log(x,y)
//给镜子定位
jing.style.left=x-25+"px"
jing.style.top=y-25+"px"
img2.style.left=-2.4*(x-25)+"px"
img2.style.top=-2.4*(y-25)+"px"
}
</script>
</html>
11.滚动弹幕
设置随机数来在设定中取随机颜色以及大小
移动到底时i设置为1回到最前
输入框点击弹出与收回，样式随机
<!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;
overflow: hidden;
}
#a, #b, #c, #d,#f,#lan{
position: absolute;
}
#a {
top: 20px;
}
#b {
top: 60px;
}
#c {
top: 100px;
}
#d {
top: 140px;
}
#f{
top:190px;
border: 1px solid black;
}
#button {
width: 200px;
height: 50px;
margin: auto;
position: absolute;
left: 44%;
top: 45%;
}
#lan {
width: 100%;
height: 400px;
background-color: aqua;
bottom: 0px;
}
#input{
width: 450px;
height: 50px;
/* margin-left: auto; */
/* margin-top: 10%; */
}
.a{
margin: auto;
margin-top: 120px;
/* background-color: black; */
width: 400px;
height: 50px;
}
.b{
margin: auto;
background-color: black;
width: 200px;
height: 50px;
margin-top: 20px;
}
#button2{
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div id="a">111111111111111</div>
<div id="b">222222222222222</div>
<div id="c">33333333333333</div>
<div id="d"> 4444444444444</div>
<div id="f"> 555</div>
<button id="button">点击关闭</button>
<div id="lan">
<div class="a">
<input id="input"></input>
</div>
<div class="b">
<button id="button2">发送弹幕</button>
</div>
</div>
<script>
/* 弹 幕 部 分 */
//定义
var a = document.getElementById("a")
var b = document.getElementById("b")
var c = document.getElementById("c")
var d = document.getElementById("d")
var f = document.getElementById("f")
//建立颜色跟大小数组
arr1 = ["red", "blue", "aqua", "fuchsia"]
arr2 = ["14", "20", "26", "32"]
//产生随机数选取数组
var res11 = Math.floor(Math.random() * 4)
var res21 = Math.floor(Math.random() * 4)
var res12 = Math.floor(Math.random() * 4)
var res22 = Math.floor(Math.random() * 4)
var res13 = Math.floor(Math.random() * 4)
var res23 = Math.floor(Math.random() * 4)
var res14 = Math.floor(Math.random() * 4)
var res24 = Math.floor(Math.random() * 4)
var res15 = Math.floor(Math.random() * 4)
var res25 = Math.floor(Math.random() * 4)
//随机属性加入
a.style.color = arr1[res11]
a.style.fontSize = arr2[res21] + "px"
b.style.color = arr1[res12]
b.style.fontSize = arr2[res22] + "px"
c.style.color = arr1[res13]
c.style.fontSize = arr2[res23] + "px"
d.style.color = arr1[res14]
d.style.fontSize = arr2[res24] + "px"
f.style.color = arr1[res15]
f.style.fontSize = arr2[res25] + "px"
//移动
var yi1 = 1
var timea = setInterval(function () {
var width = innerWidth
a.style.left = yi1 + "px"
yi1++
if (yi1 > width) {
yi1 = 1
//重新随机赋值
var res11 = Math.floor(Math.random() * 4)
var res21 = Math.floor(Math.random() * 4)
a.style.color = arr1[res11]
a.style.fontSize = arr2[res21] + "px"
}
}, 10)
var yi2 = 1
var timeb = setInterval(function () {
var width = innerWidth
b.style.left = yi2 + "px"
yi2++
if (yi2 > width) {//大于窗口边界时
yi2 = 1
//重新随机赋值
var res12 = Math.floor(Math.random() * 4)
var res22 = Math.floor(Math.random() * 4)
b.style.color = arr1[res12]
b.style.fontSize = arr2[res22] + "px"
}
}, 20)
var yi3 = 1
var timec = setInterval(function () {
var width = innerWidth
c.style.left = yi3 + "px"
yi3++
if (yi3 > width) {
yi3 = 1
//重新随机赋值
var res13 = Math.floor(Math.random() * 4)
var res23 = Math.floor(Math.random() * 4)
c.style.color = arr1[res13]
c.style.fontSize = arr2[res23] + "px"
}
}, 15)
var yi4 = 1
var timed = setInterval(function () {
var width = innerWidth
d.style.left = yi4 + "px"
yi4++
if (yi4 > width) {
yi4 = 1
//重新随机赋值
var res14 = Math.floor(Math.random() * 4)
var res24 = Math.floor(Math.random() * 4)
d.style.color = arr1[res14]
d.style.fontSize = arr2[res24] + "px"
}
}, 5)
/* 输 入 栏 部 分 */
var button = document.getElementById("button")
var lan = document.getElementById("lan")
button.onclick = function () {
if (button.innerHTML == "点击关闭") {
var timelan1 = setInterval(function () {
var lanh = document.getElementById("lan").offsetHeight
i = 5
lan.style.height = lanh - i + "px"
button.disabled=true
if (lan.style.height == 0 + "px") {
clearInterval(timelan1)
button.innerHTML = "点击输入弹幕"
button.disabled=false
}
}, 5)
}
else {
// console.log("111")
var timelan2 = setInterval(function () {
var lanh = document.getElementById("lan").offsetHeight
button.disabled=true
// console.log(lanh)
i = 5
lan.style.height = lanh + i + "px"
if (lan.style.height == 400 + "px") {
clearInterval(timelan2)
button.innerHTML = "点击关闭"
button.disabled=false
}
}, 5)
}
}
/* 输 入 框 发 送 弹 幕*/
var button2=document.getElementById("button2")
var input=document.getElementById("input")
var yi5 = 1
var timef=setInterval(function(){
width = innerWidth
f.style.left = yi5 + "px"
yi5++
console.log(yi5)
if (yi5 > width) {
yi5 = 1
//重新随机赋值
var res15 = Math.floor(Math.random() * 4)
var res25 = Math.floor(Math.random() * 4)
f.style.color = arr1[res15]
f.style.fontSize = arr2[res25] + "px"
}
}, 10)
button2.onclick=function(){
f.innerHTML=input.value
clearInterval(timef)
yi5=1
timef=setInterval(function(){
width = innerWidth
f.style.left = yi5 + "px"
yi5++
console.log(yi5)
if (yi5 > width) {
yi5 = 1
//重新随机赋值
var res15 = Math.floor(Math.random() * 4)
var res25 = Math.floor(Math.random() * 4)
f.style.color = arr1[res15]
f.style.fontSize = arr2[res25] + "px"
}
}, 10)
}
</script>
</body>
</html>
12.刻度时钟
循环设置时钟以及刻度钟表的样式
时间秒数处理后输出到电子钟，并且利用值使指针旋转角度改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style id="style">
ul{
list-style: none;
}
#circle{
width: 200px;
height: 200px;
border-radius: 100px;
border: 1px solid black;
}
#kedu li{
width: 1px;
height: 6px;
border-radius: 10px;
background-color: black;
transform-origin: center 101px;/*设置li标签的旋转中心和旋转半径。*/
position: absolute;
left: 109px;
top: 9px;
}
#kedu li:nth-of-type(5n+1){
height: 12px;
width: 2px;
}
/* 秒针的绘制，用transform把div绘制成线条，后面的指针都是在这样。 */
#second{
width: 2px;
height: 80px;
background-color: red;
transform: scaleY(1);
position: absolute;
left: 108px;
top: 30px;
transform-origin: bottom; /*设置它们的旋转中心，transform-origin: bottom；意思是以它们的底部为中心旋转。*/
}
#min{
width: 2px;
height: 65px;
background-color: gray;
transform: scaleY(1);
position: absolute;
left: 108px;
top: 45px;
transform-origin: bottom;
}
#hour{
width: 2px;
height: 50px;
background-color: black;
transform: scaleY(1);
position: absolute;
left: 108px;
top: 60px;
transform-origin: bottom;
}
#p12{
position: absolute;
left: 100px;
top: 0px;
}
#p3{
position: absolute;
left: 190px;
top: 84px;
}
#p6{
position: absolute;
left: 105px;
top: 165px;
}
#p9{
position: absolute;
left: 20px;
top: 82px;
}
#dian{
width: 300px;
height: 100px;
background-color: black;
color: white;
position: absolute;
top: 200px;
text-align: center;
line-height: 100px;
}
</style>
<div id="circle">
<ul id="kedu"></ul>
</div>
<div id="second"></div><!--绘制秒针-->
<div id="min"></div><!--绘制分针-->
<div id="hour"></div><!--绘制时针-->
<p id="p12">12</p>
<p id="p3">3</p>
<p id="p6">6</p>
<p id="p9">9</p>
<p id="dian"></p>
<script>
//绘制时钟的刻度 动态创建60个li标签。
function li(){
let ul=document.getElementById("kedu");//先获取到ul，因为要在ul下创建li。
let css;//用来存li的style样式中的CSS设置。
for(let i=0;i<60;i++){
css+=`#kedu li:nth-of-type(${i+1}){transform:rotate(${i*6}deg)}`//循环设置ul下的第i+1个li的旋转角度，要在css中设置了li的旋转中心
ul.innerHTML+=`<li></li>`;//这里要用+=，如果直接用=，只会创建一个li，因为会覆盖前面的li，为了不出现覆盖就用+=。
}
let sty=document.getElementById("style")//这里获取到style标签。
sty.innerHTML+=css //把ul下的li标签的css样式写入到style里。
}
li();//这里结束就把刻度画好了。
function time(){
let s=document.getElementById("second");//获取到时分秒的三个指针，后面用来动态让它们旋转起来。
let m=document.getElementById("min");
let h=document.getElementById("hour");
//获取时间。
let date=new Date();
let snum=date.getSeconds();//获取现在是多少秒。
let mnum=date.getMinutes()+snum/60;//获取现在是多少分，不能忘记加上 秒数/60。
let hnum=date.getHours()+mnum/60; //获取现在是多少时，不能忘记加上 分钟数/60。
s.style.transform=`rotate(${snum*6}deg)`;//设置的trasnform就可以让它们旋转起来，秒针时一秒旋转6度。
m.style.transform=`rotate(${mnum*6}deg)`//分针也是一分钟旋转6度。
h.style.transform=`rotate(${hnum*30}deg)`//这里时小时，一小时旋转30度，所以*30
dian.innerHTML=Math.floor(hnum)+"时"+Math.floor(mnum)+"分"+snum+"秒"
}
setInterval(time,100)//用计时器每100ms运行这个time函数。
</script>
</body>
</html>
