JavaScript 随机变颜色和高度

最新推荐文章于 2022-11-15 14:36:37 发布
最新推荐文章于 2022-11-15 14:36:37 发布
阅读量332 收藏
点赞数
分类专栏： 前端 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43623306/article/details/90720830
版权

JavaScript 随机变颜色和高度

<!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>Math内置函数</title>
    <style>
        .box {
            display: flex;
            text-align: center;
        }

        .item {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="box" onclick="update()">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <div class="item">5</div>
    <script>
     

        // 即使只有一个box,也是返回的一个数组集合
        var box = document.getElementsByClassName('box')[0];
        console.log(box);

        // 获取box下面的item, class 是可以通过用元素对象获取,但是id(唯一)只能用document获取
        items = box.getElementsByClassName('item');
        console.log(items);


        // 定义update函数,并且指定形参 n1 和 n2
        // 不传参数,默认50-500的范围,不传递,形参是undefined      
        function update(n1 = 50,n2 = 500) {
            console.log(n1,n2);
            // 优化处理 防止使用者不传递参数
            n1 = n1 == undefined ? 50 : n1;
            n2 = n2 == undefined ? 500 : n2;

            // 只允许传递数字number类型
            // typeof n1 返回字符串类型
            if(typeof n1 != 'number' || typeof n2 != 'number') {
                // alert("我只能是个数字");
                // 主动抛出异常,结束程序执行
                throw "参数只能是个数字";
            }

            var min = Math.min(n1,n2);
            var max = Math.max(n1,n2);
            for (var i = 0; i < items.length; i++) {
                // 产生一个随机颜色
                var r = Math.floor(Math.random() * 256);
                // console.log(r);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);

                // 修改元素
                items[i].style.backgroundColor = "rgba(" + r + "," + g + "," + b + ")";

                // 随机高度[10 150]
                var h = Math.floor(Math.random() * (max - min + 1) + min);
                items[i].style.height = h + "px";
                items[i].style.lineHeight = h + "px";
            }
        }
        // 执行
        // 传递实参
        update(100,500);
        // update("abc",500);

    </script>
</body>

</html>

如图所示：三次点击后可以随便更换颜色和高度

 

 

 

 

随机函数封装后

<!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></title>
    <style>
        .box {
            display: flex;
            text-align: center;
        }

        .item {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="box" onclick="update()">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <div class="item">5</div>
    <script> 
        function randomNumber(a = 1, b = 10){
				// 这两个函数会做个类型转换, 假如含有其他字符,返回的是NaN
				var max = Math.max(a, b);
				var min = Math.min(a, b);
				if(isNaN(max))throw "参数不规范!";
				return Math.floor(Math.random() * (max - min + 1) + min);
			}

        // 即使只有一个box,也是返回的一个数组集合
        var box = document.getElementsByClassName('box')[0];
        console.log(box);

        // 获取box下面的item, class 是可以通过用元素对象获取,但是id(唯一)只能用document获取
        items = box.getElementsByClassName('item');
        console.log(items);


        // 定义update函数,并且指定形参 n1 和 n2
        // 不传参数,默认50-500的范围,不传递,形参是undefined      
        function update(n1 = 50,n2 = 500) {
            console.log(n1,n2);
            // 优化处理 防止使用者不传递参数
            n1 = n1 == undefined ? 50 : n1;
            n2 = n2 == undefined ? 500 : n2;

           
            for (var i = 0; i < items.length; i++) {
                // 产生一个随机颜色
                var r = randomNumber(0,255);
                // console.log(r);
                var g = randomNumber(0,255);
                var b = randomNumber(0,255);

                // 修改元素
                items[i].style.backgroundColor = "rgba(" + r + "," + g + "," + b + ")";

                // 随机高度[10 150]
                var h = randomNumber(n1,n2);
                items[i].style.height = h + "px";
                items[i].style.lineHeight = h + "px";
            }
        }
        // 执行
        // 传递实参
        update(100,500);
        // update("abc",500);

    </script>
</body>

</html>

效果同上

会过敏的企鹅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS随机颜色
weixin_44021910的博客
07-11 1846
var getRandomColor = function() { return '#' + (function(color) { return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color); })(''); } 随机生成6个
javascript随机变色实例代码
10-16
JavaScript随机变色是一种通过JavaScript代码让网页元素（通常是HTML页面中的一个块级元素）背景颜色随时间不断变化的编程技术。它主要依赖于JavaScript的定时器功能和随机数生成函数来实现。下面，我们将详细地解析...
javascript小练习实现颜色随机变化
张亚运的专栏
11-26 1752
代码如下： 数学对象实例 function changeColor(){ var red = Math.ceil(Math.random()*255); var green = Math.ceil(Math.random()*255); var blue = Math.ceil(Math.random()*255); var color = "#"+red.to
Javascript利用封装实现，多个部分的随机变色
Jmyeat的博客
02-29 181
随机变色 //随机变色 btn.onclick = function (){ setRandomColor(body,"red"); //实现body的随机变色 setRandomColor(btn,"green"); //实现button的随机变色 setRandomColor(box,"bule"); ...
js 点击生成div随机（宽高，颜色，位置）
u012120710的博客
03-24 1430
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
Js实现随机div颜色位置——满天星效果
进击的葱
12-13 2481
效果如下： ———————————————————————————————— ———————————————————————————————— ———————————————————————————————— 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=...
javascript 背景和字体颜色自动变色
男儿当自强
09-19 4157
背景颜色：document.bgColor设定； 前景颜色：document.fgColor设定； <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here var n=0; var arr=new Array("blue",
基于javascript实现随机颜色变化效果
10-22
整体上，通过以上两种方法的实践和演示，我们能够理解JavaScript是如何在网页中实现动态效果的，同时也掌握了生成随机颜色值的基础技能。这对于学习和掌握JavaScript编程，尤其是前端开发中动态内容的实现，具有很好...
基于JavaScript实现随机颜色输入框
10-20
总结来说，文档介绍的“基于JavaScript实现随机颜色输入框”的知识点涵盖了JavaScript语言的基础使用、DOM操作、HTML和CSS的应用、随机数的生成、事件处理、循环语句的运用以及页面元素值的获取和清空。这些知识点...
javascript生成随机颜色示例代码
10-25
因此，每当页面加载时，每个列表项都会有一个独特的随机颜色背景，这为用户提供了动态和视觉上的吸引力。 这个示例不仅展示了JavaScript生成随机颜色的基本方法，还展示了如何将JavaScript与CSS结合，动态地改变...
多个固定面积的矩形在容器中自动布局
10-07
最近碰到一个功能，需要在网页上分块显示资源信息，用面积来表示资源大小，做了个原型。
javascript实现随时变化着的背景颜色
10-24
该函数接受两个参数rMin和rMax，分别代表随机数的最小值和最大值，通过Math.random()函数计算出一个0到1之间的随机小数，再乘以rMax-rMin得到一个指定范围内的随机数。为了得到一个整数，我们使用Math.round()函数对...
js中的几种随机排序方案
积少成多
04-03 8003
欢迎访问我的个人博客：http://www.xiaolongwu.cn 今天我们来看看实现随即排序的几种做法 方法一 思路为：遍历数组，每次循环都随机一个在数组长度范围内的数，并交换本次循环的位置和随机数位置上的元素 function randomSort1(arr){ for (let i = 0, l = arr.length; i &lt; l; i++) { ...
js 自定义div的高度
冉然的博客
01-19 1万+
1、自动获取高度 window.onload=function() { var h=document.documentElement.clientHeight-185;//可见区域高度 ss=document.getElementById(‘tab’); ss.style.height=h+”px”; }
别再用JS里面的Math.random()方法生成随机数
热门推荐
每天都记录一点点！
09-04 3万+
网上常能见到的一段 JS 随机数生成算法如下，为什么用 9301, 49297, 233280 这三个数字做基数？ 见到这个随机数生成算法好几次了，乍看有点鸡肋本来用Math.random()就可以的事。想不清楚为什么他要用9301,49297,233280这三个数字？其中有道理吗？还是仅是随意选的三个数？但是这个组合貌似流传很广。好多小网站源码里都见到过。 function
JS 动态设置页面高度
最新发布
hexianfan的博客
11-15 2750
JS 获取页面高度
js生成随机颜色的两种方法
hdy119yaner的博客
08-30 1万+
js生成随机颜色的两种方法
瀑布流的随机高度
分享人生
10-22 614
class StaggeredHomeAdapter extends RecyclerView.Adapter { private List mDatas; private LayoutInflater mInflater; private List mHeights; public interface OnItemClickLitener { void o
JavaScript定时变换背景颜色的动态效果
`<head>`部分包含了一个JavaScript函数`setcolor()`，该函数的核心作用是生成一个随机的十六进制颜色代码，并将其设置为`mydiv`的背景色。 `setcolor()`函数通过生成一个介于0到16777215（即2^24-1）之间的随机数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值