WEB Js作业

最新推荐文章于 2024-07-18 15:48:23 发布

不想飞翔的小鸟

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量887

点赞数 7

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/2301_77300113/article/details/137999880

版权

1.名单点名

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin-left: 0px;

margin-top: 0px;

}

.container{

width:800px;

height: 600px;

position: absolute;

left: 50%;

margin-left: -400px;

text-align: center;

line-height: 100px;

}

.box,.box2{

width:300px;

height: 300px;

background-color: rgb(35, 227, 112);

border-radius: 50%;

/*水平位置居中 */

margin: auto;

margin-top: 50px;

text-align: center;

line-height: 300px;

}

.box2{

background-color: rgb(193, 235, 68);

}

#show{

font-size: 30px;

color:□white;

font-weight: bold;

}

#start{

width: 300px;

height: 50px;

border-radius: 30px;

background-color: aqua;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

//标志位

var flag=false

//定义名单内容

var awards=["张三","李四","王五","赵六","刘七"]

//2.获取对应dom对象

var box=document.getElementById("box")

var show=document.getElementById("show")

var start=document.getElementById("start")

//3.定义定时器---姓名切换

var timer

//4.点击事件触发

function change(){

if(!flag){

flag=true

start.innerHTML="停止点名"

timer=setInterval(function(){

//获取匹配名单数组的索引随机数

let index=Math.floor(Math.random()*awards.length)

show.innerHTML=awards[index]

box.setAttribute("class","box2")

},150)

}

else{

flag=false

start.innerHTML="开始点名"

clearInterval(timer)

box.setAttribute("class","box")

}

</script>

效果图：

2.秒表计时器

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

.a{

background-image: url(../../01.html/04.图片音频视频标签/幸运星.png);

width: 900px;

height: 550px;

position:absolute;

left: 50%;

margin-left: -400px;

text-align: center;

line-height: 100px;

background-size: 900px 550px;

border-radius: 100px;

}

#showTime

{

margin-top: 250px;

margin-left: 550px;

color: rgb(1, 7, 12);

text-align: center;

width: 300px;

height: 60px;

font-size: 60px;

}

#startBn{

margin-top: 60px;

margin-left: 450px;

width: 60px;

height: 30px;

}

#restBn{

width: 60px;

height: 30px;

}

</style>

</head>

<body>

</div>

//——————

var time,showTime,startBn,restBn,pauseDate;

//布尔开关

var bool=false;

//暂停的累计时间

var pauseTime=0;

init();

function init() {

showTime=document.getElementById("showTime");

startBn=document.getElementById("startBn");

restBn=document.getElementById("restBn");

startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮

restBn.addEventListener("click",clickHandler);//复位按钮

setInterval(animation,16);

}

//转化时间函数

function animation() {

if(!bool) return;

//前时间减去上次开启时间减去暂停累计时间

var times=new Date().getTime()-time-pauseTime;

var minutes=Math.floor(times/60000);//毫秒转化为分钟

var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟

// 将time减去分钟除去1000得出秒

var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//

showTime.innerHTML=

(minutes<10 ? "0" +minutes : minutes)+":"

+(seconds<10 ? "0"+seconds :seconds)+":"

+(ms<10 ? "0"+ms : ms);

}

//点击时的事件

function clickHandler(e) {

e= e || window.event;

if(this===startBn){

bool=!bool;

if(bool){

this.innerHTML="暂停";

//如果我们上一次暂停时间是空，表示没有暂停过，因此，直接返回0

//如果上次的暂停时间是有值得，用当前毫秒数减去上次的毫秒数，这样就会得到暂停时间

pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);

if(time) return;

time=new Date().getTime();

return;//是为bool判断跳出

}

this.innerHTML="启动";

pauseDate=new Date().getTime();

return;//是为this是否等于startBn判断跳出

}

startBn.innerHTML="启动";

pauseTime=0;

pauseDate=null;

bool=false;

time=0;

showTime.innerHTML="00:00:00";

}

</script>

</body>

</html>

效果图：

不想飞翔的小鸟

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
WEB Js作业

点名</button>var awards=["张三","李四","王五","赵六","刘七"]<button id="startBn">启动</button><button id="restBn">复位名单
复制链接

扫一扫

WEB Js作业

“相关推荐”对你有帮助么？