大数据案例1

彼得潘多

已于 2022-12-20 18:31:02 修改

阅读量148

点赞数 1

文章标签：前端 javascript react.js

于 2022-12-17 11:46:16 首次发布

本文链接：https://blog.csdn.net/m0_62491747/article/details/128351917

版权

HTML

一.全选，全不选，反选功能
- 二.随机改变背景颜色
- - 三.显示当前时间

一.全选，全不选，反选功能

1.我们先来看一下我们的结果：

这里是引用
2.我们通过最简单的方式，来实现这三个功能，我的代码如下：

<html>
 <head>
    <title>彼得潘</title>
 </head>
 <body>
    <input type="checkbox" name = "sport"/>足球
    <input type="checkbox" name = "sport"/>篮球
    <input type="checkbox" name = "sport"/>电子竞技
    <input type="checkbox" name = "sport"/>排球<hr>
    <input type="button" name = "selectall" value = "全选"    onclick="selectall()"/> 
    <input type="button" name = "selectnone" value = "全不选" onclick="selectnone()"/> 
    <input type="button" name = "selectback" value = "反选"   onclick="selectback()"/> 
</body>
<script type ="text/javascript">
    function selectall()
    {
        var sports = document.getElementsByName("sport");
        for (i=0;i<sports.length ;i++ )
        {
            var sportname =sports[i];
            sportname.checked= true;

        }
    }
    function selectnone()
    {
        var sports = document.getElementsByName("sport");
        for (i=0;i<sports.length ;i++ )
        {
            var sportname =sports[i];
            sportname.checked= false;

        }
    }
        function selectback()
    {
        var sports = document.getElementsByName("sport");
        for (a=0;a<sports.length ;a++ )
        {
            var sportname1 =sports[a];
            if(sportname1.checked==false)
            {
                sportname1.checked= true;
            }else{
                sportname1.checked=false
            }

        }
    }
</script>
</html>

3.我相信还会有更多的办法，一起发掘吧。

二.随机改变背景颜色

1.我们通过HBuilder来实现这个功能，单机选框，颜色改变，结果如图：

在这里插入图片描述
2.这是一个很简单的案列，大家都可以试试。我的代码如图所示：

<html>
	<head>
		<meta charset="utf-8">
		<title>彼得潘</title>
	</head>
	<body>
		 <input type="button" value="单击随机改变网页的背景颜色">
		 <script type="text/javascript">
		 	 //console.log(document.querySelector('input'));
			 document.querySelector('input').onclick = function(){
				 //document.body.style.backgroundColor = '#ccc';
				 //document.body.style.backgroundColor = 'rgb(255,0,0)';
				 //【0，255】 的随机整数
				 //Math.random() --> [0,1)的小数
				 //3.6 --->3
				 //Math.floor() 向下取整
				 let r = Math.floor(Math.random() * 256);   //【0，255】 的随机整数
				 let g = Math.floor(Math.random() * 256); 
				 let b = Math.floor(Math.random() * 256); 
				 
				 
				 //字符串的拼接
				 //document.body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
				 
				
				
				 document.body.style.backgroundColor = `rgb(${r},${g},${b})`;
				 
			 }
		 </script>
	</body>
</html>