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",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
随机推荐
- Vue中this.$router.push（参数） 实现页面跳转
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...
- 移动应用开发：Flutter
目录 前言 Flutter 介绍 移动应用开发:选择对比 原生开发 H5 技术 React Native Flutter 总结 参考 前言 "镜子镜子 告诉我,世界上最好的语言是什么&quo ...
- js Uncaught TypeError: undefined is not a function
如下代码: var columns={}; var column={}: column.name='张三'; columns.push(column); 会出现Uncaught TypeError: ...
- 再谈多线程模型之生产者消费者（基础概念）（c++11实现）
0.关于 为缩短篇幅,本系列记录如下: 再谈多线程模型之生产者消费者(基础概念)(c++11实现)[本文] 再谈多线程模型之生产者消费者(单一生产者和单一消费者)(c++11实现) 再谈多线程模型之生 ...
- 【LeetCode】245. Shortest Word Distance III 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典+暴力检索 日期 题目地址:https://lee ...
- 【LeetCode】933. Number of Recent Calls 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 二分查找 队列 相似题目 参考资料 日期 题目地址: ...
- 【LeetCode】80. Remove Duplicates from Sorted Array II 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 【LeetCode】646. Maximum Length of Pair Chain 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 贪心算法 日期 题目地址:https://leetc ...
- 面渣逆袭：JVM经典五十问，这下面试稳了！
大家好,我是老三,"面渣逆袭"系列继续,这节我们来搞定JVM.说真的,JVM调优什么的一个程序员可能整个职业生涯都碰不到两次,但是,一旦用到的时候,那就是救命了,而且最重要的是-- ...
- SMOOTHING (LOWPASS) SPATIAL FILTERS
目录 FILTERS Box Filter Kernels Lowpass Gaussian Filter Kernels Order-Statistic (Nonlinear) Filters Go ...