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",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
随机推荐
- 初识requests
Make a Request 一开始要导入 Requests 模块: >>> import requests 然后,尝试获取某个网页.本例子中,我们来获取 Github 的公共时间线 ...
- action中redirectAction到另一个命名空间中的action该如何配置
action中redirectAction到另一个命名空间中的action该如何配置,请注意namespace这儿必须是/global,而不是global,要不然找不到此action的
- JENKINS中创建全局变量并在JOB中使用
配置了一个 "PASSWORD"的变量值 然后再脚本里面使用 注意这里必须要用双引号 不然不行
- 【LeetCode】1110. Delete Nodes And Return Forest 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcode ...
- 【LeetCode】236. Lowest Common Ancestor of a Binary Tree 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- [C++]C++四舍五入保留到n位小数
#include <sstream> #include <iostream> #include <iomanip> using namespace std; /** ...
- 图像处理opencv-Rect 排序、合并[转]
opencv进行rect检测时,当检测到多个rect,组成rect vector之后,有些rect是由一个区域误分割得到的, 可以按照某种规格将这些rect合并为一个rect.比如按照x,y,widt ...
- 比例阀驱动电路后级PWM滤波尖刺如何消除？PWM通过RC低通滤波器模拟DAC
双头比例阀驱动电路,采用单片机输出2路PWM,分别驱动功率器件(U100的2和4脚),经过U100的8和10脚输出供电电源的高压PWM波形,这个高压PWM经过R104和R114分别采样后经过电流放大器 ...
- Java面向对象笔记 • 【第8章 内部类和泛型】
全部章节 >>>> 本章目录 8.1 内部类 8.1.1 内部类概述 8.1.2 内部类使用 8.1.3 实践练习 8.2 静态内部类 8.2.1 静态内部类的实现 8.2 ...
- Kafka基础教程（二）：Kafka安装
因为kafka是基于Zookeeper的,而Zookeeper一般都是一个分布式的集群,尽管kafka有自带Zookeeper,但是一般不使用自带的,都是使用外部安装的,所以首先我们需要安装Zooke ...