原生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实现随机点名系统(实例讲解)
废话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名</title> <style type="text/css"> td{ text-align: center; } </style> </head> <body
-
使用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从数组中随机取出几个数组元素的方法
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
-
原生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
随机推荐
- JavaScript创建对象的七种方式全面总结
- asp 图片正则 替换,替换前检查图片是不是本地地址的方法
- Java web网站访问量的统计
- IOS 指纹识别详解及实例代码
- 用ADODB.Stream转换
- 在PHP中实现Javascript的escape()函数代码
- asp.net音频转换之.amr转.mp3(利用七牛转换法)
- MySQL中开启和使用通用查询日志的实例教程
- 浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
- Python写的服务监控程序实例
- javascript+HTML5的Canvas实现Lab单车动画效果
- vbs 自动复制U盘的内容
- 使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
- highchart数据源纵轴json内的值必须是int(详解)
- Java中如何比较两个数组中元素是否相同
- Spring MVC---数据绑定和表单标签详解
- 深入解析Java的Spring框架中的混合事务与bean的区分
- Android 实现全屏显示的几种方法整理
- 对Python中小整数对象池和大整数对象池的使用详解
- PLSQL developer12汉化过程