JS 小练习
1. 页面返回顶部
按钮显示/隐藏
window.onscroll事件当滚动条滚动时触发，判断滚动条的位置是否大于300时，设置按钮的display属性，使其显示/隐藏
回到顶部
window.scrollTo使其回到顶部，smooth使滚动条滚动平滑，而不是瞬间回到顶部
<!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: 10000px;
}
button{
position: fixed;
bottom: 50px;
right: 50px;
border: 1px solid black;
width: 70px;
height: 70px;
text-align: center;
line-height: 70px;
}
</style>
</head>
<body>
<div>
</div>
<button id="btn" style="display: none;">回到顶部</button>
<script>
btn.onclick = function(){
window.scrollTo({
top:0,
behavior:"smooth"
})
}
window.onscroll = function(){
if(document.documentElement.scrollTop > 300){
btn.style.display = "block"
}else{
btn.style.display = "none"
}
}
</script>
</body>
</html>
回到顶部效果
2. 轮播图
中央一个div用于展示图片，例外一个长div存放轮播的图片，并设置position，最后一张图片与第一张图片相同，使之悄然跳回第一张图片
自动轮播
定义变量dolunbo=0，stop="false"，
触发mouseenter，onmouseleave时，轮播需要停止，将stop="true"
-
注册间隔定时器，
先判断stop是否为true（是否需要停止轮播），如果是，则判断轮播的进度，将图片停止
-
如果stop不为true，再判断图片是否已经完整展示（到达边缘），
没有就减小left值，进行移动；
如果图片到达边缘，dolunbo+=1，当 dolunbo=1000时，再移动图片，实现图片停顿展示，
switch判断图片的轮播进度，改变右上角信息，小圆点的action，判断是否到达最后一张，如果是，就回到第一张
手动轮播
判断当前slide的left值推测轮播的进度，改变slide 的 left 值，实现下一张/上一张的跳转
<!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: 1065px;
height: 590px;
}
.show {
width: 1065px;
height: 590px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slide {
height: 590px;
width: 10000px;
position: absolute;
}
#left {
position: absolute;
left: 0;
top: 180px;
width: 125px;
height: 165px;
opacity: 0.5;
display: none;
}
#right {
position: absolute;
right: 0;
top: 180px;
width: 125px;
height: 165px;
opacity: 0.5;
display: none;
}
p {
position: absolute;
top: 20px;
right: 20px;
background-color: rgba(173, 216, 230, 0.23);
height: 30px;
line-height: 30px;
text-align: center;
color: red;
}
ul {
list-style: none;
width: 180px;
height: 10px;
position: absolute;
bottom: 30px;
left: 500px;
}
li {
width: 8px;
height: 8px;
border: 1px solid #E1E1E1;
border-radius: 50%;
float: left;
margin-right: 20px;
background-color: #E1E1E1;
}
ul .active {
border-color: #AFAFAF;
background-color: #AFAFAF;
}
ul>li:hover {
background-color: #AFAFAF;
}
</style>
</head>
<body>
<div class="show" id="show">
<div class="slide" id="slide" style="left: 0;">
<img src="/1.webp" alt="">
<img src="/2.webp" alt="">
<img src="/3.webp" alt="">
<img src="/4.webp" alt="">
<img src="/1.webp" alt="">
</div>
<p id="iofo">英雄联盟</p>
<img src="/left.png" alt="" id="left">
<img src="/right.png" alt="" id="right">
<ul id="circle">
<li id="a" class="active"></li>
<li id="b"></li>
<li id="c"></li>
<li id="d"></li>
</ul>
</div>
<script>
var dolunbo = 0
var stop = "false"
var lunbo = setInterval(function () {
posi = slide.style.left
if (stop === "ture") {
if (parseInt(posi) < 0 && parseInt(posi) > -1065) {
slide.style.left = "-1065px"
} else if (parseInt(posi) < -1065 && parseInt(posi) > -2130) {
slide.style.left = "-2130px"
} else if (parseInt(posi) < -2130 && parseInt(posi) > -3195) {
slide.style.left = "-3195px"
} else if (parseInt(posi) < -3195 && parseInt(posi) > -4260) {
slide.style.left = "0px"
}
} else {
//if判断是否到图片边缘
if (posi === "0px" || posi == "-1065px" || posi == "-2130px" || posi == "-3195px" || posi == "-4260px") {
dolunbo += 1
// swich改变信息，小圆点
switch (posi) {
case "0px":
iofo.innerHTML = "英雄联盟"
for (let j = 0; j < 4; j++) {
oul[j].classList.remove("active")
}
oul[0].classList.add("active")
break
case "-1065px":
iofo.innerHTML = "DOTA"
for (let j = 0; j < 4; j++) {
oul[j].classList.remove("active")
}
oul[1].classList.add("active")
break
case "-2130px":
iofo.innerHTML = "风暴英雄"
for (let j = 0; j < 4; j++) {
oul[j].classList.remove("active")
}
oul[2].classList.add("active")
break
case "-3195px":
iofo.innerHTML = "300英雄"
for (let j = 0; j < 4; j++) {
oul[j].classList.remove("active")
}
oul[3].classList.add("active")
break
}
// 跳回第一张图片
if (posi === "-4260px") {
slide.style.left = "0px"
}
// 现在是图片边缘，进行停顿展示图片，dolunbo不断增加，dolunbo=1000时，移动
if (dolunbo === 1000) {
posi = (parseInt(posi) - 1) + "px"
slide.style.left = posi
dolunbo = 0
}
} else {
// 不是图片边缘，进行移动
posi = (parseInt(posi) - 1) + "px"
slide.style.left = posi
}
}
}, 1)
show.onmouseenter = function () {
stop = "ture"
left.style.display = "block"
right.style.display = "block"
}
show.onmouseleave = function () {
stop = "false"
left.style.display = "none"
right.style.display = "none"
}
left.onclick = function () {
switch (posi) {
case "0px":
slide.style.left = "-3195px"
iofo.innerHTML = "300英雄"
break
case "-1065px":
slide.style.left = "0px"
iofo.innerHTML = "英雄联盟"
break
case "-2130px":
slide.style.left = "-1065px"
iofo.innerHTML = "DOTA"
break
case "-3195px":
slide.style.left = "-2130px"
iofo.innerHTML = "风暴英雄"
break
}
}
right.onclick = function () {
switch (posi) {
case "-2130px":
slide.style.left = "-3195px"
iofo.innerHTML = "300英雄"
break
case "-3195px":
slide.style.left = "0px"
iofo.innerHTML = "英雄联盟"
break
case "0px":
slide.style.left = "-1065px"
iofo.innerHTML = "DOTA"
break
case "-1065px":
slide.style.left = "-2130px"
iofo.innerHTML = "风暴英雄"
break
}
}
var oul = document.documentElement.querySelectorAll("ul li")
var index = ["0px", "-1065px", "-2130px", "-3195px"]
var index_iofo = ["英雄联盟", "DOTA", "风暴英雄", "300英雄"]
for (let k = 0; k < 4; k++) {
oul[k].onclick = function () {
slide.style.left = index[k]
for (let j = 0; j < 4; j++) {
oul[j].classList.remove("active")
}
oul[k].classList.add("active")
iofo.innerHTML = index_iofo[k]
}
}
</script>
</body>
</html>
自动轮播
手动轮播
瀑布流 && 懒加载
- 定义一个加载图片的函数，函数往后面追加图片
- 当触发onscroll事件，判断是否即将到达底部，然后调用加载图片的函数
<!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;
}
.box {
column-count: 6;
}
.box img {
width: 100%;
}
</style>
</head>
<body>
<div class="box" id="box">
</div>
<script>
function add(n) {
var i=0
while (i<n) {
box.innerHTML += `
<div><img src="/1.webp" alt=""></div>
<div><img src="/2.webp" alt=""></div>
<div><img src="/3.webp" alt=""></div>
<div><img src="/4.webp" alt=""></div>`
i++
}
}
add(8)
window.onscroll = function () {
var boxHight = box.offsetHeight
var windowHight = document.documentElement.clientHeight
if (boxHight - (windowHight + document.documentElement.scrollTop)<50) {
add(8)
}
}
</script>
</body>
</html>
伪发送验证码
1.发送按钮点击后，会被禁用；
2.被点击后，按钮里面的内容会变化成1分钟的倒计时;
3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。
- 点击发送按钮时，令disable属性为true，禁用按钮
- 注册间隔定时器，每秒改变按钮倒计时，并判断是否是否为0
- 倒计时为0时，将提交按钮disable属性设为false，提交按钮点击事件为检测输入框的值是否为0505，是则弹窗
<!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>
<body>
<input type="text" name="" id="input">
<button id="btn" disabled>发送</button>
<button id="submit" disabled>提交</button>
<script>
document.getElementById("btn").disabled = false
btn.onclick = function(){
document.getElementById("btn").disabled = true
btn.innerHTML="60"
var t=60
var time1 = setInterval(function(){
btn.innerHTML-=1
t-=1
if(t>0){
}else{
clearInterval(time1)
document.getElementById("submit").disabled = false
}
},1000)
}
submit.onclick = function(){
if(input.value==="0505"){
alert("成功")
}
}
</script>
</body>
</html>
随机点名
- 将名单储存在一个数组中；定义一个随机数函数，用于随机取出数组中的数据
- 开始按钮的点击事件
- 注册间隔定时器，不断生成随机数，并取出数组中的数据，写入页面中
- 给结束按钮绑定点击事件，清除间隔定时器
<!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>
<body>
<input type="text" name="" id="input">
<button id="btn" disabled>发送</button>
<button id="submit" disabled>提交</button>
<script>
document.getElementById("btn").disabled = false
btn.onclick = function(){
document.getElementById("btn").disabled = true
btn.innerHTML="60"
var t=60
var time1 = setInterval(function(){
btn.innerHTML-=1
t-=1
if(t>0){
}else{
clearInterval(time1)
document.getElementById("submit").disabled = false
}
},1000)
}
submit.onclick = function(){
if(input.value==="0505"){
alert("成功")
}
}
</script>
</body>
</html>
随机点名效果
tab选项卡
选项卡的内容重叠，只有有active类的显示，选项卡有active类的有背景色
-
用for循环给每个选项卡的 li 标签绑定点击事件，点击事件为用for循环先清除每个 li 标签的active类，再给指定 li 标签加上active类
在for循环给每个选项卡的 li 标签绑定点击事件时，如果时var定义i，则需要给li标签设置一个自定义属性，因为当for循环结束后，i的值已经是固定的值
如果是let，则不需要设置自定义属性
<!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>
.a{
list-style:none;
width: 2000px;
height: 120px;
}
.a li{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
}
.b{
list-style:none;
width: 2000px;
height: 120px;
position: relative;
}
.b li{
width: 1000px;
height: 100px;
position: absolute;
display: none;
}
.a .active{
background-color: lightblue;
}
.b .active{
display: block;
}
</style>
</head>
<body>
<ul class="a">
<li class="active">英雄联盟</li>
<li>DOTA</li>
<li>风暴英雄</li>
<li>300英雄</li>
</ul>
<ul class="b">
<li class="active">《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。</li>
<li>《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。</li>
<li>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。</li>
<li>《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。</li>
</ul>
<script>
var a_li = document.querySelectorAll(".a li")
var b_li = document.querySelectorAll(".b li")
for(var i =0;i<a_li.length;i++){
// 给每个li标签绑上事件
a_li[i].onclick = toActive
// 给每个li赋index值
a_li[i].dataset.index = i
}
function toActive(){
// 清除每个active
for(var m =0;m<a_li.length;m++){
a_li[m].classList.remove("active")
b_li[m].classList.remove("active")
}
// 给指定加上active
var index = this.dataset.index
a_li[index].classList.add("active")
b_li[index].classList.add("active")
}
</script>
</body>
</html>
选项卡效果
省市区
当省份选择时，判断value值，写入对应的市，
当选择了“----”则将下一级下拉菜单的“----”selected属性为true
<!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>
<body>
<select name="" id="sheng">
<option value="jiangsu">江苏</option>
<option value="guangdong">广东</option>
<option value="quxiao">----</option>
</select>
<select name="" id="shi">
</select>
<select name="" id="qu">
</select>
<script>
sheng.onclick = function () {
if (sheng.value === "guangdong") {
shi.innerHTML = `
<option value="guangzhou" id="guangzhou">广州</option>
<option value="quxiao1" id="quxiao1">----</option>
`
} else if (sheng.value === "jiangsu") {
shi.innerHTML = `
<option value="yangzhou" id="yangzhou">扬州</option>
<option value="quxiao1" id="quxiao1">----</option>
`
} else if (sheng.value === "quxiao") {
quxiao1.selected=true
quxiao2.selected=true
}
}
shi.onclick = function () {
console.log(shi.value)
if (shi.value === "guangzhou") {
qu.innerHTML = `
<option value="tianhe" id="tianhe">天河</option>
<option value="panyu" id="panyu">番禺</option>
<option value="quxiao2" id="quxiao2">----</option>
`
} else if (shi.value === "yangzhou") {
qu.innerHTML = `
<option valuexingjiang id="xingjiang">邗江区</option>
<option value="guangling" id="guangling">广陵区</option>
<option value="quxiao2" id="quxiao2">----</option>
`
} else if(shi.value==="quxiao1"){
quxiao2.selected=true
}
}
</script>
</body>
</html>
效果
动态表格
- 定义一个函数 添加行，该函数先增加内容，再添加删除按钮，并设置删除按钮的内容、自定义属性和点击事件，自定义属性用于判断删除时需删除的行数
- 删除按钮的点击事件，读取自定义属性，删除对应行数和自身，并重新将所有删除按钮的自定义属性设置一遍
- 弹出的添加表单默认隐藏，添加按钮的点击事件将其display设置为true
- 确认添加按钮点击事件，将对应信息传入 添加行 函数参数，调用 添加行 函数，将弹出的添加表单隐藏
<!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>
* {
padding: 0;
margin: 0;
}
tr td {
padding: 10px 30px;
}
table tbody:nth-child(2n) {
background-color: black;
color: white;
}
table tbody:nth-child(2n-1) {
background-color: white;
color: black;
}
#del {
width: 50px;
display: flex;
position: absolute;
top: 0;
left: 878px;
flex-direction: column;
}
button {
width: 50px;
height: 40px;
margin: 2px 0;
}
#add_backgroud {
background-color: #7F7F7F;
opacity: 0.5;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: none;
}
#add {
width: 800px;
height: 120px;
background-color: white;
position: fixed;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -400px;
}
#add input {
width: 95px;
}
</style>
</head>
<body>
<div id="tab">
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>二级学院</td>
<td>班级</td>
<td>专业</td>
<td>辅导员</td>
</tr>
</table>
</div>
<div id="del">
<button id="show">添加</button>
</div>
<div id="add_backgroud">
<div id="add">
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>二级学院</td>
<td>班级</td>
<td>专业</td>
<td>辅导员</td>
</tr>
</table>
<input type="text" id="num1">
<input type="text" id="name1">
<input type="text" id="sex1">
<input type="text" id="college1">
<input type="text" id="class1">
<input type="text" id="zhuanye1">
<input type="text" id="fudaoyuan1">
<button id="addBtn">添加</button>
</div>
</div>
<script>
function addRow(info) {
var otable = document.documentElement.querySelector("table")
otable.innerHTML = otable.innerHTML + `
<tr>
<td>${info.num}</td>
<td>${info.name}</td>
<td>${info.sex}</td>
<td>${info.college}</td>
<td>${info.class}</td>
<td>${info.zhuanye}</td>
<td>${info.fudaoyuan}</td>
</tr>
`
var odel = document.querySelector("#del")
var newDel = document.createElement("button")
newDel.innerHTML = "删除"
var n = document.querySelectorAll("#tab tbody")
newDel.dataset.index = String(n.length - 1)
newDel.onclick = delRow
odel.appendChild(newDel)
}
function delRow(evt) {
alert("确定删除该行内容")
var otbody = document.querySelectorAll("tbody")
var odel = document.querySelector("#del")
otbody[evt.target.dataset.index].remove()
odel.removeChild(evt.target)
odels = document.querySelectorAll("#del button")
for (var i = 1; i < odels.length; i++) {
odels[i].dataset.index = `${i}`
}
}
show.onclick=function(){
add_backgroud.style.display="block"
}
addBtn.onclick = function () {
var newInfo = {
num: "",
name: "",
sex: "",
college: "",
class: "",
zhuanye: "",
fudaoyuan: "",
}
newInfo.num = num1.value
newInfo.name = name1.value
newInfo.sex = sex1.value
newInfo.college = college1.value
newInfo.class = class1.value
newInfo.zhuanye = zhuanye1.value
newInfo.fudaoyuan = fudaoyuan1.value
addRow(newInfo)
add_backgroud.style.display="none"
}
var mes = {
num: "1",
name: "张三",
sex: "男",
college: "计算机工程学院",
class: "232301",
zhuanye: "软件工程",
fudaoyuan: "李四",
}
addRow(mes)
</script>
</body>
</html>
动态表效果
注册表单
- 手机号和qq号应将type设为number，邮箱设为email，密码设为password
- 字符串有length属性，可以判断昵称，名称，手机号等长度
- 密码要求字母和数字的组合，用正则表达式判断 /^(?=.\d)(?=.[a-zA-Z]).{8,16}$/
<!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 {
border: 1px solid black;
margin: 10px auto;
padding: 10px;
}
input {
width: 260px;
}
</style>
</head>
<body>
<div>
<p>昵称</p><input type="text" placeholder="昵称不超过10个字">
<p>姓名</p><input type="text" placeholder="姓名不超过4个字">
<p>QQ</p><input type="number" placeholder="qq为不超过10个位且大于5位的数字">
<p>手机号</p><input type="number" placeholder="手机号为11位数字">
<p>邮箱</p><input type="email" placeholder="请输入邮箱地址">
<p>密码</p><input type="password" placeholder="密码由字母和数字组成且大于8位小于16位">
<p>确认密码</p><input type="password" placeholder="请确认密码" id="">
</div>
<button id="submit">提交</button>
<button id="reset">重置</button>
<script>
var oinput = document.documentElement.querySelectorAll("input")
for (var i = 0; i < 7; i++) {
oinput[i].onclick = function () {
this.setAttribute("placeholder", "")
}
}
reset.onclick = function () {
for (var n = 0; n < 7; n++) {
oinput[n].value = ""
}
}
submit.onclick = function () {
var name1 = oinput[0].value
var name2 = oinput[1].value
var qq = oinput[2].value
var num = oinput[3].value
var mail = oinput[4].value
var password1 = oinput[5].value
var password2 = oinput[6].value
console.log(password1)
if (name1.length<=10){
if(name2.length<=4){
if(qq.length<=10&&qq.length>5){
if(password1.length<16&&password1.length>8){
if(Number(password1)==password1){
alert("密码不能为纯数字")
}else if(password2===password1){
alert("成功")
}else{
alert("密码不相同")
}
}else{
alert("密码输入不合法")
}
}else{
alert("qq输入不合法")
}
}else{
alert("姓名输入不合法")
}
}else{
alert("昵称输入不合法")
}
}
</script>
</body>
</html>
放大镜
放大镜放大2.4倍
- 左边是原图；右边是放大的图片，但是只显示部分
右边放大的图片的尺寸是原图放大倍数，即2.4倍；
原图尺寸/鼠标上的方块尺寸=放大的图片尺寸/显示部分的尺寸，计算显示部分的尺寸 - onmouseenter和onmouseleave事件 控制 显示/隐藏 右边的图片 和 鼠标移动的方块
- 原图触发onmousemove事件时
- 获取鼠标位置并减方块尺寸一半设为方块位置（x，y）
- 改变右边放大图片的位置==>x乘以放大倍数，y乘以放大倍数
<!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: 418px;
height: 247px;
}
#yuan {
width: 418px;
height: 247px;
position: relative;
}
#move {
width: 100px;
height: 100px;
background-color: yellow;
opacity: 0.5;
display: none;
position: absolute;
}
#show {
width: 240px;
height: 240px;
position: absolute;
top: 0;
left: 430px;
display: none;
overflow: hidden;
}
#big_img {
width: 1004px;
height: 593px;
position: absolute;
}
</style>
</head>
<body>
<div id="yuan">
<img src="1.webp" alt="" id="img">
<div id="move"></div>
</div>
<div id="show">
<img src="/1.webp" alt="" id="big_img">
</div>
<script>
yuan.onmouseenter = function () {
move.style.display = "block"
show.style.display = "block"
}
yuan.onmouseleave = function () {
move.style.display = "none"
show.style.display = "none"
}
yuan.onmousemove = function (evt) {
var x = evt.clientX - 50
var y = evt.clientY - 50
if (x < 0) x = 0
if (y < 0) y = 0
if (x >= 318) x = 318
if (y >= 147) y = 147
move.style.left = x + "px"
move.style.top = y + "px"
big_img.style.left = (-x * 2.4) + "px"
big_img.style.top = (-y * 2.4) + "px"
}
</script>
</body>
</html>
放大镜效果
滚动弹幕
面向对象
- 传入的参数为内容，字体大小，字体颜色，
自动调用自身send() - send函数创建节点，设置内容和样式，追加进页面；
滚动：注册间隔延时器，减少left值 - 发送按钮点击事件，获取用户选择的样式，new一个对象
<!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>
* {
padding: 0;
margin: 0;
}
#show {
height: 700px;
position: relative;
}
.send {
width: 1000px;
margin: 0 auto;
}
span {
position: absolute;
left: 1000px;
}
</style>
</head>
<body>
<div id="show"></div>
<div class="send">
<input type="text" id="danmuContent">
<button id="send">发送弹幕</button>
<input type="radio" name="color" id="16px">16px
<input type="radio" name="color" id="20px">20px
<input type="radio" name="fontSize" id="red">red
<input type="radio" name="fontSize" id="yellow">yellow
</div>
<script>
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) + min
}
class danmu {
constructor(content, fontSize, fontColor) {
this.content = content
this.fontSize = fontSize
this.fontColor = fontColor
this.send()
}
send() {
var ospan = document.createElement("span")
ospan.innerHTML = this.content
ospan.style.fontSize = this.fontSize
ospan.style.color = this.fontColor
ospan.style.top = getRandom(0, 650) + "px"
ospan.style.left = "1000px"
show.appendChild(ospan)
setInterval(function () {
if(ospan.style.left==="0px"){
ospan.style.left="1000px"
}else{
ospan.style.left = (parseInt(ospan.style.left) - 1) + "px"
}
}, 1)
}
}
var randomColor = ["red", "yellow", "blue", "black", "green"]
new danmu("我是弹幕", getRandom(16, 20) + "px", randomColor[getRandom(0, 4)])
new danmu("前方高能", getRandom(16, 20) + "px", randomColor[getRandom(0, 4)])
new danmu("666666", getRandom(16, 20) + "px", randomColor[getRandom(0, 4)])
send.onclick = function(){
var choose = document.documentElement.querySelectorAll("input")
var userColor = ""
var userSize = ""
if (choose[1].checked){
userSize = "16px"
}else{
userSize = "20px"
}
if(choose[3].checked){
userColor="red"
}else{
userColor="yellow"
}
new danmu(danmuContent.value,userSize,userColor)
}
</script>
</body>
</html>
滚动弹幕
时钟
- 用三个div充当三个指针，transform-origin调整转动中心，js控制transform转动
- 注册间隔定时器，间隔1000，获取当前时间，写入页面
- 分秒都为60刻度 对应360度，即每1秒/1分转过6度
- 时为12个刻度，对应360度，即1时/30度
<!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>
#shi{
position: absolute;
top: 161px;
left:248px;
width: 10px;
height: 100px;
background-color: black;
transform-origin: center bottom;
}
#fen{
position: absolute;
top: 61px;
left:251px;
width: 5px;
height: 200px;
background-color: black;
transform-origin: center bottom;
}
#miao{
position: absolute;
top: 61px;
left:253px;
width: 2px;
height: 200px;
background-color: black;
transform-origin: center bottom;
}
</style>
</head>
<body>
<img src="/5.jpg" alt="">
<div id="shi"></div>
<div id="fen"></div>
<div id="miao"></div>
<p id="timeP"></p>
<script>
var timer = setInterval(function(){
var time = new Date()
var year = time.getFullYear()
var month = time.getMonth()
var day = time.getDate()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
timeP.innerHTML=`${year}-${month}-${day} ${hour}:${minute}:${second}`
var newSecond = second*6
var newMinute = minute*6
var newHour = hour*30
miao.style.transform=`rotate(${newSecond}deg)`
fen.style.transform=`rotate(${newMinute}deg)`
shi.style.transform=`rotate(${newHour}deg)`
},1000)
</script>
</body>
</html>
时钟效果
