【前端项目】计时器模版（附代码）

最新推荐文章于 2025-05-07 14:44:55 发布

Maxwell-Wong

最新推荐文章于 2025-05-07 14:44:55 发布

阅读量878

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/m0_52387305/article/details/119410928

定时器样式图：

在这里插入图片描述

代码块：

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <head><h1 class="heading">Timer</h1>
        
    <style>
        .heading{
     
     
            position: relative;
            text-align: center;
            /* margin-right: 380px; */
            
        }
        .wrap{
     
     
            background-color: darkcyan;
            border: pink solid;
            min-height: 350px;
            width: 1000px;
            padding: 10px;
            text-align: center;
            margin: 50px auto;
        }
        .time{
     
     
            margin-bottom: 50px;
        }
        span{
     
     
            color: white;
            font-size: 100px;
            font-family: Arial, Helvetica, sans-serif;
        }
        .control button {
     
     
            width: 80px;
            height: 40px;
            border-radius: 7px;
            border: 1px solid #333;
            outline: none;
            font-size: 20px;

        }
        .control button:nth-child(1){
     
     
            
            font-size: 25px;
            background-color: gold;
            font-family: Arial, Helvetica, sans-serif;
            position: relative