原生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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
表单(FORM)的一些实用效果代码
Mar 25 Javascript
js文字滚动停顿效果代码
Jun 28 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 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/12/06 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php自定义分页类完整实例
2015/12/25 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
微信小程序实现图片放大预览功能
2020/10/22 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
python保存字符串到文件的方法
2015/07/01 Python
Python的pycurl包用法简介
2015/11/13 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python提取xml里面的链接源码详解
2019/10/15 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
用python实现名片管理系统
2020/06/18 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
会计人员岗位职责
2014/03/19 职场文书
产品设计开发计划书
2014/05/07 职场文书
安全标语口号
2014/06/09 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
护理工作心得体会
2016/01/22 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
create-react-app开发常用配置教程
2022/06/25 Javascript