js实现点击按钮随机生成背景颜色


Posted in Javascript onSeptember 05, 2020

本文实例为大家分享了js实现点击按钮随机生成背景颜色的具体代码,供大家参考,具体内容如下

通过点击按钮更换整个页面的背景颜色

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input{
      width: 150px;
      height: 50px;
      background-color:yellow;
      line-height: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <input type="button" value="点击更换背景颜色" id="btn">
  <!-- 设置按钮 -->
  <script>
    function suiJi(m,n){
      return m+parseInt(Math.random()*(n-m+1))
    }
    //随机生成m-n之间的整数,包含m,n
    function yanSe(){
      var result = "#"
      for(var i = 0; i<6; i++){
        result +=suiJi(0,15).toString(16)
      }
    return result;
    //生成一个随机颜色编码#000000-#ffffff
    }
    var btn = document.getElementById("btn")
    //获取节点
    btn.onclick = function(){
      document.body.style.background = yanSe();
    }
  </script>
</body>
</html>

实现效果,点击按钮可更换颜色

js实现点击按钮随机生成背景颜色

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
webpack 模块热替换原理
Apr 09 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
javascript实现一款好看的秒表计时器
Sep 05 #Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 #Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 #Javascript
Vue中component标签解决项目组件化操作
Sep 04 #Javascript
JS数组转字符串实现方法解析
Sep 04 #Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 #Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 #Javascript
You might like
php数组的一些常见操作汇总
2011/07/17 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php自定义apk安装包实例
2014/10/20 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
再谈javascript原型继承
2014/11/10 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python通过select实现异步IO的方法
2015/06/04 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
浅析python的Lambda表达式
2019/02/27 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
行政助理的职责
2013/11/14 职场文书
公司出纳岗位职责
2013/12/07 职场文书
中学门卫岗位职责
2013/12/26 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
天河观后感
2015/06/11 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android