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 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
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
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
jquery+javascript编写国籍控件
2015/02/12 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue组件的写法汇总
2018/04/12 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python正则捕获操作示例
2017/08/19 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python目录和文件处理总结详解
2019/09/02 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python实现像awk一样分割字符串
2020/09/15 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
大型活动策划方案
2014/01/12 职场文书
党风廉政建设责任书
2014/04/14 职场文书
道德之星事迹材料
2014/05/03 职场文书
农民工讨薪标语
2014/06/26 职场文书
2016继续教育研修日志
2015/11/13 职场文书
五年级作文之想象作文
2019/10/30 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android