javascript网页随机点名实现过程解析
作者:入梦归来 时间:2024-04-16 09:35:31
主要知识点涉及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:设置元素文本,只能设置文本 一般用于获取元素对象,只能获取到文本内容,
来源:https://www.cnblogs.com/pjcd-32718195/p/11674773.html
标签:javascript,网页,随机,点名
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
使用vue.js制作分页组件
2024-05-02 16:36:27
Python脚本调试工具安装过程
2021-08-02 23:10:53
![](https://img.aspxhome.com/file/2023/6/103296_0s.jpg)
利用Python实现K-Means聚类的方法实例(案例:用户分类)
2023-05-15 13:14:34
![](https://img.aspxhome.com/file/2023/8/88958_0s.png)
Dreamweaver如何防止及消除垃圾代码的产生
2007-11-13 17:15:00
vue 监听是否切屏和开启小窗的实现过程
2024-04-26 17:38:46
SQL事务用法begin tran,commit tran和rollback tran的用法
2012-01-05 18:58:51
用python做游戏的细节详解
2022-02-08 05:18:39
Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果
2024-05-28 15:43:08
![](https://img.aspxhome.com/file/2023/5/123195_0s.jpg)
菜鸟来看看:制作个人主页有诀窍
2007-10-05 09:03:00
MySQL 5.0 数据库新特性的存储过程
2007-10-24 19:45:00
CSS浏览器兼容方案
2008-06-10 12:21:00
golang bad file descriptor问题的解决方法
2024-05-09 09:31:42
百度小程序自定义通用toast组件
2024-04-22 22:17:11
![](https://img.aspxhome.com/file/2023/6/136056_0s.png)
Python ArcPy实现批量计算多时相遥感影像的各项元平均值
2022-06-04 14:45:51
![](https://img.aspxhome.com/file/2023/5/80755_0s.png)
python实现五子棋小游戏
2023-02-28 08:37:59
![](https://img.aspxhome.com/file/2023/3/65913_0s.jpg)
pytorch transform数据处理转c++问题
2023-08-19 11:24:49
VSCode插件安装完成后的配置详解
2022-02-16 00:36:34
Python实现GUI计算器(附源码)
2022-06-07 03:32:47
![](https://img.aspxhome.com/file/2023/1/131741_0s.png)
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2023-12-04 02:47:49
vue3.0如何在全局挂载对象和方法
2024-05-13 09:07:59
![](https://img.aspxhome.com/file/2023/0/126650_0s.png)