本次分享JavaScript主要知识点涉及到for循环、if选择结构判断语句、数组的定义、定时器、清除定时器、⽇期对象的使⽤。执⾏后效果图：

思路：1.⽹页结构搭建： HTML2.⽹页布局美化： CSS　　3.随机功能实现:　JavaScript

分析后案例思路图：

编码⼯作：Html代码：

王者荣耀英雄随机点名系统

Css代码：

body{

background-color: pink;/*整个⽹页的背景颜⾊*/} h1{

text-align: center;/*⽂本居中*/}

.box{

width: 1000px; /*⼤盒⼦宽度10000像素*/ height: 240px; /*⼤盒⼦⾼度240像素*/

margin: 0 auto; /*外边距：上下的外间距为0 ⽔平(左右)间距 ⾃动居中*/ margin-top: 100px;/* 距离上⽅的外间距空出100像素*/ clear: both; /*清除浮动*/}

#btn{

width: 100px; /*按钮的宽度为100像素*/

height: 30px; /*按钮的⾼度为100像素*/

margin-left: 600px;/*按钮距离左侧外边距为600像素*/ margin-top: 50px; /*按钮距离上⽅外边距为50像素*/}

.name{ /*name是⼦节点在js代码单独设置的类选择器*/ width: 100px; /*设置⼦节点盒⼦的宽度是100像素*/ height: 30px; /*设置⼦节点盒⼦的⾼度是30像素*/ float: left; /*设置⼦节点盒⼦的浮动为向左浮动*/

background-color: antiquewhite;/*设置⼦节点盒⼦的背景颜⾊为“古董⽩”⾊*/ margin-left: 10px;/*设置⼦节点盒⼦距离左侧外边距为10像素*/ margin-top: 10px; /*设置⼦节点盒⼦距离上侧外边距为10像素*/ text-align: center;/*设置⼦节点盒⼦中的⽂本字体为居中显⽰*/ line-height: 30px;/*设置⼦节点盒⼦中的⽂本⾼度为30像素*/}

#span{ /*⽇期在单独的⼀⾏中显⽰，所以采⽤⾏内元素span*/ float: right; /*向左浮动*/

position: relative;/*设置位置为：相对定位。*/ top: 55px; /*上⽅空出55显⽰*/ right: 185px; /*右侧空出185像素*/} 　　

JavaScript代码：

//1.创造虚拟后台数据

var arrs = [\"鲁班七号\诸葛亮\后裔\赵云\⼥娲\⼩乔\不知⽕舞\⼤乔\ \"韩信\亚瑟\孙尚⾹\孙悟空\孙膑\马可波罗\廉颇\扁鹊\⽩起\安琪拉\" ,\"刘禅\张飞\妲⼰\甄姬\虞姬\项⽻\庄周\黄忠\芈⽉\钟馗\"

,\"刘邦\狄仁杰\王昭君\蔡⽂姬\花⽊兰\兰陵王\哪吒\姜⼦⽛\武则天\关⽻\" ,\"周瑜\曹操\李⽩\阿珂\吕布\嬴政\刘备\"]; //2.获取⽗节点元素

var boxNode = document.getElementById(\"box\");

//2.1循环遍历所有的数组中的元素，然后创建⼦节点元素 for (var i = 0; i < arrs.length; i++) {

//通过⽂档对象 创建新元素“div”⼩盒⼦，使⽤divNode⼦节点进⾏接收 var divNode = document.createElement(\"div\");

//使⽤⼦节点divNode向页⾯中写⼊数组中的每⼀个元素的名字 divNode.innerHTML=arrs[i];

//使⽤⼦节点divNode 调⽤ css中的类选择器的name divNode.className=\"name\"; //使⽤⽗节点进⾏追加⼦节点 boxNode.appendChild(divNode); } //3.点名

// 使⽤⽂档对象通过id获取元素到btn

var btn= document.getElementById(\"btn\"); // 当按钮btn被单击后触发匿名函数 btn.onclick = function () {

// 如果 选择的值全等于“点名”⼆字 则执⾏下⽅代码 if(this.value===\"点名\"){

//设置定时器：每过100毫秒、执⾏⼀次下⽅的setTimes函数 并使⽤ timeId进⾏接收定时后的结果 timeId=setInterval(\"setTimes()\

this.value=\"停⽌\";//本次按钮的内容被赋值为停⽌ }else{//否则 //清除计时器

clearInterval(timeId);// 清除定时器（定时后的结果被清除） this.value=\"点名\";//本次按钮的内容被赋值为点名 } }

// 设置定时器内容函数

function setTimes () {

//遍历数组中的使⽤元素

for (var j = 0; j < arrs.length; j++) {

//将⽗节点数组中的每⼀个元素的背景颜⾊清空 boxNode.children[j].style.background=\"\"; }

// 获取随机选中的结果

//parseInt() 函数可解析⼀个字符串,并返回⼀个整数

//Math.random()是数学函数中的随机某个数值（可整、可⼩数） var random = parseInt(Math.random()*arrs.length);

//将⽗节点数组中的随机被选中元素的背景颜⾊设置为红/ boxNode.children[random].style.background=\"red\"; }

//4.调⽤时间

//使⽤⽂档对象通过id获取元素到span

var spanNode = document.getElementById(\"span\"); //调⽤获取时间函数 getTime();

//设置定时器： 每过1秒执⾏⼀次 时间函数 setInterval(getTime , 1000); // 定义 获取时间 函数 function getTime() {

// 实例化对象： 创建⽇期对象 var day = new Date();

//通过对象获取年⽉⽇时分秒 var year = day.getFullYear(); var month = day.getMonth()+1; var dat = day.getDay();

var hours = day.getHours();

var minitues = day.getMinutes(); var second = day.getSeconds();

// 通过 span节点向页⾯拼接写⼊ 年⽉⽇时分秒

spanNode.innerHTML =year+\"-\"+month+\"-\"+dat+\" \"+hours+\":\"+minitues+\":\"+second; } 　　 作者： 杨校

分享是快乐的，也见证了个⼈成长历程，⽂章⼤多都是⼯作经验总结以及平时学习积累，基于⾃⾝认知不⾜之处在所难免，也请⼤家指正，共同进步。

本⽂版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在⽂章页⾯明显位置给出, 如有问题， 可邮件（397583050@qq.com）咨询。