javascript网页随机点名实现过程解析

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

1.HTML结构

  
  
  
    .box{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
    #uname{
      width: 100px;
      height: 50px;
      background: pink;

      
      margin: 0 auto;
      margin-top: 30px;
      

      text-align: center; 
      line-height: 50px; 
      font-weight: bold; 
      font-size: 20px; 
    }
    button{
      display: block; 
      margin: 10px auto;
    }
  




  姓名
  开始

页面如下图所示：

2.js代码

1）在开始按钮和结束按钮之间相互转换

点击 开始 按钮，将按钮中的内容修改为 结束

点击结束按钮 ，按钮变成开始按钮

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

如果按钮为结束按钮，将按钮变成开始按钮。

定义一个数组用来存储人名，点击开始按钮，随机选择人名；

点击停止按钮，页面不再发生变化。

  姓名
  开始

页面最终显示如下图所示：

3.innerText( )和innerHTML( )之间的区别

  
  



余生山海远阔，愿你随心所向。

-------------------------------------------------------------------------------------------

innerText、innerHTML 向指定元素添加内容

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。