资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

使用javascript怎么实现一个网页随机点名功能

这篇文章给大家介绍使用javascript怎么实现一个网页随机点名功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

目前累计服务客户近1000家，积累了丰富的产品开发及服务经验。以网站设计水平和技术实力，树立企业形象，为客户提供成都做网站、成都网站制作、网站策划、网页设计、网络营销、VI设计、网站改版、漏洞修补等服务。创新互联建站始终以务实、诚信为根本，不断创新和提高建站品质，通过对领先技术的掌握、对创意设计的研究、对客户形象的视觉传递、对应用系统的结合，为客户提供更好的一站式互联网解决方案，携手广大客户，共同发展进步。

1.HTML结构




  
  随机点名
  
    .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;
    }
  




  姓名
  

页面如下图所示：

使用javascript怎么实现一个网页随机点名功能

2.js代码

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

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



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

使用javascript怎么实现一个网页随机点名功能

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

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

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




  // 获取按钮对象
  var btn = document.getElementsByTagName("button")[0];
  // 给按钮添加单击事件
  btn.onclick = function(){
    if(btn.innerText=="开始"){
      btn.innerHTML="结束"
    }else{
      btn.innerHTML="开始"
    }
    
  };

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

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




  姓名
     // 定义数组 存储人名   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));   }

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

使用javascript怎么实现一个网页随机点名功能

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




  
  Title




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


  // 获取元素对象
  var cont = document.getElementsByTagName("p")[0];
  // 获取元素内容
  console.log(cont.innerText);
  console.log(cont.innerHTML);

使用javascript怎么实现一个网页随机点名功能

关于使用javascript怎么实现一个网页随机点名功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


文章标题：使用javascript怎么实现一个网页随机点名功能
本文URL：http://cdkjz.cn/article/jhosos.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
四川平武网站建设达州电信机房南充网站建设网站seo温江网站建设成都名片印刷厂腾讯免备案空间营山月子会所四川成都托管服务器广告吸塑字

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图