原生js实现随机点餐效果
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从数组中随机取出几个数组元素的方法
JS如何从一个数组中随机取出一个元素或者几个元素. 假如数组为 var items = ['1','2','4','5','6','7','8','9','10']; 1.从数组items中随机取出一个元素 var item = items[Math.floor(Math.random()*items.length)]; 2.从前面的一篇随机数组中随机取几个元素 function getRandomArrayElements(arr, count) { var shuffled = arr.sl
-
javascript实现的一个随机点名功能
这个其实是对JS随机数的一个练习方式,先把所有人得名字预先写好在一个数组里,然后让数组里的值快速的显示在区域内,当你按停的时候滚动就会停止达到随机效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS写的随机点名 - 琼台博客</title> <script type="text/javascript">
-
JS实现课堂随机点名和顺序点名
1. 效果: 2. Html代码: <body> <form> <div align="center"> <input type="button" value="开始点名" onclick="students()" class="ks"/> <input type="button" value="停止点名" onc
-
使用javascript做的一个随机点名程序
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
-
js实现随机点名系统(实例讲解)
废话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名</title> <style type="text/css"> td{ text-align: center; } </style> </head> <body
-
原生js实现随机点餐效果
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-ali
-
原生Js实现简易烟花爆炸效果的方法
本文实例讲述了原生Js实现简易烟花爆炸效果的方法.分享给大家供大家参考.具体分析如下: 实现原理: 在一定范围内,随机生成一些div,形成烟花效果 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> d
-
原生JS实现随机点名项目的实例代码
核心思想 •随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 •Math.random() * num: 产生从0到num的随机数 •Math.floor(): 向下取整 •简单的DOM操作等 技术扩展 •扩展人数 •添加停止键等 效果 代码如下 •html: <div class="container"> <section class="demo"> <ul> <li></l
-
如何使用原生Js实现随机点名详解
使用原生Js实现随机点名 最近学了一点前端内容,老师让用js设计一个班里的随机点名器.就尝试写了一个,具体实现效果如图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
-
利用原生js模拟直播弹幕滚动效果
目录 1.基本原理 2.具体代码 总结 1.基本原理 首先将直播区域分成十份(我个人自己为了便于计算分成十份),将输入的内容随机放到分成的十份区域中,插入到十份区域右边的视图之外,然后调用动画,按照随机的速度从右向左移动,当移动到左侧区域视图之外移除此滚动元素. 2.具体代码 <div class="move_video_content"> <div class="video_content"> <div class="vid
-
原生JS实现图片翻书效果
下面给大家分享基于原生js实现的图片翻书效果,具体代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS实现图片翻书效果-懒人图库</title> <META
-
原生js实现随机点名功能
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下 原生js实现随机点名,js部分有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
-
使用原生JS实现火锅点餐小程序(面向对象思想)
本次小程序采用ES6开发标准,不会的宝宝们请先学习,再来观看吧! 使用条件:使用ES6标准开发:因为采用了Bootstrap在线,所以需要联网:VSCode开发工具,在本地服务器中打开. 代码展示: Demo.html(网页),Demo.css(样式),Test01.js(菜单类),Test02.js(循环菜单),Test03.js(增,删操作) 下面进行一一展示: Demo.html(网页): <!DOCTYPE html> <html lang="en">
-
使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 "mousewheel" 事件,而 Firefox 3.5+ 中提供了一个等同的事件:"DOMMouseScroll".与mousewheel事件对应的event对象中我们还会用到另一个特殊属性-wheelDelta属性. 1."m
-
原生js canvas实现鼠标跟随效果
本文实例为大家分享了canvas实现鼠标跟随效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas鼠标跟随效果(原生js实现)</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m
随机推荐
- 原生js实现水平方向无缝滚动
- 浅析Nginx配置文件中的变量的编写使用
- iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果
- input获取焦点时底部菜单被顶上来问题的解决办法
- 微信小程序开发之入门实例教程篇
- asp.net各种cookie代码和解析实例
- PHP中strtr字符串替换用法详解
- [PHP]实用函数2
- 在Linux系统安装MySql步骤截图详解
- bootstrap confirmation按钮提示组件使用详解
- nodejs个人博客开发第七步 后台登陆
- jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法
- vbs 脚本错误:操作中文件名或类名未找到的解决方法
- 详解java整合solr5.0之solrj的使用
- JQuery限制复选框checkbox可选中个数的方法
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
- 实现两个文本框同时输入的实例
- Vue集成Iframe页面的方法示例
- Spring整合Quartz Job以及Spring Task的实现方法
- springboot获取URL请求参数的多种方式