主要知识点涉及if选择结构的判断语句、数组、定时器、清零定时器的定义以及日期对象的使用。

1.HTML结构

！doctype html head metharset=' utf-8 ' title随机点名/title styletype=' text/CSS '。box { width : 200px高度： 200 px；border: 1px纯红；} # uname { width: 100px高度： 50px；背景：粉色；/*将div块水平居中设置*/margin : 0 auto；边距-top : 30px；文本对齐：中心；/*将文本水平居中*/line-height : 50px；/*将文本设置为垂直居中*/font-weight : bold；/*粗体*/font-size : 20px；/*设置字体大小*/}按钮{ display: block/*将元素转换为内嵌块元素*/margin : 10px auto；}/style/head dydiv class=' box ' div id=' uname ' name/div按钮start /button/div/body/html页面如下图所示：

2.js代码

1)在开始按钮和结束按钮之间切换

单击开始按钮将按钮中的内容更改为结束

正文脚本类型=' text/JavaScript'//get button对象varb TN=document . getelementsbytagname(' button ')[0]；//将click事件BTN . onclick=function(){ BTN . innerhtml=' end ' }添加到按钮；/脚本/正文

单击结束按钮，该按钮将成为开始按钮

切换按钮：判断按钮状态，如果按钮是开始按钮，将按钮改为结束按钮；

如果按钮是结束按钮，请将按钮更改为开始按钮。

正文脚本类型=' text/JavaScript'//get button对象varb TN=document . getelementsbytagname(' button ')[0]；//添加点击事件BTN . onclick=function(){ if(BTN . innertext==' start '){ BTN . innerhtml=' end ' } else { BTN . innerhtml=' start ' } }；/script/body定义了一个数组来存储人名。点击开始按钮，随机选择人名。

点击停止按钮，页面不会改变。

body div class=' box ' div id='uname ' name/div button start/button/div script type=' text/JavaScript '/定义存储人名var arr=['李白'，'杜甫'，'韩愈'，'柳宗元'，'欧阳修'，'苏洵'，'苏轼'/获取id=' uname '的元素对象varuname=document . getelementbyid(' uname ')；var标志=null//向计时器中添加标识符//获取button对象varb TN=document . getelementsbytagname(' button ')[0]；//添加点击事件BTN . onclick=function(){ if(BTN . inner text==' start '){ BTN . inner html=' end '；//添加定时器标志=set interval(function(){ varnum=rand(0，arr。长度-1)；//随机获取数组的索引//通过索引获取人名var uname=arr[num]；//将提取的人名写入页面Uname.innerHTML=uname}，100)} else { BTN . innerhtml=' start '；//清除多定时器clearInterval(标志)；} };//封装一个随机函数，函数rand (n，m){ return math . floor(math . random()*(m-n ^ 1))；}/script/body页面最终显示如下图所示：

3.3.innerText()和innerHTML()的区别

！doctype html head meta charset=' utf-8 ' title title/title/head body p在我的余生中，emmountains和seas /em可谓是天南地北。希望你可以为所欲为。/PS script type=' text/JavaScript '/get element对象varcont=document . getelementsbyname(' p ')[0]；//获取元素内容console . log(cont . innertext)；console . log(cont . innerhtml)；/脚本/正文/html

-

向指定的元素添加内容

InnerHTML:设置元素内容，包括标签和文本，一般用于修改元素对象，获取文本内容和标签

设置元素文本，只能设置文本。一般用于获取元素对象，只能获取文本内容。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。