javascript随机变色实例代码


Posted in Javascript onOctober 15, 2019

1.打开网页,网页效果如图所示

javascript随机变色实例代码

代码如下:

<!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 相关文章推荐
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
vue中axios的二次封装实例讲解
Oct 14 #Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 #Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 #Javascript
vue实现百度语音合成的实例讲解
Oct 14 #Javascript
vue中进行微博分享的实例讲解
Oct 14 #Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 #Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 #Javascript
You might like
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
php截取字符串函数分享
2015/02/02 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
utf8的编码算法 转载
2006/12/27 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Python网站验证码识别
2016/01/25 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
Python3.4解释器用法简单示例
2019/03/22 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python读取表格类型文件代码实例
2020/02/17 Python
详解Python设计模式之策略模式
2020/06/15 Python
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
廉洁自律个人总结
2015/02/14 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python