web进阶任务之随机色

最新推荐文章于 2023-11-04 14:37:44 发布

i初学者i

最新推荐文章于 2023-11-04 14:37:44 发布

阅读量238

点赞数

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/m0_54075643/article/details/125967408

版权

1.1 任务目标

通过随机色例子，您可以练习事件基础、鼠标及键盘事件、窗口事件等相关知识点。

1.2 任务说明

点击界面按钮，会计数点击次数，每点击一次会改变界面颜色

1.3 具体要求

掌握随机色示例的几种实现方式

2.1 任务实现

运用js、css、html来编码实现

2.1.1 html代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机色</title>
    <link rel="stylesheet" href="../web1/css/reset.css">
    <link rel="stylesheet" href="./css/demo2.css">
</head>
<body>
    <div class="main-box">
        <button class="btn">点我一下!</button>
        <span class="count">0</span>
    </div>
</body>
<script src="./js/demo2.js"></script>
</html>

2.1.2 css代码

body{
    background-color: aqua;
}

.main-box{
width: 200px;
height: 600px;
margin: auto;
}

.btn{
    background-color: white;
    width: 80px;
    height: 40px;
    position: relative;
    left: -20px;
    top : 10px;
}

.count{
    display: block;
    font-size: 50px;
    margin:90px auto;
}

2.1.3 js代码

var btn1 = document.querySelector('.btn');
var bdy = document.querySelector('body');
var count = document.querySelector('.count');
var num  = 0;

btn1.addEventListener('click',bodyChange);
btn1.addEventListener('click',countAdd);

function bodyChange()
{
    count.style.color = rColor;
    var rColor = 'rgb('+randow(255)+','+randow(255)+','+randow(255) +')';
    bdy.style.backgroundColor = rColor;
}

function countAdd()
{
    ++num;
    count.innerHTML = num;
}

function randow(number)
{
    return Math.floor(Math.random()*number);
}