广告位联系
返回顶部
分享到

原生js实现随机点餐效果的代码

JavaScript 来源:互联网搜集 作者:秩名 发布时间:2019-12-10 11:21:33 人浏览
摘要

html: div class=wrap div id=box /divbutton id=start开始/buttonbutton 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: cente

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);
}
 

效果:



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


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/lianwenxiu/article/details/87915516
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计