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",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
随机推荐
- 任务信息的高级选项（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 张同学说,[高级]选项卡很重要,嗯,本妖深以为然! 这里的[高级]选项卡,是指[任务信息]里的,在默认视图下,只要双击某任 ...
- libevent源码学习（9）：事件event
目录在event之前需要知道的event_baseevent结构体创建/注册一个event向event_base中添加一个event设置event的优先级激活一个event删除一个event获取指定e ...
- JAVA使用IDEA本地调试服务的代码
然后将启动参数的 jdwp=transport=dt_socket,server=y,suspend=n,address=8086 放到服务器上 在执行jar包的命令加入这个 例如 java -jar ...
- MySQL查找数据中相同的数据，并进行删除
查找表中多余的重复记录,重复记录是根据某个字段来判断 select * from 表名 where 字段 in (select 字段 from 表名 group by 字段 having count( ...
- mac osx 准备 nanogui 记录
!!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist mac osx : 10.14.6 Mojave. 之前没有配置openGL相关开发环境,自 ...
- c++设计模式概述之组合（composite）
代码写的不够规范,目的是为了缩短代码篇幅, 实际中请不要这样做 1.概述 这里的组合,是将 部分组合到整体.所以, 用到的对象有: 部分.整体. 这里的例子,生活中可以类比厨房的筷筒: 里面放了筷子, ...
- 【Android开发】找乐，一个笑话App的制作过程记录
缘起 想做一个笑话App的原因是因为在知乎上看过一个帖子,做Android可以有哪些数据可以练手,里面推荐了几个数据开放平台.在这些平台中无一不是有公共的笑话接口,当时心想这个可以拿来练手啊,还挺有意 ...
- 【LeetCode】991. Broken Calculator 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 【LeetCode】375. Guess Number Higher or Lower II 解题报告（Python）
[LeetCode]375. Guess Number Higher or Lower II 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://f ...
- 【LeetCode】423. Reconstruct Original Digits from English 解题报告（Python）
[LeetCode]423. Reconstruct Original Digits from English 解题报告(Python) 标签: LeetCode 题目地址:https://leetc ...