Html+css+JavaScript做一个随机点名器
2021/7/16 1:07:29
本文主要是介绍Html+css+JavaScript做一个随机点名器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
HTML+CSS+JavaScript 来实现随机点名器
话不多说,直接开整
第一张图是随机点名器的初始页面
当点击开始按钮时,JS 程序中提前准备好人员(数组)名单
var arr = ["张三","李四","王五","赵六","黑七","白八","紫九","红薯"]
随机变换跳动显示,开始按钮变成了停止按钮,如第二张图显示,
当点击停止按钮时,名字的随机变换跳动停止,显示出的名字即为随机点击出来的姓名,如第三张图所示。
代码在此:
<script> var arr = ["张三","李四","王五","赵六","黑七","白八","紫九","红薯"]; var mytime = null; var flag1; btn.style.backgroundColor = "#00ff00" function ramdom(){ if(mytime == null){ mytime = 1; flag1=window.setInterval("ramdomName()",10); btn.innerHTML = '停止'; btn.style.backgroundColor = "red" }else{ window.clearInterval(flag1); btn.innerHTML = '开始'; mytime = null; btn.style.backgroundColor = "#00ff00" } } function ramdomName(){ var btn = document.getElementById("btn"); var msg = document.getElementById("name"); var index = parseInt(Math.random()*arr.length); msg.innerHTML = arr[index]; } </script>
页面布局和css样式:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随机点名器</title> <style> .box { width: 300px; height: 200px; background-color:orangered; font-size: 30px; border-radius: 10px; } .innerbox{ position: absolute; top: 60px; left: 170px; width: 200px; height: 50px; border-radius: 10px; background-color:grey; font-size:30px; font-weight: bold; } .button{ position: absolute; top: 140px; left: 250px; } </style> </head> <body> <div align="center"> <div class = "box" > <div > <p class = "innerbox" id ="name" >随机点名器</p> </div> <div class="button" > <button onclick="ramdom()" id="btn" type="button" >开始</button> </div> </div> </div> </body> </html>
具体的实现过程就不多说了,感兴趣的小伙伴可以去学习下css和html以及javascript都是很容易上手切很有成就感的哦
这篇关于Html+css+JavaScript做一个随机点名器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-02Java管理系统项目实战入门教程
- 2024-11-02Java监控系统项目实战教程
- 2024-11-02Java就业项目项目实战:从入门到初级工程师的必备技能
- 2024-11-02Java全端项目实战入门教程
- 2024-11-02Java全栈项目实战:从入门到初级应用
- 2024-11-02Java日志系统项目实战:初学者完全指南
- 2024-11-02Java微服务系统项目实战入门教程
- 2024-11-02Java微服务项目实战:新手入门指南
- 2024-11-02Java项目实战:新手入门教程
- 2024-11-02Java小程序项目实战:从入门到简单应用