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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 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实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PDO::_construct讲解
2019/01/27 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
python 调整图片亮度的示例
2020/12/03 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
滴水洞导游词
2015/02/10 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
教师节班会开场白
2015/06/01 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
创业计划书之家教中心
2019/09/25 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏