如何用原生js给特定元素随机添加背景色
2016-05-17 08:50
435 查看
每次做项目都是red,pink,blue,不仅单调乏味,而且充分暴露了自己三级甲等的英语水平,作为一名有理想,积极向上的程序员,这是果断不能忍的事情,今天刚好写一个用原生js给特定元素随机添加背景色的方法,瞬间让单调的生活丰富多彩起来,有了此方法妈妈再也不用担心我找不到女朋友了。
源码:
在线效果
源码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .box{ height: 200px; width: 200px; background: red; } </style> </head> <body> <div class="box"></div> <button class="btn">点我随机变化颜色</button> <script type="text/javascript"> var btn = document.querySelector(".btn"); var box = document.querySelector(".box"); btn.onclick = function () { randColor(box) } function randColor(element) { //随机改变背景色 var ranColor = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); element.style.background = ranColor; } </script> </body> </html>
在线效果
相关文章推荐
- JSON浅析
- underscore.js 源码分析5 基础函数和each函数的使用
- 解决easyDialog弹出框加载延时图片的时候不居中问题
- js原型和原型链个人理解(我的理解)
- 还在为无缝滚动而烦恼?是时候彻底get到这个知识点了
- javascript css红色经典选项卡效果实现代码
- 浅谈Javascript数组(推荐)
- web前端基础:javascript数组操作方法
- jsp_filter 编码 过滤器
- js中的$
- jsp servlet 实现记住我功能实现
- js特殊字符验证
- JSTL标签 参考手册
- Javascript读书笔记:函数定义和函数调用
- Eclipse去除js(JavaScript)验证错误
- JavaScript日期集合(今日,昨日,本周一,周末 ,月初,月末)
- JS全选反选
- JS四舍五入方法
- JS 中的 with 关键字
- js 处理Json 时间带T 时间格式