原生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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
解决vue中的无限循环问题
Jul 27 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函数)
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python面试题之列表声明实例分析
2019/07/08 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python 代码运行时间获取方式详解
2020/09/18 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
环保建议书500字
2014/05/14 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
学校创先争优活动总结
2014/08/28 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
一般党员对照检查材料
2014/09/24 职场文书
投标承诺函格式
2015/01/21 职场文书
教师师德工作总结2015
2015/07/22 职场文书
区域销售大会开幕词
2016/03/04 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js