HTML练手项目——计数器

最新推荐文章于 2024-01-11 23:00:00 发布

kk39yy1

最新推荐文章于 2024-01-11 23:00:00 发布

阅读量303

点赞数

文章标签： html 前端 javascript css

本文链接：https://blog.csdn.net/kk39yy1/article/details/127541048

版权

这是一个关于HTML的小项目，非常noob，不过我会讲的非常详细

1.页面展示

1.整体外观

2.box图片放大

3.hover展示

2.HTML部分

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body class = "body">
    <div class="box">
        <div class="counter">
            Counter
        </div>
        <div class="countervaluebox">
            <div class="countervalue">
                0
            </div>
        </div> 
        <div class="button">
            <button class = "btn1">decrease</button>
            <button class = "reset">R</button>
            <button class = "btn2">increase</button>
        </div>
    </div>   
</body>
</html>

3.CSS部分

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins' sans-serif;
}

body{
    position: relative;
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
}

.box{
    position: relative;
    width:240px;
    height:300px;
    background:rgba(255,255,255,0.1);
    box-shadow: 0 25px 44px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.25);
    z-index: 1;
    backdrop-filter: blur(23px);
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 10px;
}

.counter{
    position: absolute;
    top:10%;
    color:#fff;
    display: flex;
    justify-content: center;
    /*从上向下排*/
    flex-direction: column;
    align-items: center;
    /* 字间隔 */
    letter-spacing: 1px;
    /* 加粗 */
    font-weight:600;
    /* 大小 */
    font-size:1.3rem;
    transition: 0.5s linear;
}

.countervaluebox{
    content: '';
    position: absolute;
    top:40%;
    height:60px;
    width:100%;
    background-color: #00000075;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 5px;
}

.countervalue{
    position: absolute;
    display:flex;
    align-items: center;
    justify-content: center;
      /* 以上都是flex的固定用法 */
    cursor: none;
    color:#fff;
    height:100%;
    width: 100%;
    user-select: none;
    font-size:2.5rem;
    font-weight: 500;
}

.button{
    position: absolute;
    top:70%;
}

.btn2{
    position: absolute;
    height:23px;
    width:70px;
    user-select: none;
    cursor:pointer;
    background-color: black;
    color:#fff;
    border:2px solid rgba(255,255,255,0.780);
    border-radius: 8px;
    left:25px;
}

.reset{
    position: absolute;
    height:23px;
    width:23px;
    user-select: none;
    cursor:pointer;
    background-color: black;
    color:#fff;
    border:2px solid rgba(255,255,255,0.780);
    border-radius: 8px;
    right:-14px;
}
.btn1{
    position: absolute;
    height:23px;
    width:70px;
    user-select: none;
    cursor:pointer;
    background-color: black;
    color:#fff;
    border:2px solid rgba(255,255,255,0.780);
    border-radius: 8px;
    right:20px;
}

.reset:hover{
    transition: 0.5s linear;
    background-color: rgba(165,165,165,0.808);
}

.btn1:hover{
    transition: 0.5s linear;
    background-color: red;
}

.btn2:hover{
    transition: 0.5s linear;
    background-color: green;
}

4.JS部分

let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let reset = document.querySelector('.reset');
let counter = document.querySelector('.countervalue');

let count = 0;

btn2.addEventListener('click',function(){
    
    count++;
    counter.innerHTML = count;
    if(count > 0){
        counter.style.color = 'green';
    }
    else if(count==0)
    {
        counter.style.color = "#fff";
    }
})

btn1.addEventListener('click',function(){

    count--;
    counter.innerHTML = count;
    if(count < 0){
        counter.style.color = 'red';
    }
    else if(count==0)
    {
        counter.style.color = "#fff";
    }
})

reset.addEventListener('click',function(){

    count = 0;
    counter.innerHTML = count;
    
    counter.style.color = "#fff";
})

今天就先更新到这了，主要是把代码上传了一下，下次再更新吧