IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Html+css+JavaScript做一个随机点名器 -> 正文阅读

[JavaScript知识库]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都是很容易上手切很有成就感的哦

  JavaScript知识库 最新文章
Gin-Vue-admin项目学习
vue中使用导入的样式
Vue使用ElementUI的表格进行日期格式化变成
react Hook 使用
JavaScript-142:getElementsBylagName获取
vue(知识点一)
vue怎么全局引入axios 和设置基础路径
React 点餐系统案例
React的脚手架的创建
Hmtl页面中Jquery实现复选框选择-全选-全不
上一篇文章      下一篇文章      查看所有文章
加:2021-07-16 11:11:21  更:2021-07-16 11:12:19 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
360图书馆 购物 三丰科技 阅读网 日历 万年历 2021年10日历 -2021/10/28 12:26:43-
图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码