javascript随机点名--案例主要知识点涉及if选择结构判断语句、数组的定义、定时器、清除定时器、⽇期对象的使⽤。1.HTML结构
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>随机点名</title>
6<style type="text/css">
7 .box{
8 width: 200px;
9 height: 200px;
10 border: 1px solid red;
11 }
12 #uname{
13 width: 100px;
14 height: 50px;
15 background: pink;
16
17/* 设置div块⽔平居中*/
18 margin: 0 auto;
19 margin-top: 30px;
20
21
22 text-align: center; /* 设置⽂本⽔平居中 */
23 line-height: 50px; /* 设置⽂本垂直居中 */
24 font-weight: bold; /* 字体加粗 */
25 font-size: 20px; /* 设置字体⼤⼩ */
26 }
27 button{
28 display: block; /* 将元素转换成⾏内块元素 */
29 margin: 10px auto;
30 }
31</style>
32</head>
33<body>
纪念英雄烈士的感言34
35<div class="box">
36<div id="uname">姓名</div>
37<button>开始</button>
38</div>
高速免费2022年时间39
40</body>
41</html>
页⾯如下图所⽰：
2.js代码
1）在开始按钮和结束按钮之间相互转换
点击开始按钮，将按钮中的内容修改为结束
1 <body>
2 <script type="text/javascript">
3// 获取按钮对象
4var btn = ElementsByTagName("button")[0];
5// 给按钮添加单击事件
6 lick = function(){
7 btn.innerHTML="结束"
8 };
9 </script>罪的构成要件
10 </body>
点击结束按钮，按钮变成开始按钮
切换按钮：判断按钮状态，如果按钮为开始按钮，将按钮变成结束按钮；
如果按钮为结束按钮，将按钮变成开始按钮。
1 <body>
2
3 <script type="text/javascript">
4// 获取按钮对象
5var btn = ElementsByTagName("button")[0];
6// 给按钮添加单击事件
7 lick = function(){
8if(btn.innerText=="开始"){
9 btn.innerHTML="结束"
10 }else{
11 btn.innerHTML="开始"
12 }
拂堤杨柳醉春烟的意思13
14 };
15 </script>
16 </body>
定义⼀个数组⽤来存储⼈名，点击开始按钮，随机选择⼈名；
点击停⽌按钮，页⾯不再发⽣变化。
1 <body>
2
3 <div class="box">
4 <div id="uname">姓名</div>
如何刷机5 <button>开始</button>
餐饮管理制度6 </div>
7 <script type="text/javascript">
8// 定义数组存储⼈名
9var arr = ['李⽩','杜甫','韩愈','柳宗元','欧阳修','苏洵','苏轼','苏辙','王安⽯','曾巩','陶渊明','⾟弃疾','李贺','陆游']; 10// 获取id="uname"的元素对象
11var Uname = ElementById("uname");
12var flag = null; // 给定时器添加⼀个标识符
13
14// 获取按钮对象
15var btn = ElementsByTagName("button")[0];
16// 给按钮添加单击事件
17 lick = function(){
18if(btn.innerText=="开始"){
19 btn.innerHTML="结束";
20// 添加多次定时器
21 flag = setInterval(function(){
22var num = rand(0,arr.length-1); //随机获取数组的索引
23// 通过索引获取⼈名
24var uname = arr[num];
25// 将取出来的⼈名写⼊到页⾯当中
26 Uname.innerHTML=uname;
27 },100)
28
29 }else{
30 btn.innerHTML="开始";
31// 清除多次定时器
32 clearInterval(flag);
33 }
34
35 };
36
37
38// 封装⼀个随机函数
39function rand(n,m){
40return Math.floor(Math.random()*(m-n+1));
41 }
42 </script>
43 </body>
页⾯最终显⽰如下图所⽰：
3.innerText( )和innerHTML( )之间的区别
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Title</title>
6</head>
7<body>
8
9<p>余⽣<em>⼭海</em>远阔，愿你随⼼所向。</p>
10<script type="text/javascript">
11// 获取元素对象
12var cont = ElementsByTagName("p")[0];
13// 获取元素内容
14 console.log(cont.innerText);
15 console.log(cont.innerHTML);
16</script>
17</body>
18</html>
-------------------------------------------------------------------------------------------
innerText、innerHTML 向指定元素添加内容
innerHTML ：设置元素内容，包括标签和⽂本⼀般⽤于修改元素对象，获取⽂本内容和标签innerText：设置元素⽂本，只能设置⽂本⼀般⽤于获取元素对象，只能获取到⽂本内容，
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论