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

站长资源 2024/11/26 佚名

2 0 1

主要知识点涉及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：设置元素文本，只能设置文本一般用于获取元素对象，只能获取到文本内容，

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

javascript,网页,随机点名

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“javascript网页随机点名实现过程解析”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

浅谈微信小程序列表埋点曝光指南

javascript随机变色实例代码

评论“javascript网页随机点名实现过程解析”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接