javascript随机变色实例代码
1.打开网页,网页效果如图所示
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机变色</title> <style type="text/css"> #box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> // 获取元素对象 var obj1 = document.getElementById("box"); // 给元素添加属性 obj1.style.background = 'rgb(255,255,0)'; // 注意:添加的属性类型 是字符串类型 !!! </script> </body> </html>
2.思考:如何随机变换div块的背景颜色
- 添加随机函数
- 颜色的表示方式 rgb(随机数,随机数,随机数)
- 添加多次定时器
<body> <div id="box"></div> <script type="text/javascript"> // 获取元素对象 var obj1 = document.getElementById("box"); // 给元素添加属性 // obj1.style.background = 'rgb(255,255,0)'; // 多次定时器 setInterval(function(){ obj1.style.background = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")"; },200); // 随机函数 function rand(n,m){ return Math.floor(Math.random()*(m-n+1)); } </script> </body>
以上代码非常简单,大家可以尝试运行下,感谢大家的学习和对我们的支持。
相关推荐
-
javascript实现简单的可随机变色网页计算器示例
本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META
-
javascript随机变色实例代码
1.打开网页,网页效果如图所示 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机变色</title> <style type="text/css"> #box{ width: 200px; height: 200px; border: 1px solid red; } </style>
-
JavaScript实现99乘法表及隔行变色实例代码
项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if和switch两种判断方式都能实现: 额,分析一下实例要求:一个99乘法表,一个多方法的隔行变色,鼠标滑过变另外一个颜色,离开恢复原色. 嗯,我们一步步来吧! 99乘法表的实现,我相信很多人都知道怎么实现,无非是2个for循环得到的结果,这里我就不多做解释,还不理解的同学可以仔细研究一下代码,研究一
-
java 实现输出随机图片实例代码
java 实现输出随机图片实例代码 输出随机图片(CAPTCHA图像):Completely Automated Public Turing Test to Tell Computers and Humans Apart (全自动区分计算机和人类的测试) 相关主要类(JDK 查看API) BufferedImage:内存图像 Graphics:画笔 ImageIO:输出图像 放在html页面上<img src/> 注意:浏览器默认会缓存图片 public static int WIDTH =
-
java 实现输出随机图片实例代码
java 实现输出随机图片实例代码 输出随机图片(CAPTCHA图像):Completely Automated Public Turing Test to Tell Computers and Humans Apart (全自动区分计算机和人类的测试) 相关主要类(JDK 查看API) BufferedImage:内存图像 Graphics:画笔 ImageIO:输出图像 放在html页面上<img src/> 注意:浏览器默认会缓存图片 public static int WIDTH =
-
jquery入门—选择器实现隔行变色实例代码
1.JQuery选择器继承了CSS.path语音的部分语法,允许通过标签名.属性名.内容对DOM元素进行快速.准确的选择. 2.JQuery选择器与JavaScript相比,具有代码简单.完善的检测机制的优势. 3.使用JQuery选择器实现隔行变色,示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <T
-
Javascript随机标签云代码实例
先来看一下效果 代码如下 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>随机标签云</title> <style type="text/css"> *{ margin:0; padding:0 } a{ text-decoration:none } #wrap{ width:400px; margin:auto
-
使用原生javascript开发计算器实例代码
计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力. 本实例详细分析一个js计算器的开发步骤,学习本教程时最好先具备一些基础的js知识. 计算器包括显示数字区域和按键区域两大部分,先把计算器的这两个区域的html元素编写出来,如下所示: <div class="calculator_wrap" id="calculator"><!--计算器外包元素--> <div class=&quo
-
JavaScript函数调用经典实例代码
目录 JavaScript函数调用经典例题 JS函数的定义与调用方法 总结 JavaScript函数调用经典例题 1.输入框判断是不是闰年 2.随机数判断是不是闰年 3.输入框判断是不是质数 4.随机数判断是不是质数 5.封装函数,判断日期是否合法 思考:首先我们采用函数调用的方法,将需要调用的函数都写在 js 文件夹里面,调用的时候会更方便.需要注意的是不要忘记在html中引入js. html代码: <body> <span>是否为闰年</span> <inpu
-
JavaScript 验证码的实例代码(附效果图)
效果如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .code { background:url(code_bg.jpg); f
-
javascript级联下拉列表实例代码(自写)
Html dom 是指在w3c规范出现之前,各个浏览器支持的一些dom操作. 1,Select对象. 属性 a,selectedIndex:用户选择的选项的下标,下标从0开始 b,length: 获取或者设置选项的个数 c,options: 返回一个数组,数组元素是Option对象 2,Options对象 属性: a,text:选项的文本内容 b,value:选项的値 c,selected: 当该选项被选上,值为true,否则为false 小知识:创建一个Option对象 复制代码 代码如下:
随机推荐
- 再谈javascript面向对象编程
- wordpress主题支持自定义菜单及修改css样式实现方法
- vue.js中mint-ui框架的使用方法
- 在jsp程序中使用com组件
- mysql 5.7.13 安装配置笔记(Mac os)
- Java简单验证身份证功能示例
- python使用rsa加密算法模块模拟新浪微博登录
- 使用jQuery判断Div是否在可视区域的方法 判断div是否可见
- 用jquery实现下拉菜单效果的代码
- jQuery中DOM树操作之复制元素的方法
- MyBatis无缝对接Spring的方法
- JavaScript的基本类型值-String类型
- vsftp连接错误cannot locate user entry:vsftpd
- C语言中返回错误信息的相关函数用法总结
- 浅谈Arrays.asList() 和ArrayList类型区别
- IOS代码修改音量实例详解
- ASP.NET加密解密算法分享
- Javascript验证Visa和MasterCard信用卡号的方法
- C#获取本机IP地址(ipv4)
- C#实现图像锐化的方法