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 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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
几种显示数据的方法的比较
2006/10/09 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JavaScript中的this关键字使用详解
2015/08/14 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
json的使用小结
2016/06/08 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python为QT程序添加图标的方法详解
2020/03/09 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
自考生毕业自我鉴定
2013/10/10 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
技术比武方案
2014/05/19 职场文书
销售顾问工作计划书
2014/08/15 职场文书
党员评议个人总结
2014/10/20 职场文书
事业单位聘任报告
2015/03/02 职场文书
个性与发展自我评价
2015/03/06 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
mysql数据库如何转移到oracle
2022/12/24 MySQL