javascript随机变色--案例
1.打开网页，网页效果如图所示
代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>随机变色</title>
6 <style type="text/css">
7 #box{
8 width: 200px;
9 height: 200px;
10 border: 1px solid red;
11 }
12 </style>
13 </head>
14 <body>
15
16 <div id="box"></div>
17 <script type="text/javascript">
18 // 获取元素对象
19 var obj1 = document.getElementById("box");
20 // 给元素添加属性
21 obj1.style.background = 'rgb(255,255,0)'; // 注意：添加的属性类型 是字符串类型 ！！！
22 </script>
23 </body>
24 </html>
2.思考：如何随机变换div块的背景颜色
- 添加随机函数
- 颜色的表示方式 rgb(随机数，随机数，随机数)
- 添加多次定时器
1 <body>
2
3 <div id="box"></div>
4 <script type="text/javascript">
5 // 获取元素对象
6 var obj1 = document.getElementById("box");
7 // 给元素添加属性
8 // obj1.style.background = 'rgb(255,255,0)';
9
10 // 多次定时器
11 setInterval(function(){
12 obj1.style.background = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
13 },200);
14
15 // 随机函数
16 function rand(n,m){
17 return Math.floor(Math.random()*(m-n+1));
18 }
19 </script>
20 </body>
javascript随机变色--案例的更多相关文章
- javascript随机点名--案例
主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> ...
- javascript随机将第一个dom中的图片添加到第二个div中去
javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. <!DOCTYPE html P ...
- 随机总数字里面选取随机数字进行随机排序案例(JAVA实现)
随机总数字里面选取随机数字进行随机排序案例,案例如下: 代码code: package com.sec; import java.util.Arrays; import java.util.Scann ...
- 使用webpack打包js文件(隔行变色案例)
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- 20 JavaScript随机&逻辑&比较&类型转换
JavaScript 随机 Math.random(): 返回0~1之间的随机数,包括0不包括1 Math.floor():下舍入.Math.floor(2.9) = 2.Math.floor(Mat ...
- 【JavaScript定时器小案例】常见的几种定时器实现的案例
[JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...
- JavaScript 面向对象(二) —— 案例篇
看案例前可以先看看基础篇:JavaScript 面向对象(一) —— 基础篇 案例——面向对象的选项卡:把面向过程的程序一步步改成面向对象的形式,使其能够更加的通用(但是通用的东西,一般会比较臃肿). ...
- JavaScript基础--小案例：在网页指定位置弹出错误信息(十二)
案例分析:点击按钮后,在网页上指定区域,提示错误信息!5秒后,错误信息提示自动消失! <script languag="javascript" type="text ...
- JavaScript：综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
随机推荐
- 【web】php文件包含（利用phpinfo）
Docker搭建复现环境 地址:https://github.com/vulhub/vulhub/tree/master/php/inclusion ps. github单独下载一个文件夹的方法: 安 ...
- who 命令的实现
who 命令显示 当前已经登录的用户 查看连接帮助: man who who(1) 表示who的小结编号. NAME 包含命令的名字以及对这个命令的简短说明 SYNOPSYS 给出命令的用法说明,命 ...
- java 图形化小工具Abstract Window Toolit ：画笔Graphics，画布Canvas()，弹球小游戏
画笔Graphics Java中提供了Graphics类,他是一个抽象的画笔,可以在Canvas组件(画布)上绘制丰富多彩的几何图和位图. Graphics常用的画图方法如下: drawLine(): ...
- django信号机制 (每个操作前后django都预留了两个钩子，便于统一化添加功能)
信号 Django中提供了"信号调度",用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 典型应用场景:在所有数据库相关操作(读/ ...
- 在mysql5.8中用json_extract函数解析json
背景:某个字段的数据中是JSON,需要提取其中的卡号部分,如: {"objType":"WARE","orderId":6771254073 ...
- JAVA使用百度链接实时推送API提交链接
官网地址:http://data.zz.baidu.com/ 百度推广API的token获取 http://data.zz.baidu.com/site/index 填写完之后会进行验证, 验证完之后 ...
- vsp配合Qt5开发，解决virtual void * __cdecl PopDialogManger::qt_metacast
Qt错误提示 virtual void * __cdecl PopDialogManger::qt_metacast(char const*)"(?qt_metacast@PopDialog ...
- 《Java必须知道的300个问题》读书总结
这本书是在图书馆随便逛的时候找到的书.花了一下午看完了,感觉有用的地方不是很多,大部分都是些概念,并没有太大用途.不过里边有些东西还是可以看一看的,总结如下. Java语言基础 1.表达式3-2.6= ...
- 【LeetCode】487. Max Consecutive Ones II 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetco ...
- B. The Meeting Place Cannot Be Changed
B. The Meeting Place Cannot Be Changed time limit per test 5 seconds memory limit per test 256 megab ...