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 相关文章推荐
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 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
Zerg剧情介绍
2020/03/14 星际争霸
图书管理程序(三)
2006/10/09 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
cument.execCommand()用法深入理解
2012/12/04 Javascript
document.createElement()用法
2013/03/13 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
vue动态配置模板 'component is'代码
2019/07/04 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
python学习 流程控制语句详解
2016/06/01 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
专业技术职务聘任书
2014/03/29 职场文书
股份合作协议书范本
2014/04/14 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
应聘教师自荐信
2015/03/26 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript