原生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 相关文章推荐
在模板页面的js使用办法
Apr 01 Javascript
Javascript的一种模块模式
Sep 08 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
详解如何让Express支持async/await
Oct 09 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
PHP file_exists问题杂谈
2012/05/07 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
javascript操作数组详解
2014/12/17 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
python检测是文件还是目录的方法
2015/07/03 Python
python数据结构之图的实现方法
2015/07/08 Python
Python的时间模块datetime详解
2017/04/17 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
利用python 读写csv文件
2020/09/10 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
企业为何需要商业计划书
2013/12/26 职场文书
单位在职证明范本
2014/01/09 职场文书
团日活动总结
2014/04/28 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android