WEB前端作业四

最新推荐文章于 2024-06-29 23:22:36 发布

Yk_GSDN

最新推荐文章于 2024-06-29 23:22:36 发布

阅读量109

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Yk_GSDN/article/details/138135864

版权

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

<!DOCTYPE html>
<html lang-"en"><head>
    <meta charset="UTF-8">
    <title>点名</title>
    <style>
        *{
            margin-left: opx;
            margin-top: 0px;

        }
        .container{
            width:800px;
            height: 600px;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            margin-left: -400px;
            text-align: center;
            line-height: 100px;
        }
        .box,.box2{
            width:300px;
            height: 300px;
            background-color: l red;
            border-radius: 50%;
            /*水平位置居中 */
            margin: auto;
            margin-top: 50px;
            text-align: center;
            line-height: 300px;
        }
        .box2 {
            background-color:rgb(0, 255, 30);
        }
        #showf{
            font-size: 30px;
            color:□white;
            font-weight: bold;
        }
        #start{
            width: 300px;
            height: 50px;
            background-color:blueviolet;
        }
    </style>
    </head>
    <body>
        <div class="container">
        <div class="box" id="box">
        </div><span id="show">姓名</span>
        </div>
          <button id="start" onclick="change()">点名</button>
        </div>
    </body>
    </html>
    <script>
         // 标志位
        var flag = false
        //定义点名内容
    var awards =["沸羊羊","黑小虎","双面龟","汤姆猫"]
        //获取对应dom对象
        var box= document.getElementById("box")
        var show = document.getElementById("show")
        var start = document.getElementById("start")
        //定义定时器---人名切换显示
        var timer
        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

</html><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计时器</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        margin: 20px auto;
        width: 200px;
        height: 300px;
        background-color: rgb(51, 0, 255);
      }
      .content {
        height: 100px;
        text-align: center;
        line-height: 120px;
        font-weight: 700;
        font-size: 40px;
      }
      .btn {
        text-align: center;
      }
      button {
        margin-top: 20px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="content">
        <span id="hours">00</span>
        <span id="minutes">00</span>
        <span id="seconds">00</span>
      </div>
      <div class="btn">
        <button id="start">开始</button>
        <button id="pause">暂停</button>
        <button id="end">重置</button>
      </div>
    </div>
  </body>
  </html>
  <script>
    var timer
    var time = 0
    function $(id) {
      return document.getElementById(id)
    }
    var hours = $('hours'),
      minutes = $('minutes'),
      seconds = $('seconds'),
      start = $('start'),
      pause = $('pause'),
      end = $('end')
    //开始
    start.onclick = function () {
      this.disabled = true
      pause.disabled = false
      end.disabled = false
      timer = setInterval(move, 1000)
    }
    //暂停
    pause.onclick = function () {
      this.disabled = true
      start.disabled = false
      end.disabled = false
      clearInterval(timer)
    }
    //重置
    end.onclick = function () {
      this.disabled = true
      pause.disabled = false
      start.disabled = false
      clearInterval(timer)
      time = 0
      timeShow()
    }
    function move() {
      time++
      // console.log(time)
      timeShow()
    }
    function timeFormat(t) {
      t = t >= 10 ? t : '0' + t
      return t
    }
    function timeShow() {
      seconds.innerText = timeFormat(time % 60) //0-59
      minutes.innerHTML = timeFormat(parseInt(time / 60) % 60)
      hours.innerHTML = timeFormat(parseInt(time / 60 / 60) % 24)
    }
  </script>

Yk_GSDN

关注

1
点赞
踩
1

收藏

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

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

扫一扫