web案例

最新推荐文章于 2024-07-09 23:44:56 发布

STARS-M

最新推荐文章于 2024-07-09 23:44:56 发布

阅读量197

点赞数 1

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

本文链接：https://blog.csdn.net/m0_65466288/article/details/138131792

版权

一，点名程序

要求：

1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名

程序：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>随机点名程序</title>  
<style>  
  body {  
    font-family: Arial, sans-serif;  
    text-align: center;  
    padding-top: 50px;  
  }  
  #nameDisplay {  
    font-size: 24px;  
    margin-bottom: 20px;  
  }  
  #rollButton {  
    padding: 10px 20px;  
    font-size: 18px;  
    cursor: pointer;  
  }  
</style>  
</head>  
<body>  
  <div id="nameDisplay">等待点名...</div>  
  <button id="rollButton">点名</button>  
  
  <script src="rollcall.js"></script>  
</body>  
</html>

let names = ['张三', '李四', '王五', '赵六', '孙七'];  
let isRolling = false;  
let currentName = '';  
  
document.getElementById('rollButton').addEventListener('click', function() {  
  if (isRolling) {   
    clearInterval(intervalId);  
    isRolling = false;  
    this.innerText = '点名';  
    alert('当前被点名学生：' + currentName);  
  } else {  
    
    isRolling = true;  
    this.innerText = '停止';  
    let index = Math.floor(Math.random() * names.length);  
    currentName = names[index];  
    document.getElementById('nameDisplay').innerText = currentName;  
  
      
 
    let intervalId = setInterval(function() {  
      index = (index + 1) % names.length;  
      currentName = names[index];  
      document.getElementById('nameDisplay').innerText = currentName;  
    }, 2000);  

  }  
});

二，秒表

要求：

1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时，
3.点击暂停，面板停止
4.点击重置，计时面板重新为0

程序：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>秒表计时器</title>  
<style>  
  body {  
    font-family: Arial, sans-serif;  
    text-align: center;  
    padding-top: 50px;  
  }  
  #timerDisplay {  
    font-size: 24px;  
    margin-bottom: 20px;  
  }  
  .button {  
    padding: 10px 20px;  
    font-size: 18px;  
    cursor: pointer;  
    margin: 0 5px;  
  }  
</style>  
</head>  
<body>  
  <div id="timerDisplay">00:00</div>  
  <button class="button" id="startButton">开始</button>  
  <button class="button" id="pauseButton">暂停</button>  
  <button class="button" id="resetButton">重置</button>  
  
  <script src="stopwatch.js"></script>  
</body>  
</html>

let timerDisplay = document.getElementById('timerDisplay');  
let startTime;  
let intervalId;  
let isRunning = false;  
let timeElapsed = 0;  
  
function updateDisplay() {  
  let minutes = Math.floor(timeElapsed / 60);  
  let seconds = timeElapsed % 60;  
  timerDisplay.innerText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;  
}  
  
document.getElementById('startButton').addEventListener('click', function()
{  
  if (!isRunning) {  
    startTime = Date}})