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


Posted in Javascript onOctober 15, 2019

主要知识点涉及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>

页面如下图所示:

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

2.js代码

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

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

<body>
<script type="text/javascript">
  // 获取按钮对象
  var btn = document.getElementsByTagName("button")[0];
  // 给按钮添加单击事件
  btn.onclick = function(){
    btn.innerHTML="结束"
  };
</script>
</body>

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

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

切换按钮:判断按钮状态,如果按钮为开始按钮,将按钮变成结束按钮;

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

<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>

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

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

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>

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
vue router 动态路由清除方式
May 25 Vue.js
javascript随机变色实例代码
Oct 15 #Javascript
vue中axios的二次封装实例讲解
Oct 14 #Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 #Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 #Javascript
vue实现百度语音合成的实例讲解
Oct 14 #Javascript
vue中进行微博分享的实例讲解
Oct 14 #Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 #Javascript
You might like
CI框架表单验证实例详解
2016/11/21 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python写xml文件的操作实例
2014/10/05 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
python保存文件方法小结
2018/07/27 Python
python实现一组典型数据格式转换
2018/12/15 Python
python实现公司年会抽奖程序
2019/01/22 Python
python交易记录整合交易类详解
2019/07/03 Python
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
大专生自我鉴定怎么写
2014/09/16 职场文书
财务部岗位职责
2015/02/03 职场文书
寒假安全保证书
2015/02/28 职场文书
超市督导岗位职责
2015/04/10 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js