js实现九宫格的随机颜色跳转


Posted in Javascript onFebruary 19, 2017

效果如下:

 js实现九宫格的随机颜色跳转

图(1)  初始图

js实现九宫格的随机颜色跳转

图(2)  开始闪

代码如下:

<!DOCTYPE html>
<html>
<head>
 <title>九宫格</title>
 <style type="text/css">
 div{
 width:190px;
 height:190px;
 background:#FFA600;
 float:left;
 margin:10px;
 border-radius: 10px;
 }
 body{
 width:700px;
 margin:0 auto;
 }
 button{
 clear:both;
 width:200px;
 height:50px;
 background:#FFF;
 border:none;
 border-radius:10px;
 position:relative;
 left:100px;
 }
 button:hover{
 background:#FFA600;
 }
 </style>
</head>
<body>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <button id="btnone">开始闪</button>
 <button id="btntwo">结束闪</button>
 <script type="text/javascript" >
 var div=document.getElementsByTagName('div');
var colors=['red','plum','blue','green','cyan','black','pink','gray','brown'];
btnone.onclick=function(){//点击开始
 c=setInterval(function(){//使用定时器
 start();//调用函数
 },1000)//设置时间
}
btntwo.onclick=function(){//停止按钮的
 for(i=0;i<div.length;i++){//循环
 div[i].style.background="#FFA600";//遍历清除颜色
 }
 clearInterval(c);//停止定时器
}
function start(){
 for(var i=0;i<div.length;i++){//每次随机颜色时遍历将背景设置好
 div[i].style.background="#FFA600";
 }
 var arr=new Array(3);//创建数组容纳随机数
 var arr1=new Array(3);
 for(var i=0;i<arr.length;i++){//创建第一组数组
 var a=parseInt(Math.random()*9); 
 console.log(a);
 if(i==0){//第一个数字直接导入数组
 arr[i]=a;
 }else{
 for(var j=0;j<i;j++){//第二个与第三个数字进行判断
 if(a==arr[j]){//如果重复从新开始
  i--
 }else{
  arr[i]=a;
 }
 }
 }
 }
 for(var i=0;i<arr1.length;i++){//同上。随机颜色
 var a=parseInt(Math.random()*9); 
 if(i==0){
 arr1[i]=a;
 }else{
 for(var j=0;j<i;j++){
 if(a==arr1[j]){
  i--
 }else{
  arr1[i]=a;
 }
 }
 }
 }
 for(var i=0;i<arr.length;i++){
 div[arr[i]].style.background=colors[arr1[i]];//将随机的颜色给随机的地址
 }
}
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
原生JS实现垂直手风琴效果
Feb 19 #Javascript
js鼠标移动时禁止选中文字
Feb 19 #Javascript
canvas雪花效果核心代码分享
Feb 19 #Javascript
Ajax和Comet技术总结
Feb 19 #Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 #Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 #Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 #Javascript
You might like
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python中的filter()函数的用法
2015/04/27 Python
python3中int(整型)的使用教程
2017/03/23 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
super()与this()的区别
2016/01/17 面试题
酒店个人培训自我鉴定
2013/12/11 职场文书
学习方法演讲稿
2014/05/10 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书