页面返回顶部
需求
代码
<!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>
body {
height: 2000px;
}
#dut {
position: fixed;
bottom: 0px;
right: 0px;
display: none;
}
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button id="dut">回到首页</button>
<script>
window.onscroll = scrollFunction
function scrollFunction() {
if (document.documentElement.scrollTop > 600 ) {
document.getElementById("dut").style.display = "block"
} else {
document.getElementById("dut").style.display = "none"
}
}
dut.onclick = function () {
window.scrollTo({
top: 0,
left: 0
})
}
</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>
<style>
* {
margin: 0px;
padding: 0px;
}
.banner {
background-color: aqua;
width: 600px;
height: 350px;
border: 10px solid yellow;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.banner>ul {
list-style: none;
position: absolute;
}
.imgList img {
width: 600px;
height: 350px;
}
.imgList li {
float: left;
margin-right: 20px;
}
.circle {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
.circle a {
width: 15px;
height: 15px;
background-color: yellow;
display: block;
border-radius: 50%;
opacity: .5;
float: left;
margin-right: 5px;
}
.circle a.hover {
background-color: black;
opacity: .8;
}
</style>
</head>
<body>
<div class="banner">
<ul class="imgList">
<li><img src=" https://i1.mifile.cn/a1/pms_1552647865.67536173!220x220.jpg" alt=""></li>
<li><img src=" https://i1.mifile.cn/a1/pms_1540429613.4617799!220x220.jpg" alt=""></li>
<li><img src=" https://i1.mifile.cn/a1/pms_1552647865.67536173!220x220.jpg" alt=""></li>
<li><img src=" https://i1.mifile.cn/a1/pms_1540429613.4617799!220x220.jpg" alt=""></li>
</ul>
<div class="circle">
</div>
</div>
<script>
window.onload = function () {
var imgList = document.querySelector('.imgList');
var circle = document.querySelector('.circle');
var thisIndex = 0;
var imgListLi = imgList.children;
var circleA = circle.children;
var flag = true;
imgList.style.width = imgList.children.length * 620 + 'px';
for (var i = 0; i < imgList.children.length; i++) {
var aNode = document.createElement('a');
aNode.setAttribute('index', i);
if (i == 0) {
aNode.className = 'hover';
}
circle.appendChild(aNode)
}
circle.addEventListener('click', function (e) {
if (flag) {
flag = false;
if (e.target.nodeName != 'A') {
return false;
}
thisIndex = e.target.getAttribute('index');
slow(imgList, -thisIndex * 620, function () {
flag = true;
});
circleChange();
}
})
function antoChange() {
setInterval(function () {
if (flag) {
flag = false;
if (thisIndex >= circleA.length) {
thisIndex = 0;
}
slow(imgList, -thisIndex * 620, function () {
flag = true;
});
circleChange();
thisIndex++;
}
}, 3000);
}
function circleChange() {
for (var i = 0; i < circleA.length; i++) {
circleA[i].className = '';
}
circleA[thisIndex].className = 'hover';
}
function slow(obj, target, callback) {
obj.myInter = setInterval(function () {
var offsetLeft = obj.offsetLeft;
var num = (target - offsetLeft) / 10;
num > 0 ? num = Math.ceil(num) : num = Math.floor(num);
if (offsetLeft == target) {
clearInterval(obj.myInter);
callback && callback();
} else {
obj.style.left = offsetLeft + num + 'px';
}
}, 10)
}
antoChange();
}
</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>
<style>
* {
margin: 0px;
padding: 0px;
}
.contant {
width: 100%;
height: 1000px;
}
.box {
float: left;
border: 1px solid #ccc;
padding: 10px;
}
.contant>div>img {
width: 100px;
}
</style>
<body>
<div class="contant">
<div class="box">
<img src=" https://i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15632723287643_WkFwH.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15627554640413_IzfaO.jpg " alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15632723287643_WkFwH.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15627554640413_IzfaO.jpg " alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15632723287643_WkFwH.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15627554640413_IzfaO.jpg " alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15632723287643_WkFwH.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15627554640413_IzfaO.jpg " alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15632723287643_WkFwH.jpg" alt="">
</div>
<div class="box">
<img src=" https://i1.mifile.cn/a4/xmad_15627554640413_IzfaO.jpg " alt="">
</div>
</div>
<script>
window.onload = function () {
var contant = document.getElementsByClassName("contant")[0];
var contantWidth = contant.offsetWidth
var imgs = contant.children
var imgsWidht = imgs[0].offsetWidth
var nums = Math.floor(contantWidth / imgsWidht)
console.log(nums)
var arrHeight = []
for (var i = 0; i < imgs.length; i++) {
if (i < nums) {
arrHeight.push(imgs[i].offsetHeight)
}
else {
var obj = {
minH: arrHeight[0],
minI: 0
}
for (var j = 0; j < arrHeight.length; j++)
if (arrHeight[j] < obj.minH) {
obj.minH = arrHeight[j],
obj.minI = j
}
console.log(obj)
imgs[i].style.position = "absolute"
imgs[i].style.left = imgs[obj.minI].offsetLeft + "px"
imgs[i].style.top = obj.minH + "px"
arrHeight[obj.minI] = arrHeight[obj.minI] + imgs[i].offsetHeight
}
}
}
</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>
<div class="input-box">
<input type="text" id="yb" placeholder="验证码">
<button>发送短信</button>
<input type="submit" id="check">
</div>
<script>
const seconds = 60
var delay = seconds
let timer = null
var btn = document.querySelector("button")
var btn1 = document.getElementById('check')
btn1.disabled = true
btn.onclick = function () {
btn.disabled = true
timer = setInterval(fn(), 1000)
alert("验证码是：5050")
}
const sum = 5050
// console.log(sum);
document.getElementById('check').onclick = function () {
var inputCode = document.getElementById('yb').value;
console.log(inputCode);
if (inputCode != sum) {
alert('验证码输入不正确,请重新输入');
} else {
alert('验证成功');
}
}
function fn() {
if (delay != 0) {
btn.innerHTML = `${delay}s`
btn.style.backgroundColor = "#999"
delay--
} else {
clearInterval(timer)
btn.innerHTML = `发送短信`
btn.style.backgroundColor = "#fff"
delay = seconds
btn.disabled = false
}
btn1.disabled = false
return fn
}
</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>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
margin: 0 auto;
width: 200px;
height: 200px;
}
#btn1 {
float: left;
}
#btn2 {
float: right;
}
#show {
color: red;
font-size: larger;
background-color: aqua;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div id="show">
随机点名
</div>
<div>
<button id="btn1">开始滚动</button>
<button id="btn2">停止滚动</button>
</div>
<script>
window.onload=function(){
var show = document.getElementById("show")
var people = ["李超","孙昊扬","谭耀","李炫宇","王帆","姜宏瑞","杨辰曦","杨宇峰","张译","王维康","杨志","裴昊悦"]
var randomName;
var arr;
btn1.onclick = function() {
arr = setInterval(function () {
randomName = Math.floor(Math.random() * people.length)
show.innerHTML = people[randomName]
}, 50)
}
btn2.onclick = function () {
clearInterval(arr);
}
}
</script>
</body>
</html>
Tap选择卡
需求
效果图
代码
<!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: 0px;
padding: 0px;
}
.tab {
width: 408px;
height: 400px;
margin: auto;
background-color: aqua;
}
.item {
width: 100px;
height: 40px;
text-align: center;
color: black;
line-height: 40px;
float: left;
background-color: #bbb;
border: 1px solid black;
}
ul {
list-style: none;
float: left;
}
ul>li {
color: black;
text-align: center;
margin-top: 100px;
display: none;
}
content li {
width: 408px;
height: 360px;
background-color: #999;
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="item">英雄联盟</div>
<div class="item">DOTA</div>
<div class="item">风暴英雄</div>
<div class="item">300英雄</div>
<ul class="content">
<li>《英雄联盟》（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>
</div>
<script>
var item = document.getElementsByClassName("item")
var Li = document.getElementsByTagName("li")
item[0].style.backgroundColor = "orange"
Li[0].style.display = "block"
for (let i = 0; i < item.length; i++) {
item[i].onclick = function () {
for(let j = 0 ; j<item.length;j++){
item[j].style.backgroundColor = "#999"
Li[j].style.display = "none"
}
item[i].style.backgroundColor = "orange"
Li[i].style.display = "block"
}
}
</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>
<style>
* {
margin: 0px;
padding: 0px;
}
select {
width: 100px;
height: 25px;
text-align: center;
margin-right: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<select id="province">省
<option value="">请选择 - - -</option>
</select>
<select name="" id="city">市
<option value="">请选择 - - -</option>
</select>
<select name="" id="region">区
<option value="">请选择 - - -</option>
</select>
<script>
window.onload = function () {
var province = document.getElementById("province")
var city = document.getElementById("city")
var region = document.getElementById("region")
var proIndex = -1
var provincearr = ["山东", "江苏"]
var cityarr = [["济南省", "青岛市", "淄博市", "枣庄市"], ["上饶", "南昌", "景德镇"]]
var regionArr = [[["历下区", "市中区", "天桥区"], ["市南区", "黄岛区", "胶州区"], ["淄川区", "张店区", "博山区"], ["薛城区", "台儿庄区", "山亭区"]], [["乐平市", "昌江区"], ["鄱阳县", "广信区"], ["西湖区", "东湖区"]]]
for (var i = 0; i < provincearr.length; i++) {
var option = document.createElement("option")
province.appendChild(option)
option.innerHTML = provincearr[i]
city.disabled = true
region.disabled = true
}
province.onchange = function () {
city.length = 1
region.length = 1
city.disabled = false
proIndex = this.selectedIndex - 1
if (proIndex > -1) {
for (var m = 0; m < cityarr[proIndex].length; m++) {
var option = document.createElement("option")
city.appendChild(option)
option.innerHTML = cityarr[proIndex][m]
}
}
}
city.onchange = function () {
region.options.length = 1
region.disabled = false
var cityIndex = this.selectedIndex - 1
if (cityIndex > -1) {
for (var i = 0; i < regionArr[proIndex][cityIndex].length; i++) {
var option = document.createElement("option")
region.appendChild(option)
option.innerHTML = regionArr[proIndex][cityIndex][i]
}
}
}
}
</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>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 260px;
height: 300px;
background-color: aqua;
padding-top: 80px;
display: none;
position: absolute;
top: 200px;
left: 500px;
}
#lr {
margin-left: 500px;
}
.box>div {
float: left;
}
.box>button {
float: left;
margin-left: 100px;
margin-top: 20px;
}
.box>input {
float: right;
}
table {
width: 1200px;
border: 1px solid black;
}
table tr {
width: 1200px;
height: 20px;
}
table td {
border: 1px solid black;
text-align: center;
}
.sc1 {
float: right;
}
.tb1 {
background-color: aqua;
}
.tb2 {
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box">
<div> 学号： <input type="text" placeholder="请输入学号" id="xh"></div>
<div> 姓名： <input type="text" placeholder="请输入姓名" id="xm"></div>
<div> 性别：<input type="text" placeholder="请输入性别" id="xb"></div>
<div> 二级学院：<input type="text" placeholder="二级学院" id="xy"></div>
<div> 班级：<input type="text" placeholder="请输入班级" id="bj"></div>
<div> 专业：<input type="text" placeholder="请输入专业" id="zy"></div>
<div> 辅导员：<input type="text" placeholder="请输入辅导员" id="fdy"></div>
<button id="btn"> 添加</button>
</div>
<button id="lr"> 录入</button>
<div></div>
<table id="bg">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>二级学院</td>
<td>班级</td>
<td>专业</td>
<td>辅导员</td>
</tr>
</table>
<script>
window.onload = function () {
var box = document.querySelector(".box")
var xh = document.querySelector("#xh")
var xm = document.querySelector("#xm")
var xb = document.querySelector("#xb")
var xy = document.querySelector("#xy")
var bj = document.querySelector("#bj")
var zy = document.querySelector("#zy")
var fdy = document.querySelector("#fdy")
var bg = document.querySelector("#bg")
var btn = document.querySelector("#btn")
var lr = document.querySelector("#lr")
lr.onclick = function () {
box.style.display = "block"
}
btn.onclick = function () {
if (xh.value == "" || xm.value == "" || xb.value == "" || xy.value == "" || bj.value == "" || zy.value == "" || fdy.value == "")
alert("请输入信息")
var newtr = document.createElement("tr")
bg.appendChild(newtr)
var td1 = document.createElement('td')
var td2 = document.createElement('td')
var td3 = document.createElement('td')
var td4 = document.createElement('td')
var td5 = document.createElement('td')
var td6 = document.createElement('td')
var td7 = document.createElement('td')
td1.innerHTML = xh.value
td2.innerHTML = xm.value
td3.innerHTML = xb.value
td4.innerHTML = xy.value
td5.innerHTML = bj.value
td6.innerHTML = zy.value
td7.innerHTML = fdy.value + " <button class = 'sc1'>删除</button> "
newtr.appendChild(td1)
newtr.appendChild(td2)
newtr.appendChild(td3)
newtr.appendChild(td4)
newtr.appendChild(td5)
newtr.appendChild(td6)
newtr.appendChild(td7)
var del = document.querySelectorAll("button")
if (del.length % 2 != 0) {
td1.className = "tb1"
td2.className = "tb1"
td3.className = "tb1"
td4.className = "tb1"
td5.className = "tb1"
td6.className = "tb1"
td7.className = "tb1"
} else {
td1.className = "tb2"
td2.className = "tb2"
td3.className = "tb2"
td4.className = "tb2"
td5.className = "tb2"
td6.className = "tb2"
td7.className = "tb2"
}
for (var i = 2; i < del.length; i++) {
del[i].onclick = function () {
bg.removeChild(this.parentNode.parentNode)
}
}
box.style.display = "none"
}
}
</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>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
width: 400px;
height: 8px;
}
.kj {
color: red;
}
</style>
<body>
<div>
昵称： <input type="text" placeholder="请输入昵称：" id="k1" value="">
<div class="kj1 kj">不超过十个字</div><br>
姓名： <input type="text" placeholder="请输入姓名：" id="k2" value="">
<div class="kj2 kj">不超过四个字</div><br>
QQ: <input type="text" placeholder="请输入QQ号:" id="k3" value="">
<div class="kj3 kj">小于等于10大于5的数字</div> <br>
手机号： <input type="text" placeholder="请输入手机号：" id="k4" value="">
<div class="kj4 kj">11位的数字</div><br>
邮箱： <input type="text" placeholder="请输入邮箱：" id="k5" value="">
<div class="kj5 kj"> </div><br>
密码： <input type="password" placeholder="请输入密码：" id="k6" value="">
<div class="kj6 kj">由大于8小于16位的数字和字母组成</div> <br>
确认密码： <input type="password" placeholder="请确认密码：" id="k7" value=""><br>
<button id="btn1">提交</button>
<button id="btn2">重置</button>
</div>
<script>
window.onload = function () {
var nicheng = document.querySelector("#k1")
var name = document.querySelector("#k2")
var QQ = document.querySelector("#k3")
var phone = document.querySelector("#k4")
var email = document.querySelector("#k5")
var mima = document.querySelector("#k6")
var qrmima = document.querySelector("#k7")
var btn1 = document.querySelector("#btn1")
var btn2 = document.querySelector("#btn2")
console.log(QQ.value, mima)
btn1.onclick = function () {
var ncvalue = nicheng.value
var namevalue = name.value
var mima1 = mima.value
var mima2 = qrmima.value
console.log(ncvalue)
if (ncvalue.length > 10) {
alert("昵称的字数不得超过十个字")
nicheng.value = ""
}
if (namevalue.length > 4) {
alert("姓名的字数不得超过4个字")
name.value = ""
}
var jcmima = /\w\d/
if (jcmima.test(mima1) == false && mima1 != 0) {
alert("QQ号的密码是由字母和数字组成的")
mima.value = ""
}
if (16 < mima1.length && 0 < mima1.length < 8 && mima1.length != 0) {
alert("密码的长度为大于8小于16的数")
mima.value = ""
}
if (mima1 != mima2) {
alert("再次输入的密码与原密码不同")
qrmima.value = ""
}
var QQvalue = QQ.value
var jcQQ = /\w{6,10}/
if (jcQQ.test(QQvalue) == false && QQvalue != 0) {
alert("QQ号的长度为小于等于1大于5的数")
QQ.value = ""
}
var phonevalue = phone.value
var jcphone = /\d{11}/
if (jcphone.test(phonevalue) == false && phonevalue != 0) {
alert("手机号的长度为11个数")
phone.value = ""
}
}
var kj1 = document.querySelector(".kj1")
var kj2 = document.querySelector(".kj2")
var kj3 = document.querySelector(".kj3")
var kj4 = document.querySelector(".kj4")
var kj5 = document.querySelector(".kj5")
var kj6 = document.querySelector(".kj6")
k1.onclick = function () {
kj1.style.display = "none"
}
k2.onclick = function () {
kj2.style.display = "none"
}
k3.onclick = function () {
kj3.style.display = "none"
}
k4.onclick = function () {
kj4.style.display = "none"
}
k5.onclick = function () {
kj5.style.display = "none"
}
k6.onclick = function () {
kj6.style.display = "none"
}
btn2.onclick = function(){
nicheng.value = ""
name.value = ""
QQ.value = ""
phone.value = ""
email.value = ""
mima.value = ""
qrmima.value = ""
}
}
</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>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 350px;
height: 350px;
position: relative;
border: 1px solid black;
}
.box>img {
width: 100%;
height: 100%;
}
.yellowk {
background-color: yellow;
width: 150px;
height: 150px;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
display: none;
border: 1px solid black;
}
.big {
overflow: hidden;
width: 500px;
height: 500px;
border: 1px solid black;
position: absolute;
left: 360px;
top: 0px;
}
.big>img {
position: absolute;
top: 0px;
left: 0px;
width: 1200px;
height: 1200px;
}
</style>
</head>
<body>
<div class="box">
<img src="https://i1.mifile.cn/a1/pms_1552647865.67536173!220x220.jpg" alt="">
<div class="yellowk"></div>
</div>
<div class="big">
<img src="https://i1.mifile.cn/a1/pms_1552647865.67536173!220x220.jpg" alt="">
</div>
<script>
window.onload = function () {
var box = document.querySelector(".box")
var yellowk = document.querySelector(".yellowk")
var big = document.querySelector(".big")
var simg = document.querySelector(".box>img")
box.onmouseover = function () {
yellowk.style.display = "block"
}
box.onmouseout = function () {
yellowk.style.display = "none"
}
box.onmousemove = function(e){
var x = e.pageX
var y = e.pageY
// console.log(x,y)
var width = x - yellowk.offsetWidth / 2
var height = y - yellowk.offsetHeight / 2
// console.log(width,height)
if(width<=0){
width = 0
} else if(width >= box.offsetWidth-yellowk.offsetWidth){
width = 200
}
if(height <= 0){
height = 0
}else if (height >= box.offsetHeight - yellowk.offsetHeight){
height = 200
}
yellowk.style.left = width + "px"
yellowk.style.top = height + "px"
var bimg = document.querySelector(".big>img")
var bwidth = width * (bimg.offsetWidth / simg.offsetWidth)
var bheight = height * (bimg.offsetHeight / simg.offsetHeight)
bimg.style.left = - bwidth + "px"
bimg.style.top = - bheight + "px"
}
}
</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>
<style>
* {
margin: 0px;
padding: 0px;
}
.top {
width: 100%;
height: 300px;
background-color:aqua;
}
.botton {
width: 100%;
height: 100px;
background-color: aquamarine;
}
input {
margin-left: 38%;
width: 300px;
}
span {
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div class="top">
</div>
<div class="bottom">
<input type="text" placeholder="发弹幕">
<button>
发送
</button>
</div>
<script>
window.onload = function () {
var Color = ["red", "yellow", "blue", "green", "pink", "black", "aqua", "peru", "salmon", "purple"]
var Size = ["14px", "16px", "18px", "25px", "20px", "22px"]
var but = document.querySelector("button")
var top = document.querySelector(".top")
var input = document.querySelector("input")
but.onclick = function () {
var span = document.createElement("span")
top.appendChild(span)
span.innerHTML = input.value
span.style.fontSize = Size[Math.round(Math.random() * Size.length)]
span.style.color = Color[Math.round(Math.random() * Color.length)]
span.style.top = Math.round(Math.random() * 200) + "px"
var step = 0
var timer = setInterval(function () {
step++
span.style.left = step + "px"
var move = span.offsetLeft + span.clientWidth
if (move - window.innerWidth == 20) {
clearInterval(timer)
top.removeChild(span)
}
}, 25)
}
}
</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>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.clock {
width: 300px;
height: 300px;
background-color: gray;
border: 1px solid black;
border-radius: 50%;
position: relative;
margin: 0 auto;
}
#hour,
#minu,
#second {
position: absolute;
left: 50%;
top: 50%;
background-color: #000;
transform-origin: center bottom;
}
#hour {
width: 6px;
height: 40px;
margin: -40px 0 0 -3px;
}
#minu {
width: 4px;
height: 65px;
margin: -65px 0 0 -2px;
}
#second {
width: 2px;
height: 100px;
margin: -100px 0 0 -1px;
}
#ball {
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
background-color: black;
transform: translate(-50%, -50%);
}
ul {
position: relative;
height: 100%;
width: 100%;
}
li {
width: 2px;
height: 8px;
background-color: #000;
position: absolute;
left: 50%;
top: 0;
transform-origin: center 150px;
}
#word {
text-align: center;
font-size: 50px;
color: #000;
}
</style>
</head>
<body>
<div class="clock">
<ul>
<li></li>
</ul>
<div id="hour"></div>
<div id="minu"></div>
<div id="second"></div>
<div id="ball"></div>
</div>
<div id="word"></div>
<script>
var ul = document.querySelector("ul")
for (var i = 0; i < 60; i++) {
var li = document.createElement("li")
li.style.transform = 'rotate(' + i * 6 + 'deg)'
if (i % 5 == 0) {
li.style.height = "18px"
}
ul.appendChild(li)
}
var hour = document.getElementById("hour")
var minu = document.getElementById("minu")
var second = document.getElementById("second")
function active() {
var date = new Date()
var Hour = date.getHours()
var Minu = date.getMinutes()
var miao = date.getSeconds()
console.log(Hour, Minu, miao)
hour.style.transform = 'rotate(' + (Hour * 30 + Minu / 3) + 'deg)'
minu.style.transform = 'rotate(' + Minu * 6 + 'deg)';
second.style.transform = 'rotate(' + miao * 6 + 'deg)';
}
active()
setInterval(active, 1000)
var clock = document.getElementById("clock")
var word = document.getElementById("word")
function wordTime(date) {
var sub = date.getTime() / 1000
var hours = parseInt(sub % (60 * 60 * 24) / (60 * 60)) + 8
var minutes = parseInt(sub % (60 * 60) / 60)
var miaos = parseInt(sub % 60)
if (hours < 10) {
hours = "0" + hours
}
if (minutes < 10) {
minutes = "0" + minutes
}
if (miaos < 10) {
miaos = "0" + miaos
}
let obj = {
hours: hours,
minute: minutes,
miaos: miaos,
}
return obj
}
setInterval(function () {
var date = new Date()
var reset = wordTime(date)
word.innerHTML = `现在是北京时间：${reset.hours}:${reset.minute}:${reset.miaos}`
}, 1000)
</script>
</body>
</html>
