可视化的

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            background-color: aliceblue;

        }

        .box{

            width: 1000px;

            height: 240px;

            /*background-color: aqua;*/

            margin:  auto;

            margin-top: 100px;

            clear: both;

        }

        #btn{

            width: 100px;

            height: 30px;

            margin-left: 600px;

            margin-top: 50px;

        }

        .name{

            width: 100px;

            height: 30px;

            float: left;

            background-color: antiquewhite;

            margin-left: 10px;

            margin-top: 10px;

            text-align: center;

            line-height: 30px;

        }

        #span{

            float: right;

            position: relative;

            top: 55px;

            right: 185px;

        }

        h1{

            text-align: center;

        }

    </style>

</head>

<body>

    <h1>随机点菜小玩意</h1>

    <span id="span"></span>

    <div class="box" id="box"></div>

    <input type="button" id="btn" value="点名"/>

    <script>

//        获取id函数

        function my$(id){

            return document.getElementById(id)

        };

//        模拟后台数据

        var arr = ["面条", "麻辣烫", "小碗菜", "盖饭"

      ];

//        动态创建层

        for(var i =;i<arr.length;i++){

            var div = document.createElement("div");

            div.innerText=arr[i];

            div.className="name";

            my$("box").appendChild(div);

        };

//        点菜

        my$("btn").onclick=function(){

            var peoples= arr.length;

//            监视按钮的状态

            if(this.value==="点名"){

//                定时针

                  timeId=setInterval(function () {

//                      清空所有层的颜色

                    for(var i =;i<arr.length;i++){

                        my$("box").children[i].style.background=""

                    };

//                      留下当前层的颜色

                    var random = parseInt(Math.random()*peoples);

                    my$("box").children[random].style.background="red";

                },);

                this.value="停止";

            }else{

//                清除计时器

                clearInterval(timeId);

                this.value="点名";

            };

        };

//        获取时间的函数

        getTime();

        setInterval(getTime,)

        function getTime(){

            var day = new Date();

            var year = day.getFullYear();//年

            var month = day.getMonth()+;//月

            var dat = day.getDate();//日

            var hour = day.getHours();//小时

            var minitue = day.getMinutes();//分钟

            var second = day.getSeconds();//秒

            month=month<?""+month:month;

            dat=dat<?""+dat:dat;

            hour=hour<?""+hour:hour;

            minitue=minitue<?""+minitue:minitue;

            second=second<?""+second:second;

            my$("span").innerText=year+"-"+month+"-"+dat+" "+hour+":"+minitue+":"+second

        }

    </script>

</body>

</html>

方法二：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

  body{

    background: #f5faff;

  }

  .ks{

    width: 140px;

    line-height: 55px;

    text-align: center;

    font-weight: bold;

    color: #fff;

    text-shadow:2px 2px 2px #;

    border-radius: 5px;

    margin: 20px 20px ;

    position: relative;

    overflow: hidden;

    background-color: limegreen;

    border:1px solid #d2a000;

    box-shadow:  1px 2px #fedd71 inset, -1px  #a38b39 inset, -2px 3px #fedd71 inset;

  }

  #nu{

    background-color: red;

  }

  #div1 { font:40px '微软雅黑';text-align: center; background-color: gainsboro;

    width: %;

    height: %;

    margin-bottom:20px;

  }

</style>

</head>

<body>

<form>

  <div align="center">

    <input type="button" value="开始点菜" onclick="students()" class="ks"/>

    <input type="button" value="停止点菜" onclick="stop()" class="ks" id="nu"/>

    <hr color="blue">

    <br>

    <div id="div1" align="center">随机点菜区域</div>

  </div>

</form>

<script type="text/javascript">

    var i = ;

    //t用来接收setTimeOut()的返回值

    var t;

    var st = ["麻辣烫", "不吃了", "爱吃不吃", "盖饭", "面条"];

    var u;

    //点菜函数

    function students()

    {

      //顺序点菜

    /*  if (i < st.length)

      {

        u = st[i];

      }

      else

      {

        //点到最后一个就回来重新点起

        i = 0;

        u = st[i];

      }

      i = i + 1;

*/

      //随机点名 产生0-数组长度之间的数作为数组下标

      var num = Math.floor(Math.random()*st.length);

      u = st[num];

      //更改文本框显示的value值

      document.getElementById("div1").innerHTML = u ;

      t = setTimeout("students()", );

    }

    //停止点菜函数

    function stop()

    {

      clearTimeout(t);

    }

    </script>

</body>

</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. yum 卸载 error: %preun(tengine-2.1.0-1.el6.x86_64) scriptlet failed, exit status 6

    error: %preun(tengine-2.1.0-1.el6.x86_64) scriptlet failed, exit status 6 Error in PREUN scriptlet i ...

  2. mysql protocol

    http://hutaow.com/blog/2013/11/06/mysql-protocol-analysis/ https://dev.mysql.com/doc/internals/en/cl ...

  3. diocp3-服务器的连接上限是到底是多少?diocp3的一个装13测试(8W连接数)

    服务器的连接上限是到底是多少?diocp3开源项目的一个装13测试(8W连接数) 测试DEMO路径 diocp3\samples\ECHO 之前群里说一台服务器最多是High(Word)的连接数655 ...

  4. 【delphi】多线程与多线程同步

    在 Delphi 中使用多线程有两种方法: 调用 API.使用 TThread 类; 使用 API 的代码更简单. CreateThread function CreateThread( lpThre ...

  5. 【嵌入式】arm-linux-gcc/ld/objcopy/objdump参数概述

    arm-linux-gcc -o 只激活预处理,编译,和汇编,也就是他只把程序做成obj文件   -Wall 指定产生全部的警告信息   -O2 编译器对程序提供的编译优化选项,在编译的时候使用该选项 ...

  6. linux内核编译错误集锦

    1,我是用的ubuntu16.04 32位系统编译内核linux-3.0.1出现如下错误:Can't use 'defined(@array)' (Maybe you should just omit ...

  7. ubuntu mysql 远程连接问题解决方法

    在shell下输入mysql -uroot -p是可以登录的,所以问题应该是mysql不允许root用户远程登录的问题,于是通过输入下面命令: GRANT ALL PRIVILEGES ON *.*  ...

  8. mysql 系统表的作用

    mysql 的系统表记录了所有数据库表(包括视图的定义语句)的字段列,顺序,类型等等,知道这些的话可以做些抽取模板淫荡的操作吧 嘿嘿  public void shuaxinglb() { try { ...

  9. 在Mac系统下用STS搭建一个Spring MVC项目

    [本文出自天外归云的博客园] 从STS的下载到空项目的搭建 1. 下载STS,下载解压缩后点击sts-bundle文件夹中的STS文件启动ide: 2. 创建Spring MVC项目:File-> ...

  10. php数组转xml

    0x00 需求 最近要做百度.360.神马搜索的网站sitemap,三家的格式都是xml,然而具体的细节还有有差别的. 一开始用的是dom,没有使用sax,写了几段便觉得太傻了,想到有没有数组转xml ...