原生js实现随机点餐效果


Posted in Javascript onDecember 10, 2019

html:

<div class="wrap">
    <div id="box">    
</div>
<button id="start">开始</button>
<button id="stop">停止</button>

css:

.wrap{
    width: 500px;
    height: 400px;
    margin: 0 auto;
    text-align: center;
}
#box{
    width: 100%;
    height: 300px;
    border: 1px solid red;      
    text-align: center;
    line-height: 300px;
    font-size: 30px;
    margin-bottom: 20px;
}

js:

var arr = ['宫保鸡丁', '糖醋里脊', '红烧带鱼', '牛腩煲', '红烧肉'];
var start = document.getElementById("start"),
      stop = document.getElementById("stop"),
      box = document.getElementById("box"),
      timer = null;

start.onclick = function(){  
   timer = setInterval(function(){
      var index = Math.floor(Math.random()*arr.length);
      box.innerHTML = arr[index];
    }, 100)      
}
stop.onclick = function(){
      clearInterval(timer);
}

效果:

原生js实现随机点餐效果

点击开始,随机切换菜品,点击停止,好了吃鱼吧

总结

以上所述是小编给大家介绍的原生js实现随机点餐效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
JS运算符简单用法示例
Jan 19 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 #Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 #Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 #Javascript
vue实现随机验证码功能(完整代码)
Dec 10 #Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 #Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 #Javascript
使用Bootstrap做一个朝代历史表
Dec 10 #Javascript
You might like
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python实现ip代理池功能示例
2019/07/05 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
新闻专业个人自我评价
2013/09/21 职场文书
五四青年节的活动方案
2014/08/20 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
无犯罪记录证明
2014/09/19 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers