可视化的

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body{
  8.             background-color: aliceblue;
  9.         }
  10.         .box{
  11.             width: 1000px;
  12.             height: 240px;
  13.             /*background-color: aqua;*/
  14.             margin:  auto;
  15.             margin-top: 100px;
  16.             clear: both;
  17.         }
  18.         #btn{
  19.             width: 100px;
  20.             height: 30px;
  21.             margin-left: 600px;
  22.             margin-top: 50px;
  23.         }
  24.         .name{
  25.             width: 100px;
  26.             height: 30px;
  27.             float: left;
  28.             background-color: antiquewhite;
  29.             margin-left: 10px;
  30.             margin-top: 10px;
  31.             text-align: center;
  32.             line-height: 30px;
  33.         }
  34.         #span{
  35.             float: right;
  36.             position: relative;
  37.             top: 55px;
  38.             right: 185px;
  39.         }
  40.         h1{
  41.             text-align: center;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <h1>随机点菜小玩意</h1>
  47.     <span id="span"></span>
  48.     <div class="box" id="box"></div>
  49.     <input type="button" id="btn" value="点名"/>
  50.     <script>
  51. //        获取id函数
  52.         function my$(id){
  53.             return document.getElementById(id)
  54.         };
  55. //        模拟后台数据
  56.         var arr = ["面条", "麻辣烫", "小碗菜", "盖饭"
  57.       ];
  58. //        动态创建层
  59.         for(var i =;i<arr.length;i++){
  60.             var div = document.createElement("div");
  61.             div.innerText=arr[i];
  62.             div.className="name";
  63.             my$("box").appendChild(div);
  64.         };
  65. //        点菜
  66.         my$("btn").onclick=function(){
  67.             var peoples= arr.length;
  68. //            监视按钮的状态
  69.             if(this.value==="点名"){
  70. //                定时针
  71.                   timeId=setInterval(function () {
  72. //                      清空所有层的颜色
  73.                     for(var i =;i<arr.length;i++){
  74.                         my$("box").children[i].style.background=""
  75.                     };
  76. //                      留下当前层的颜色
  77.                     var random = parseInt(Math.random()*peoples);
  78.                     my$("box").children[random].style.background="red";
  79.                 },);
  80.                 this.value="停止";
  81.             }else{
  82. //                清除计时器
  83.                 clearInterval(timeId);
  84.                 this.value="点名";
  85.             };
  86.         };
  87.  
  88. //        获取时间的函数
  89.         getTime();
  90.         setInterval(getTime,)
  91.         function getTime(){
  92.             var day = new Date();
  93.             var year = day.getFullYear();//年
  94.             var month = day.getMonth()+;//月
  95.             var dat = day.getDate();//日
  96.             var hour = day.getHours();//小时
  97.             var minitue = day.getMinutes();//分钟
  98.             var second = day.getSeconds();//秒
  99.             month=month<?""+month:month;
  100.             dat=dat<?""+dat:dat;
  101.             hour=hour<?""+hour:hour;
  102.             minitue=minitue<?""+minitue:minitue;
  103.             second=second<?""+second:second;
  104.             my$("span").innerText=year+"-"+month+"-"+dat+" "+hour+":"+minitue+":"+second
  105.         }
  106.  
  107.     </script>
  108. </body>
  109. </html>

方法二：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.   body{
  8.     background: #f5faff;
  9.   }
  10.   .ks{
  11.     width: 140px;
  12.     line-height: 55px;
  13.     text-align: center;
  14.     font-weight: bold;
  15.     color: #fff;
  16.     text-shadow:2px 2px 2px #;
  17.     border-radius: 5px;
  18.     margin: 20px 20px ;
  19.     position: relative;
  20.     overflow: hidden;
  21.     background-color: limegreen;
  22.     border:1px solid #d2a000;
  23.     box-shadow:  1px 2px #fedd71 inset, -1px  #a38b39 inset, -2px 3px #fedd71 inset;
  24.   }
  25.   #nu{
  26.     background-color: red;
  27.   }
  28.   #div1 { font:40px '微软雅黑';text-align: center; background-color: gainsboro;
  29.     width: %;
  30.     height: %;
  31.     margin-bottom:20px;
  32.   }
  33. </style>
  34. </head>
  35. <body>
  36. <form>
  37.   <div align="center">
  38.     <input type="button" value="开始点菜" onclick="students()" class="ks"/>
  39.     <input type="button" value="停止点菜" onclick="stop()" class="ks" id="nu"/>
  40.     <hr color="blue">
  41.     <br>
  42.     <div id="div1" align="center">随机点菜区域</div>
  43.   </div>
  44. </form>
  45. <script type="text/javascript">
  46.     var i = ;
  47.     //t用来接收setTimeOut()的返回值
  48.     var t;
  49.     var st = ["麻辣烫", "不吃了", "爱吃不吃", "盖饭", "面条"];
  50.     var u;
  51.     //点菜函数
  52.     function students()
  53.     {
  54.       //顺序点菜
  55.     /*  if (i < st.length)
  56.       {
  57.         u = st[i];
  58.       }
  59.       else
  60.       {
  61.         //点到最后一个就回来重新点起
  62.         i = 0;
  63.         u = st[i];
  64.       }
  65.       i = i + 1;
  66. */
  67.       //随机点名 产生0-数组长度之间的数作为数组下标
  68.       var num = Math.floor(Math.random()*st.length);
  69.       u = st[num];
  70.       //更改文本框显示的value值
  71.       document.getElementById("div1").innerHTML = u ;
  72.       t = setTimeout("students()", );
  73.     }
  74.     //停止点菜函数
  75.     function stop()
  76.     {
  77.       clearTimeout(t);
  78.     }
  79.     </script>
  80. </body>
  81. </html>

JS 同一标签随机不停切换数据点菜--解决选择困难症的更多相关文章

  1. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  2. js使用s:property标签接收json格式数据

    js使用s:property接收json数据时,会出现字符被转译的错误. 错误如下: 引号会被转译成'"'字符,导致解析不了. 错误原因: html的s:property接收不会出错,而js ...

  3. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  4. 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS？

    优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有m ...

  5. angular input标签只能单向传递数据的问题

    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...

  6. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  7. RandomUser – 生成随机用户 JSON 数据的 API

    RandomUser 是一个 API,它为您提供了一个或者一批随机生成的用户.这些用户可以在 Web 应用程序原型中用作占位符,将节省您创建自己的占位符信息的时间.您可以使用 AJAX 或其他方法来调 ...

  8. [jQuery编程挑战]007 切换数据表格的行列

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  9. 关于js渲染网页时爬取数据的思路和全过程（附源码）

    于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...

随机推荐

  1. 深入理解Linux内核－系统调用

    系统调用:用户态进程向内核发出的,实现用户态进程调用硬件设备的函数或者中断:优点:使编程更容易,将用户从学习硬件设备的低级编程特性中解放:提高系统到安全性,内核在满足请求之前可以做正确性检查:提高可移 ...

  2. 基于 Promise 的 HTTP 请求客户端 axios

    基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 ...

  3. 《Android源代码设计模式解析》读书笔记——Android中你应该知道的设计模式

    断断续续的,<Android源代码设计模式解析>也看了一遍.书中提到了非常多的设计模式.可是有部分在开发中见到的几率非常小,所以掌握不了也没有太大影响. 我认为这本书的最大价值有两点,一个 ...

  4. hdu 2680 Choose the best route （dijkstra算法）

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2680 /************************************************* ...

  5. How to fix ERR_SSL_VERSION_INTERFERENCE on Chrome?

    https://ugetfix.com/ask/how-to-fix-err_ssl_version_interference-on-chrome/ Question Issue: How to fi ...

  6. [Windows Azure] Using the Graph API to Query Windows Azure AD

    Using the Graph API to Query Windows Azure AD 4 out of 4 rated this helpful - Rate this topic This d ...

  7. JAVA-JSP内置对象之response对象实现页面自动刷新

    相关资料:<21天学通Java Web开发> response对象 实现页面自动刷新1.可以通过response对象的addIntHeader()方法添加一个标题为Refrsh的标头,并指 ...

  8. CTF之文件包含的猥琐思路

    From: i春秋 百度杯”CTF 一: <?php include "flag.php"; //包含flag.php这个文件 $a = @$_REQUEST['hello' ...

  9. EnumUtil

    EnumUtil.cs using System; using System.Collections.Generic; using System.ComponentModel; using Syste ...

  10. [Python Essential Reference, Fourth Edition (2009)]读书笔记

    Python programs are executed by an interpreter. When you use Python interactively, the special varia ...