javascript网页随机点名实现过程解析
主要知识点涉及if选择结构判断语句、数组的定义、定时器、清除定时器、日期对象的使用。
1.HTML结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机点名</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 1px solid red;
}
#uname{
width: 100px;
height: 50px;
background: pink;
/* 设置div块 水平居中*/
margin: 0 auto;
margin-top: 30px;
text-align: center; /* 设置文本水平居中 */
line-height: 50px; /* 设置文本垂直居中 */
font-weight: bold; /* 字体加粗 */
font-size: 20px; /* 设置字体大小 */
}
button{
display: block; /* 将元素转换成行内块元素 */
margin: 10px auto;
}
</style>
</head>
<body>
<div class="box">
<div id="uname">姓名</div>
<button>开始</button>
</div>
</body>
</html>
页面如下图所示：
2.js代码
1）在开始按钮和结束按钮之间相互转换
点击 开始 按钮，将按钮中的内容修改为 结束
<body>
<script type="text/javascript">
// 获取按钮对象
var btn = document.getElementsByTagName("button")[0];
// 给按钮添加单击事件
btn.onclick = function(){
btn.innerHTML="结束"
};
</script>
</body>
点击结束按钮 ，按钮变成开始按钮
切换按钮：判断按钮状态，如果按钮为开始按钮，将按钮变成结束按钮；
如果按钮为结束按钮，将按钮变成开始按钮。
<body>
<script type="text/javascript">
// 获取按钮对象
var btn = document.getElementsByTagName("button")[0];
// 给按钮添加单击事件
btn.onclick = function(){
if(btn.innerText=="开始"){
btn.innerHTML="结束"
}else{
btn.innerHTML="开始"
}
};
</script>
</body>
定义一个数组用来存储人名，点击开始按钮，随机选择人名；
点击停止按钮，页面不再发生变化。
<body>
<div class="box">
<div id="uname">姓名</div>
<button>开始</button>
</div>
<script type="text/javascript">
// 定义数组 存储人名
var arr = ['李白','杜甫','韩愈','柳宗元','欧阳修','苏洵','苏轼','苏辙','王安石','曾巩','陶渊明','辛弃疾','李贺','陆游'];
// 获取id="uname"的元素对象
var Uname = document.getElementById("uname");
var flag = null; // 给定时器添加一个标识符
// 获取按钮对象
var btn = document.getElementsByTagName("button")[0];
// 给按钮添加单击事件
btn.onclick = function(){
if(btn.innerText=="开始"){
btn.innerHTML="结束";
// 添加多次定时器
flag = setInterval(function(){
var num = rand(0,arr.length-1); //随机获取数组的索引
// 通过索引获取人名
var uname = arr[num];
// 将取出来的人名 写入到页面当中
Uname.innerHTML=uname;
},100)
}else{
btn.innerHTML="开始";
// 清除多次定时器
clearInterval(flag);
}
};
// 封装一个随机函数
function rand(n,m){
return Math.floor(Math.random()*(m-n+1));
}
</script>
</body>
页面最终显示如下图所示：
3.innerText( )和innerHTML( )之间的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<p>余生<em>山海</em>远阔，愿你随心所向。</p>
<script type="text/javascript">
// 获取元素对象
var cont = document.getElementsByTagName("p")[0];
// 获取元素内容
console.log(cont.innerText);
console.log(cont.innerHTML);
</script>
</body>
</html>
-------------------------------------------------------------------------------------------
innerText、innerHTML 向指定元素添加内容
innerHTML ：设置元素内容，包括标签和文本 一般用于修改元素对象，获取文本内容和标签
innerText：设置元素文本，只能设置文本 一般用于获取元素对象，只能获取到文本内容，
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现课堂随机点名和顺序点名
1. 效果: 2. Html代码: <body> <form> <div align="center"> <input type="button" value="开始点名" onclick="students()" class="ks"/> <input type="button" value="停止点名" onc
-
javascript实现的一个随机点名功能
这个其实是对JS随机数的一个练习方式,先把所有人得名字预先写好在一个数组里,然后让数组里的值快速的显示在区域内,当你按停的时候滚动就会停止达到随机效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS写的随机点名 - 琼台博客</title> <script type="text/javascript">
-
js实现随机点名程序
最近用到了一下随机点名程序,就自己整理一下.代码实现后的截图如下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ
-
JavaScript实现简单随机点名器
本文实例为大家分享了js随机点名器的具体代码,供大家参考,具体内容如下 <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat
-
JavaScript实现班级随机点名小应用需求的具体分析
需求如下: 1.在网页中显示,班级所有人员的名字. 2.点击开始按钮,人员的颜色开始变化,当停止的时候,会有一个颜色不同的位置,那么这个位置就是被点到的同学了. 大致的图形界面如下: 下面是对上面的需求分析的具体分析如下: 1.初始化这样一个页面,并设置统一颜色-green. a.同学的名字,用数组存储 b.在页面用div块显示 2.随机选择一个位置让其颜色变化成-red a.颜色的变化用css样式去控制 b.随机的位置用随机函数去生成 3.为了让其有动画的效果,设置间隔时间让其颜色变化的位置向
-
js实现随机点名小功能
本文实例为大家分享了js实现随机点名功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="name1"></div> <button id="btn"
-
原生js实现随机点名功能
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下 原生js实现随机点名,js部分有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
-
原生JS实现随机点名项目的实例代码
核心思想 •随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 •Math.random() * num: 产生从0到num的随机数 •Math.floor(): 向下取整 •简单的DOM操作等 技术扩展 •扩展人数 •添加停止键等 效果 代码如下 •html: <div class="container"> <section class="demo"> <ul> <li></l
-
JS+CSS实现随机点名(实例代码)
HTML代码结构 <body> <div id="box">随机点名</div> <span id="span">开始</span> </body> CSS代码结构 <style> #box { width: 30%; height: 200px; background-color: rgb(233, 248, 214); border: 1px solid rgb(130, 216
-
JavaScript实现随机点名器实例详解
你是公司的程序员,年会的时候公司要给员工抽奖发福利,要求你写一个页面小程序,用来随机选出幸运员工,分设一二三等奖大致如下图示例: 以下是点名器的一种思路,页面比较简陋,只给出了满足最基本要求的代码户要用到计时器,随机数函数等 本抽奖一二三等奖都只设一名幸运员工,开始结束功能用一个按钮实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
-
js实现随机点名系统(实例讲解)
废话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名</title> <style type="text/css"> td{ text-align: center; } </style> </head> <body
-
使用javascript做的一个随机点名程序
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"