javascript随机变色实例代码
2019-10-15 18:08
1661 查看
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生成随机验证码代码实例
- Javascript随机标签云代码实例
- Javascript随机标签云代码实例
- JavaScript实现99乘法表及隔行变色实例代码
- JavaScript实现简单的时钟实例代码
- javascript生成随机颜色示例代码
- JavaScript刷新iframe代码实例
- python编程实现随机生成多个椭圆实例代码
- javascript获取所有同类checkbox选项(实例代码)
- javascript DOM对象的学习实例代码
- javaScript+turn.js实现图书翻页效果实例代码
- JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
- 【web前端开发】浏览器原生API,DOM,Javascript,HTML5,CSS 代码运行实例参考
- Javascript脚本实现静态网页加密实例代码
- javascript实现可拖动变色并关闭层窗口实例
- JavaScript文字交替变色闪烁代码
- javascript 随机抽奖程序代码
- 基于javascript实现checkbox复选框实例代码
- JS代码实例:实现随机加载不同的CSS样式