需求：点击按钮随机给盒子换背景色

用到的知识点：Math.random    Math.round

文章地址 https://www.cnblogs.com/sandraryan/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body{text-align: center;}

        #box {

            width: 100px;height: 100px;margin: 10px auto;

            border: 1px solid green; border-radius: 8px;

        }

        button{

            padding: 5px; border-radius: 4px;

        }

    </style>

</head>

<body>

    <button id="btn">click me</button>

    <div id="box">box</div>

    <script>

        var btn = document.getElementById("btn");

        var box = document.getElementById("box");

        // 获取需要的元素

        btn.onclick = function(){

            // 绑定点击事件

            var color1 = Math.round(Math.random()*255);

            var color2 = Math.round(Math.random()*255);

            var color3 = Math.round(Math.random()*255);

            // 获取三个值作为rgb值，random只能在0-1范围内随机，乘255就好了

            // 要取整数所以四舍五入round

            var mix = "rgb(" + color1 + "," + color2 +"," + color3 + ")";

            // 把三个颜色的值拼接在一起

            box.style.backgroundColor = mix;

            // 改变颜色背景色为刚才获取的值

        }

    </script>

</body>

</html>

js随即数字random实现div点击更换背景色的更多相关文章

  1. java：javaScript（定义方式，循环语句，函数与参数，事件机制，控制台记录，event事件获取键盘ascii，confirm和prompt，事件和内置对象，获取input，点击更换背景色）

    1. 定义JS的两种方式: <!DOCTYPE> <html> <head> <meta charset="UTF-8"></ ...

  2. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  3. 用js做数字字母混合的随机四位验证码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  5. JS 实现显示和隐藏div（以百度地图为例）

    主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html ...

  6. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  7. JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 页面上有3个输入框：分别为max，min，num；三个按钮：分别为生成，排序，去重；在输入框输入三个数字后，先点击生成按钮，生成一个数组长度为num，值为max到min之间的随机整数点击排序，对当前数组进行排序，点击去重，对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  9. js对数字的处理：取整、四舍五入、数字与字符串的转换

    取整.四舍五入 向下取整Math.floor() 向上取整Math.ceil() 四舍五入Math.round()) 保留有效数位n.toFixed() 产生大于等于0小于1的随机数Math.rand ...

随机推荐

  1. LintCode_133 最长单词

    题目 给一个词典,找出其中所有最长的单词. 样例 在词典 { "dog", "google", "facebook", "inte ...

  2. 【JZOJ3601】【广州市选2014】Tree(tree)

    ╰(￣▽￣)╭ 每个非叶子节点,其左右子树叶子节点的权值之和相等.我们称这种二叉树叫平衡二叉树. 我们将一棵平衡二叉树叶子节点的权值从左到右列出来,假如这个权值序列是另一个序列A的子序列,我们称这棵平 ...

  3. Android消息机制使用注意事项，防止泄漏

    在Android的线程通信当中,使用频率最多的就是Android的消息处理机制(Handler.send().View.post().Asynctask.excute()等等都使用到了消息处理机制). ...

  4. 大合集 | 9 场 Dubbo Meetup 回顾视频和PPT下载

    2018年2月16日,Dubbo 加入 Apache 基金会孵化器,在随后的那个夏天,我们开始在全国(北京.上海.深圳.成都.杭州)和社区的用户们见面.认识.交个朋友,将社区的最新动态.Dubbo 的 ...

  5. 掀开SQL的神秘面纱，将优化进行到底

    掀开SQL的神秘面纱,将优化进行到底 有这样一条奇怪的SQL,返回结果不足10行,逻辑读达到1.2w,存在索引却走多次全表扫描,如何揭开它神秘的面纱拯救系统性能,答案在这里,你不可错过! 本文来自上周 ...

  6. k8s 超详细总结，面试必问

    一个目标:容器操作:两地三中心:四层服务发现:五种Pod共享资源:六个CNI常用插件:七层负载均衡:八种隔离维度:九个网络模型原则:十类IP地址:百级产品线:千级物理机:万级容器:相如无亿,K8s有亿 ...

  7. POP介绍与使用实践(快速上手动画)

    http://adad184.com/2015/03/11/intro-to-pop/ 前言 动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始 ...

  8. js写的滑动解锁

    css部分 *{ margin:; padding:; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select ...

  9. Xici drop flower

    var xici_user_api = "http://www.xici.net/apps/wedding/?method=wedding.user.getusername&from ...

  10. shell脚本练习题（更新中...)

    练习题(这里贴的是自己写的代码, 网上给的题目代码我会附加在最下面) 1. 编写shell脚本,计算1-100的和: #!/bin/bash #caculate the to `; do sum=$[ ...