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做一个随机点名器相关推荐

HTML+CSS+JavaScript做一个简约的浏览器主页
文章目录前言一.页面效果二.实现方式具体代码总结前言感觉之前的浏览器主页乱七八糟,我个人比较喜欢简约卡通的.所以做了这个权游主题的简约版.整体代码也不难.最后是把写好的html文件地址作 ...
JavaScript 语言之随机点名器制作训练
题目为了活跃班级气氛,Mr.王想通过一个随机点名器来随机抽取学员回答问题,故安排你来使用 HTML+CSS+JavaScript 来实现如下图所示的随机点名器,第一张图是随机点名器的初始页面,当 ...
html+css+javaScript实现一个简单的注册界面
html+css+javaScript实现一个简单的注册界面自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...
HTML CSS JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
用python做一个随机题目生成器
你好! 要用 Python 做一个随机题目生成器,你可以使用 Python 的 random 模块来生成随机数. 下面是一个简单的例子,它会生成一道加法题: import random# 生成两个随机 ...
CSS 如何做一个比较真实有感觉的阴影效果
CSS 如何做一个比较真实有感觉的阴影效果效果如图: 阴影:你需要了解的: box-shadow 这个样式可以同时添加多个阴影,以 , 间隔即可本例中的阴影有两个,一个向左偏移一个向右偏移 box ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
【如何编码实现一个随机点名器】
目录随机点名器任务描述运行结果任务目标实现思路实现代码随机点名器任务描述编写一个随机点名器的程序,使其能够在全班同学中随机点中某一名同学的名字,随机点名器具备3个功能,包括存储全班同 ...
CSS/SCSS 做一个心跳的动画：keyframe
CSS/SCSS 做一个心跳的动画一.心电图数据化做动画,需要动画曲线,心跳的曲线自然是心电图,网上随便找一个差不多的,选取完整的一部分 1. 横向10等分找到基线,横向10等分. 整个图是一个 ...

Html+css+JavaScript做一个随机点名器

HTML+CSS+JavaScript 来实现随机点名器

Html+css+JavaScript做一个随机点名器相关推荐

最新文章

热门文章