可视化的

<!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. MyEclipse中设置jsp页面为默认utf-8编码

    转自:http://www.cnblogs.com/xdp-gacl/p/3496161.html 在MyEclispe中创建Jsp页面,Jsp页面的默认编码是“ISO-8859-1”,如下图所示: ...

  2. android 自己定义视频播放器之2/1

    非常久没更新博客,相信大家年后都比較忙. 今天给大家带来了一款视频播放器,首先确认的得有几点. 1.首先得有个播放视频的view. 2.加点额外功能进去左边上下滑动调节亮度,右边上下滑动调节声量: 3 ...

  3. bug ,improvements, features jira等信息

    https://issues.apache.org/jira/secure/ReleaseNote.jspa?version=12341764&projectId=12315522 https ...

  4. vim中权限不足时不用退出而强制保存

    命令: :w !sudo tee % 此命令是把当前文件(即%)作为stdin传给sudo tee命令来执行.说起来挺绕口,其实就是:用sudo强制保存.   有时候在自己机器上折腾的时候需要更改一些 ...

  5. (转)在Docker中运行Java:为了防止失败,你需要知道这些

    转自:https://mp.weixin.qq.com/s?__biz=MzA5OTAyNzQ2OA==&mid=2649693848&idx=1&sn=4e9ef7e2a9d ...

  6. MyBatis 问题列表

    问题表现:The content of elements must consist of well-formed character data or markup 解决办法:1.配置的动态SQL语句里 ...

  7. 【ARM】arm异常中断处理知识点

    ARM处理器7种类型异常 按优先级从高到低的排列如下: 复位异常(Reset) 数据异常(Date Abort) 快速中断异常(FIQ) 外部中断异常(IRQ) 预取异常(Prefetch Abort ...

  8. 我的Linux学习之路及参考书籍

    学习目的 很简单的考虑,最近在各大招聘网站上找工作,发现多数c/c++开发职位都需要Linux开发经验,让我很苦恼,因为Linux我到目前为止知之甚少,知道Linux的概念,也在大学期间了解过一段时间 ...

  9. 3. 哈工大LTP解析

    1. 通俗易懂解释知识图谱(Knowledge Graph) 2. 知识图谱-命名实体识别(NER)详解 3. 哈工大LTP解析 1. 前言 哈工大语言技术平台Language Technology ...

  10. 一次简单的ctf SQL注入绕过

    注入地址:http://103.238.227.13:10087/index.php?id=1 //过滤sql $array = array('table','union','and','or','l ...