web前端：利用js实现随机点名和秒表计数器

最新推荐文章于 2024-06-26 09:38:42 发布

葵因lemon

最新推荐文章于 2024-06-26 09:38:42 发布

阅读量242

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_76862126/article/details/134745761

版权

一、结合抽奖案例完成随机点名程序，要求如下:
1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名
3.样式请参考css及html自由发挥完成。


<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title>
<style>
*{
 margin-left: 0px;
 margin-top: 0px;
 }
.container{
 width: 600px;
 height: 600px;
border: 1px solid yellow;
 position: absolute;
 left: 50%;
 margin-left: -400px;
 text-align: center;
 line-height: 100px;

 }
 .box,.box2{
 width: 300px;
 height: 300px;
 background-color: pink;
 margin: auto;/*水平距离的居中*/
 margin-top: 50px;
line-height: 300px;
 }
 .box2{
background-color: aqua;
 }
 #show{
font-size: 30px;
 color: aliceblue;
 font-weight: bold;
} #start{
 width: 300px;
 height: 50px;
 background-color:aquamarine ;
 }
</style>
</head>
<body>
<div class="container">
<div class="box" id="box">
<span id="show">姓名</span>
 </div>
 <button id="start" onclick="change()">点名</button>
 </div>
</body>
</html>

<script>
 //标志位
 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")
 },10)
 }  else{
        flag=false
        start.innerHTML="开始点名"
        clearInterval(timer)
        box.setAttribute("class","box")
 }
 }
</script>

二、使用js及html、css完成秒表计时器，要求如下:
1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时，
3.点击暂停，面板停止
4.点击重置，计时面板重新为0
提示：采用定时器及定义计数器变量完成，定时器间隔为1s

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>秒表计时器</title> 
<style>
 #div{
 width: 500px;
 height: 200px;
border: 1px solid yellow;
margin-left: 600px;
 margin-top: 200px;
background-color: antiquewhite;
 }
 .stopwatch { 
 text-align: center; 
 padding: 20px; 
 }
 
 .button { 
 padding: 10px 20px; 
 margin: 5px; 
 font-size: 16px; 
 cursor: pointer; 
} 
 
 h1 {
 font-size: 24px; 
 margin-bottom: 20px; 
}
</style>
</head> 
<body>
<div id="div">
<div class="stopwatch"> 
 <h1 id="timer">00:00:00</h1> 
 <button id="start">开始</button> 
 <button id="pause">暂停</button> 
 <button id="reset">重置</button> 
 </div> 

</div>
</body> 
</html>
<script>
  const timerElement = document.getElementById('timer'); 
    const startButton = document.getElementById('start'); 
    const pauseButton = document.getElementById('pause'); 
    const resetButton = document.getElementById('reset'); 
    let intervalId; 
    let seconds = 0; 
    let hours = 0; 
    let isRunning = false; 
     
    function updateTimer() { 
     const time = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;  
    timerElement.innerText = time; 
    } 
    
    function startTimer() { 
        if (!isRunning) { 
     isRunning = true; 
    intervalId = setInterval(() => { 
   seconds++;
    if (seconds === 60) { 
    seconds = 0; 
    minutes++; 
     if (minutes === 60) { 
    minutes = 0; 
    hours++; 
     } 
   } 
  updateTimer(); 
   }, 1000); 
     } 
    } 
     
    function pauseTimer() { 
    if (isRunning) { 
    isRunning = false; 
  clearInterval(intervalId); 
     } 
    } 
    
    function resetTimer() { 
    isRunning = false; 
     clearInterval(intervalId); 
     seconds = 0; 
     minutes = 0; 
     hours = 0;
    updateTimer();
    }
    
    startButton.addEventListener('click', startTimer);
    pauseButton.addEventListener('click', pauseTimer);
    resetButton.addEventListener('click', resetTimer);
    </script>

葵因lemon

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
web前端：利用js实现随机点名和秒表计数器

2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名。1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置。1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止。提示：采用定时器及定义计数器变量完成，定时器间隔为1s。3.样式请参考css及html自由发挥完成。4.点击重置，计时面板重新为0。2.点击开始，面板开始计时，3.点击暂停，面板停止。
复制链接

扫一扫