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快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
js表单验证实例讲解
Mar 31 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
详解Puppeteer 入门教程
May 09 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
javascript jQuery插件练习
2008/12/24 Javascript
Js组件的一些写法
2010/09/10 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
vue 自动化路由实现代码
2019/09/03 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
满月酒主持词
2014/03/27 职场文书
英文请假条
2014/04/11 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
世界遗产的导游词
2015/02/13 职场文书
大学生实习介绍信
2015/05/05 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书