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. java 图形化工具Swing 创建工具条

    通过JToolBar来创建工具条: Swing提供了JToolBar类来创建工具条,创建JToolBar对象时可以指定如下两个参数: (1),name: 该参数指定该工具条的名称. (2),orien ...

  2. libevent源码学习（8）：event_signal_map解析

    目录event_signal_map结构体向event_signal_map中添加event激活event_signal_map中的event删除event_signal_map中的event以下源码 ...

  3. nim_duilib（2）之xml目录结构理解

    introduction 本文将总结我对nim_duilib的xml配置. 更多控件和控件属性的具体说明, 请参考 here before starting 1 You should clone th ...

  4. c++interview

    出自:https://github.com/huihut/interview Github    |    Docsify 简体中文    |    English 关于 本仓库是面向 C/C++ 技 ...

  5. 【LeetCode】829. Consecutive Numbers Sum 解题报告（C++）

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

  6. 【LeetCode】725. Split Linked List in Parts 解题报告（Python & C++）

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

  7. 1246 - Colorful Board

    1246 - Colorful Board    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB ...

  8. 一行代码完成定时任务调度,基于Quartz的UI可视化操作组件 GZY.Quartz.MUI

    前言 之前发布过第一个版本,有兴趣的可以去看看: NET Core 基于Quartz的UI可视化操作组件 GZY.Quartz.MUI 简介 GitHub开源地址:l2999019/GZY.Quart ...

  9. Glossary Collection

    目录 直接修饰用 间接强调用 (多为副词) 过渡用 特别的名词 动词 词组 各种介词 句子 摘要 引言 总结 正文 实验 直接修饰用 Word 含义 例句 近义词 nuanced adj. 微妙的:具 ...

  10. Contrastive Generative Adversarial Networks

    目录 概 主要内容 代码 Kang M., Park J. Contrastive Generative Adversarial Networks. arXiv preprint arXiv 2006 ...