js小案例
一.js实现倒计时
<!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>Document</title>
<style>
#box{width:200px;height:200px;margin: 30px auto;border: solid 1px black;text-align:center;line-height: 200px;font-size: 40px}
#btn{width:200px;height:40px;display: block;margin:0 auto}
</style>
</head>
<body>
<div id="box">
10
</div>
<input type="button" value="开始" id="btn">
</body>
<script>
// 倒计时，从10到0，停止，//点击按钮还原倒计时，到0，再停-----------------------点击，再还原
var obox = document.getElementById("box");
var obtn = document.getElementById("btn");
var start = obox.innerHTML;
var num = obox.innerHTML;
var t;
// 1.开关：表示多次点击时，每次要做的事情不一样
var onoff = 0;
obtn.onclick = function(){
// 2.每次点击之前，先判断状态，决定要执行的功能
if(onoff == 0){
clearInterval(t);
t = setInterval(function(){
// 6.计时器每次执行都要判断是否结束
if(num == 1){
// 如果结束，设置内容，设置按钮，改变状态，清除计时器
num = "结束了";
obtn.value = "复位";
onoff = 2;
clearInterval(t);
}else{
num--;
}
obox.innerHTML = num;
}, 1000);
// 3.开始功能做完之后，把状态修改成下次的功能
obtn.value = "暂停";
onoff = 1;
}else if(onoff == 1){ //4.如果不是开始的功能，那么有可能是停止功能
clearInterval(t);
// 5.停止功能做完之后，把状态修改成下次的功能
obtn.value = "继续";
onoff = 0;
}else if(onoff == 2){ //7.如果不是开始和暂停的功能，那么有可能是复位功能
// 复位显示的数字，计算的数字，按钮的文字，功能的状态
obox.innerHTML = start;
num = start;
obtn.value = "开始";
onoff = 0;
}
}
</script>
</html>
二.js实现简单的进度条
<!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>Document</title> <style> .box{width:400px;height:200px;border: solid 1px black;margin: 20px auto;position: relative;} .box p{margin: 0;position: absolute;left: 0;top: 90px;height:20px;background: blue;width: 0;line-height: 20px;text-align: center;color: #fff} .cont{width:200px;height:200px;background: #ccc;display: none} </style> </head> <body> <div class="box"> <p> <span>0%</span> </p> </div> </body> <script> var op = document.querySelector(".box p"); var ospan = document.querySelector(".box span"); // 设置初始宽度 var w = 0; var t = null; // 设置目标 var target = 400; // 设置步长 var speed = 3; // 开启计时器 t = setInterval(function(){ // 判断剩下的距离是否够一步，不够就停止，并强行拉到目标 if(target - w < speed){ clearInterval(t) op.style.width = target + "px"; ospan.innerHTML = "100%"; }else{ //否则就正常增加，并计算百分比 w += speed; ospan.innerHTML = parseInt(w / target * 100 )+ "%"; op.style.width = w + "px"; } }, 30); </script> </html>
三.悬浮框返回顶部
<!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>Document</title>
</head>
<style>
.box{width: 100px;
height:50px;
background: aqua;
position: absolute;
right: 0;
top: 400px;
line-height: 50px;
text-align: center;
}
</style>
<script>
onload = function(){
var oBox = document.querySelector(".box");
var oBoxT = 400;
onscroll = function(){
var scrollT = document.documentElement.scrollTop;
oBox.style.top = oBoxT +scrollT+"px";
}
var t;
oBox.onclick = function(){
clearInterval(t);
t = setInterval(() => {
if(document.documentElement.scrollTop<=0){
clearInterval(t);
}else{
document.documentElement.scrollTop -=100;
}
}, 30);
}
}
</script>
<body>
<div class="box">回到顶部</div>
<h2>白日依山尽</h2>
<h2>黄河入海流</h2>
<h2>欲穷千里目</h2>
<h2>黄河入海流</h2>
<h2>床前明月光</h2>
<h2>疑是地上霜</h2>
<h2>抬头望明月</h2>
<h2>低头思故乡</h2>
<h2>对酒当歌</h2>
<h2>人生几何</h2>
<h2>譬如朝露</h2>
<h2>去日苦多</h2>
<h2>慨当以慷</h2>
<h2>忧思难忘</h2>
<h2>何以解忧 </h2>
<h2>唯有杜康</h2>
<h2>青青子衿</h2>
<h2>悠悠我心</h2>
<h2>但为君故</h2>
<h2>沉吟至今</h2>
<h2>呦呦鹿鸣</h2>
<h2>食野之苹</h2>
<h2>我有嘉宾</h2>
<h2>鼓瑟吹笙</h2>
<h2>明明如月</h2>
<h2>何时可掇</h2>
<h2>忧从中来</h2>
<h2>不可断绝</h2>
<h2>越陌度阡</h2>
<h2>枉用相存</h2>
<h2>契阔谈䜩</h2>
<h2>心念旧恩</h2>
<h2>月明星稀</h2>
<h2>乌鹊南飞</h2>
<h2>绕树三匝</h2>
<h2>何枝可依</h2>
<h2>山不厌高</h2>
<h2>海不厌深</h2>
<h2>周公吐哺</h2>
<h2>天下归心</h2>
<h2>东临碣石</h2>
<h2>以观沧海</h2>
<h2>水何澹澹</h2>
<h2>山岛竦峙</h2>
<h2>树木丛生</h2>
<h2>百草丰茂</h2>
<h2>秋风萧瑟</h2>
<h2>洪波涌起</h2>
<h2>日月之行</h2>
<h2>若出其中</h2>
<h2>星汉灿烂</h2>
<h2>若出其里</h2>
<h2>幸甚至哉</h2>
<h2>歌以咏志</h2>
</body>
</html>
