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随机变色--案例的更多相关文章

  1. javascript随机点名--案例

    主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> ...

  2. javascript随机将第一个dom中的图片添加到第二个div中去

    javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. <!DOCTYPE html P ...

  3. 随机总数字里面选取随机数字进行随机排序案例(JAVA实现)

    随机总数字里面选取随机数字进行随机排序案例,案例如下: 代码code: package com.sec; import java.util.Arrays; import java.util.Scann ...

  4. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  5. 20 JavaScript随机&逻辑&比较&类型转换

    JavaScript 随机 Math.random(): 返回0~1之间的随机数,包括0不包括1 Math.floor():下舍入.Math.floor(2.9) = 2.Math.floor(Mat ...

  6. 【JavaScript定时器小案例】常见的几种定时器实现的案例

    [JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...

  7. JavaScript 面向对象(二) —— 案例篇

    看案例前可以先看看基础篇:JavaScript 面向对象(一) —— 基础篇 案例——面向对象的选项卡:把面向过程的程序一步步改成面向对象的形式,使其能够更加的通用(但是通用的东西,一般会比较臃肿). ...

  8. JavaScript基础--小案例：在网页指定位置弹出错误信息(十二)

    案例分析:点击按钮后,在网页上指定区域,提示错误信息!5秒后,错误信息提示自动消失! <script languag="javascript" type="text ...

  9. JavaScript：综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

随机推荐

  1. CF919B Perfect Number 题解

    Content 给定一个数字 \(k\),求出第 \(k\) 小的各数位和为 \(10\) 的数. 数据范围:\(1\leqslant k\leqslant 10000\). Solution 这题为 ...

  2. 【手把手教程】uniapp + vue 从0搭建仿微信App聊天应用：腾讯云TXIM即时通讯的最佳实践

    基于uniapp + vue 实现仿微信App聊天应用实践,实现以下功能 1: 用户登陆 2: 聊天会话管理 3: 文本/图片/视频/定位消息收发 4: 贴图表情消息收发 5: 一对一语音视频在线通话 ...

  3. AcWing422. 校门外的树

    题目: 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米. 我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,--,L,都种 ...

  4. C/C++ 结构体字节对齐

    在用sizeof运算符求算某结构体所占空间时,并不是简单地将结构体中所有元素各自占的空间相加,这里涉及到内存字节对齐的问题.从理论上讲,对于任何 变量的访问都可以从任何地址开始访问,但是事实上不是如此 ...

  5. 【LeetCode】361. Bomb Enemy 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力搜索 日期 题目地址:https://leetco ...

  6. 【LeetCode】739. Daily Temperatures 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 倒序遍历 栈 日期 题目地址:https://leetcode ...

  7. 【剑指Offer】孩子们的游戏(圆圈中最后剩下的数) 解题报告（Python）

    [剑指Offer]孩子们的游戏(圆圈中最后剩下的数) 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-in ...

  8. Adversarial Training with Rectified Rejection

    目录 概 主要内容 rejection 实际使用 代码 Pang T., Zhang H., He D., Dong Y., Su H., Chen W., Zhu J., Liu T. Advers ...

  9. JSP、JSTL标签、EL表达式

    JSP.JSTL标签.EL表达式 1.EL表达式:${} 功能: 获取数据 执行运算 获取web开发的常用对象 2.JSP标签 例如: jsp标签还有很多功能,这里只列举出一种. <jsp:fo ...

  10. .NET 微服务——CI/CD（2）：自动打包镜像

    准备工作 一.开启docker的tcp 我的服务器是linux,以端口2376为例,找到docker.service,在ExecStart下新增这段代码即可: -H tcp://0.0.0.0:237 ...