【web项目】任务倒计时网页

最新推荐文章于 2024-05-16 18:00:36 发布
最新推荐文章于 2024-05-16 18:00:36 发布
阅读量1.4k 收藏 5
点赞数 1
文章标签： 前端 php 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65431212/article/details/127183222
版权

文章目录

前言

本来想写一个桌面的，但是看文章说用java和python写更加好，按现在的任务安排来说还是算了。用web写的具体方法我没看到。

模板

逛youtube，选定了
在这里插入图片描述

选定背景图片

最后选择了

  1. 修改尺寸不易损坏画质
  2. 衬托上方黑体字体
    在这里插入图片描述

加上倒计时组件

  1. 不会js暂时，又去copy了

原码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>倒计时</title>
</head>
<body>
    <h1 id="timer"></h1>
    <script>
        function leftTimer(year, month, day, hour, minute, second) {
            var leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date()); //计算剩余的毫秒数
            var days = parseInt(leftTime / 1000 / 60 / 60 / 24); //计算剩余的天数
            var hours = parseInt(leftTime / 1000 / 60 / 60 % 24); //计算剩余的小时
            var minutes = parseInt(leftTime / 1000 / 60 % 60); //计算剩余的分钟
            var seconds = parseInt(leftTime / 1000 % 60); //计算剩余的秒数
            // days = checkTime(days);
            // hours = checkTime(hours);
            // minutes = checkTime(minutes);
            // seconds = checkTime(seconds);
            setInterval("leftTimer(2022,10,7,23,59,59)", 1000); //传入目标时间
            document.getElementById("timer").innerHTML = "距离双十一狂欢购物节还有" +days + "天" + hours + "小时" + minutes + "分" + seconds +
                "秒";
        }

        // function checkTime(i) { //将0-9的数字前面加上0，例1变为01
        //     if (i < 10) {
        //         i = "0" + i;
        //     }
        //     return i;
        // }
        leftTimer();
    </script>
</body>

</html>
  1. 无法把倒计时天、小时、分钟、秒数直接分开

getElementById处稍作修改，拆分为小类，利用相对位置各自分开

js

            // document.getElementById("timer").innerHTML = days + " " + " " + hours 
            // + " " + minutes + " " + seconds + " ";
            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;
            document.getElementById("seconds").innerHTML = seconds;

html

		<div class="d1">
            <div id="days"></div>
            <div class="sub">Days</div>
        </div>
        <div class="d2">
            <div id="hours"></div>
            <div class="sub">Hours</div>
        </div>
        <div class="d3">
            <div id="minutes"></div>
            <div class="sub">Minutes</div>
        </div>
        <div class="d4">
            <div id="seconds"></div>
            <div class="sub">Seconds</div>
        </div>

css

.d1{
    position: relative;
    margin-top: 280px;
    /* color: #B5E61D; */
    
}
#days{
    font-weight: bold;
    font-size: 56px;
}
.sub{
    /* position: absolute; */
    font-size: 20px;
    /* 与父类位置的相对位置 */
    margin-top: 5px;
}

.d2{
    position: relative;
    margin-top: 280px;
    margin-left: 50px;
}
#hours{
    font-weight: bold;
    font-size: 56px;
}
.sub{
    /* position: absolute; */
    font-size: 20px;
    /* 与父类位置的相对位置 */
    margin-top: 5px;
}

.d3{
    position: relative;
    margin-top: 280px;
    margin-left: 50px;    
}
#minutes{
    font-weight: bold;
    font-size: 56px;
}
.sub{
    /* position: absolute; */
    font-size: 20px;
    /* 与父类位置的相对位置 */
    margin-top: 5px;
}

.d4{
    position: relative;
    margin-top: 280px;
    margin-left: 50px;    
}
#seconds{
    font-weight: bold;
    font-size: 56px;
}
.sub{
    /* position: absolute; */
    font-size: 20px;
    /* 与父类位置的相对位置 */
    margin-top: 5px;
}

加入留言板

还是不会js，copy中。。
原码：

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        padding: 100px;
    }

    textarea {
        width: 200px;
        height: 100px;
        border: 1px black solid;
        /* 不设置轮廓 */
        outline: none;
        /* 设置其不能改变长宽 */
        resize: none;
    }

    li {
        width: 300px;
        padding: 5px;
        background-color: #B5E61D;
        font-size: 15px;
        margin: 15px 0;
    }

    li a {
        float: right;
    }
</style>

<body>
    <textarea></textarea>
    <button>发布</button>
    <ul ></ul>
    <script>
        //1、获取元素
        var txt = document.querySelector("textarea");
        var btn = document.querySelector("button");
        var ul = document.querySelector("ul");
        //2、给button绑定点击事件
        btn.onclick = function () {
            if (txt.value == "") {//当文本框中没有文字时，提示
                alert("您没有输入内容")
            } else {
                //创建元素li作为留言区
                var li = document.createElement("li");
                //将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行
                li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>"
                txt.value = "";//添加之后文本框的内容清空
                //将留言添加到ul中，而且在最上方
                ul.insertBefore(li, ul.children[0]);
                //当点击删除时删除ul中的li
                var as = document.querySelectorAll("a");
                //循环给每个删除绑定事件
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        //删除当前a标签所在位置的父节点li
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>

修饰时间（完整代码）

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width:1550px;
    height: 800px;;
    position: relative;
    display: flex;
    /* 左右居中 */
    justify-content: center; 
    /* 上下居中 */
    /* align-items: center; */
    min-height: 100vh;
    overflow:hidden;
}

.content{
    position: absolute;
    width:100%;
    height:100%;
    background: url(14.jpg);
    background-repeat: no-repeat;
    background-position: center 0;
}
.title{
    position: absolute;
    margin-top: 120px;
    font-size: 66px;
    /* font-weight: bold; */
}

.mission{
    position: absolute;
    margin-top: 220px;
    font-size: 46px;
    color: #ED6769;
}

.d1{
    position: relative;
    margin-top: 280px;
    /* color: #B5E61D; */
    
}
#days{
    font-weight: bold;
    font-size: 56px;
}
.sub{
    /* position: absolute; */
    font-size: 20px;
    /* 与父类位置的相对位置 */
    margin-top: 5px;
}

.d2{
    position: relative;
    margin-top: 280px;
    margin-left: 50px;
}
#hours{
    font-weight: bold;
    font-size: 56px;
}
.sub{
    /* position: absolute; */
    font-size: 20px;
    /* 与父类位置的相对位置 */
    margin-top: 5px;
}

.d3{
    position: relative;
    margin-top: 280px;
    margin-left: 50px;    
}
#minutes{
    font-weight: bold;
    font-size: 56px;
}
.sub{
    /* position: absolute; */
    font-size: 20px;
    /* 与父类位置的相对位置 */
    margin-top: 5px;
}

.d4{
    position: relative;
    margin-top: 280px;
    margin-left: 50px;    
}
#seconds{
    font-weight: bold;
    font-size: 56px;
}
.sub{
    /* position: absolute; */
    font-size: 20px;
    /* 与父类位置的相对位置 */
    margin-top: 5px;
}

/* 留言板 */
.title1{
    position: absolute;
    left:0px;
    top:0px;
    font-size: 26px;;
    color: black;
}
.broad{
    position: absolute; 
    left:0px;
    top: 46px;
}

textarea {
    /* position: absolute; */
    width: 300px;
    height: 100px;
    border: 1px black solid;
    /* 不设置轮廓 */
    outline: none;
    /* 设置其不能改变长宽 */
    resize: none;

    font-size: 20px;
}

li {
    width: 300px;
    padding: 5px;
    background-color:white;
    font-size: 15px;
    margin: 15px 0;
}

li a {
    float: right;
}

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>倒计时</title>
</head>
<body>
    <div class="content"></div>
    <div class="title">Mission Countdown</div>
    <div class="mission">距离国庆结束还有...</div>
    <!-- <div id="timer" class="timer"></div> -->
    <!-- err2:不能利用空格拉开距离 -->
    <!-- <div id="timer" class="timer"> -->
        <!-- err1 独占一行-->
        <!-- <div id="days"></div><div id="hours"></div><div id="minutes"></div><div id="seconds"></div> -->
        
        <!-- 使用相对位置 + 一个数配合一个sub -->
        <div class="d1">
            <div id="days"></div>
            <div class="sub">Days</div>
        </div>
        <div class="d2">
            <div id="hours"></div>
            <div class="sub">Hours</div>
        </div>
        <div class="d3">
            <div id="minutes"></div>
            <div class="sub">Minutes</div>
        </div>
        <div class="d4">
            <div id="seconds"></div>
            <div class="sub">Seconds</div>
        </div>


        <p class="title1">message board~</p>
        <div class="broad">
            
            <textarea></textarea>
            <button>发布</button>
            <ul ></ul>
        </div>
        
    <script>
        function leftTimer(year, month, day, hour, minute, second) {
            var leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date()); //计算剩余的毫秒数
            var days = parseInt(leftTime / 1000 / 60 / 60 / 24); //计算剩余的天数
            var hours = parseInt(leftTime / 1000 / 60 / 60 % 24); //计算剩余的小时
            var minutes = parseInt(leftTime / 1000 / 60 % 60); //计算剩余的分钟
            var seconds = parseInt(leftTime / 1000 % 60); //计算剩余的秒数
            // days = checkTime(days);
            // hours = checkTime(hours);
            // minutes = checkTime(minutes);
            // seconds = checkTime(seconds);
            setInterval("leftTimer(2022,10,7,23,59,59)", 1000); //传入目标时间
            // document.getElementById("timer").innerHTML = days + " " + " " + hours 
            // + " " + minutes + " " + seconds + " ";
            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;
            document.getElementById("seconds").innerHTML = seconds;
        }

        // function checkTime(i) { //将0-9的数字前面加上0，例1变为01
        //     if (i < 10) {
        //         i = "0" + i;
        //     }
        //     return i;
        // }
        leftTimer();

        // 留言板
        //1、获取元素
        var txt = document.querySelector("textarea");
        var btn = document.querySelector("button");
        var ul = document.querySelector("ul");
        //2、给button绑定点击事件
        btn.onclick = function () {
            if (txt.value == "") {//当文本框中没有文字时，提示
                alert("您没有输入内容")
            } else {
                //创建元素li作为留言区
                var li = document.createElement("li");
                //将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行
                li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>"
                txt.value = "";//添加之后文本框的内容清空
                //将留言添加到ul中，而且在最上方
                ul.insertBefore(li, ul.children[0]);
                //当点击删除时删除ul中的li
                var as = document.querySelectorAll("a");
                //循环给每个删除绑定事件
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        //删除当前a标签所在位置的父节点li
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>
</html>

图片就是上面那张自己保存吧~

缺陷

  1. 留言板发布内容，随着刷新清除
    有空再搞吧，俺累了~

新知识

  1. 【JS】checkTime函数，设置小于10的时间数字格式，例如5秒显示成05秒
  2. 【JS】 parseInt方法接收两个参数，parseInt(string，radix?)；
  • string：要被解析的值。如果参数不是一个字符串，则将其转换为字符串(toString)。字符串开头的空白符将会被忽略。
  • radix：可选。从 2 到 36，表示被解析的值的进制。例如说指定 10 就等于指定十进位。
  1. 【css】margin类，与父类的相对位置
  2. 【css】
    左右居中 justify-content: center;
    上下居中 align-items: center;
  3. ul和li是配合使用的
  4. textarea留言板组件
汪汪想变强
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最新源码库倒计时主页源码
03-21
倒计时主页源码 内有教程 已测试
HTML特效页面（2）--倒计时显示代码（页面美观）
greefgu的博客
06-30 2266
HTML特效页面（2）--倒计时显示代码（页面美观）
Web前端最全element 订单列表中 实现多个倒计时(vue+js)(2)，15个经典面试问题
最新发布
2401_84435138的博客
05-16 444
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
JS制作一个简单的网页倒计时器
Quentin0823的博客
03-01 8548
制作一个简单的网页倒计时器（js原生代码） 实现一个简单的网页倒计时（距离xx年x月x日还剩多少时间），效果是这样的 首先HTML代码部分，我们需要简单编写一个html代码，用来接收倒计时时间显示。 <div id="box"></div> 接下来就是JS代码部分。 首先要知道当前的时间，然后还需要指定一个到期时间，拿到当前时间和指定时间的时间差 function antitime() { var now = new Date(); //获取当前时间
网页特效代码---倒计时代码
岁寒松柏
08-16 744
简单的倒计时代码 &lt;script language="JavaScript"&gt; var urodz= new Date("3/30/2005"); var s="今天离五一劳动节"; var now = new Date(); var ile = urodz.getTime() - now.getTime(); var dni = Math.floor(i...
实现网页倒计时和显示当前时间
2301_76675652的博客
11-29 2498
本文将介绍如何使用 JavaScript 在网页中实现倒计时和显示当前时间的功能。在网页开发中，我们经常需要展示当前时间，同时也可能需要在某些特定场景中进行倒计时。借助 JavaScript，我们可以轻松地实现这些功能。
倒计时插件-jquery.zip
05-20
总之，"倒计时插件-jquery.zip"是一个使用jQuery实现的JavaScript插件，它为Web开发者提供了一种简单的方法来在网页上添加倒计时功能。通过`demo.html`的示例和`time.js`的源代码，我们可以学习如何设置和更新倒计时...
jQuery倒计时插件FlipTimer特效代码
03-20
jQuery倒计时插件FlipTimer是一款非常独特且引人注目的网页倒计时工具，它以其日历翻页的效果在网站设计中广受欢迎。这款插件适用于网站上线、活动开始、产品发布等各种需要时间提示的场景，为用户提供了视觉上的...
项目或者目标倒计时.zip
09-06
【标题】：“项目或者目标倒计时.zip”是一款基于HTML、JavaScript、jQuery和CSS的简单倒计时解决方案，适用于各种场合，如节日庆祝、项目管理或任务跟踪。它无需服务器部署，可直接在本地运行，并能方便地在大屏幕...
JQuery倒计时插件
04-17
**jQuery倒计时插件详解** 在Web开发中，倒计时功能经常被用于各种应用场景，比如活动开始前的预告、考试倒计时、产品...无论是简单的活动倒计时还是复杂的多任务倒计时，这个插件都能为Web应用带来更丰富的交互体验。
倒计时
02-21
综上所述，这个项目是一个基于Web的倒计时工具，利用HTML来构建基本的网页结构，CSS来美化和布局，而JavaScript则提供了动态的时间计算和用户交互功能。对于想要学习或提升JavaScript技能的开发者来说，这是一个很好...
❤️创意网页：迎接高考的倒计时网页(❤️好看好用❤️)HTML+CSS+JS
VLOKL的博客
07-08 1936
❤️创意网页：🌌迎接高考的倒计时网页(❤️好看好用❤️)HTML+CSS+JS
倒计时代码
wangyining070205的博客
03-08 6707
今天学javascript,学到日期时间对象Date(),看到一个电商网站活动倒计时的案例，稍加修改。后来又想到比赛考试，2小时倒计时的例子，也试着实现了。现分享如下： 一、电商网站倒计时 一到了双十一或双十二或者聚划算店铺庆典活动等，电商网站都会出现倒计时的场景，如图所示，“距离结束07:53:58”，每秒钟执行一次。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti
使用 HTML、CSS 和 JS 的简单倒数计时器
2401_84011132的博客
04-09 1292
【代码】使用 HTML、CSS 和 JS 的简单倒数计时器。
JavaScript+html实现倒计时
qq_36507046的博客
07-13 4136
实例化时间对象 语法： let date = new Date() 当前时间 let date = new Date('2021-6-13 9:45:00') 指定时间获取时间对象语法：date.getFullYear() 获得年份date.getMonth() + 1 获得月份，月份的取值范围为0-11，实际月份需要+1date.getDate() 获得月份中的每一天date.getHours() 获得时date.getMinutes() 获得分date.getSeconds() 获得秒。.
html+css+javascript实现倒数计时
qq_53756771的博客
12-15 371
html+css+JavaScript实现倒计时
在html中插入时间倒计时
weixin_42899191的博客
08-23 2961
在HTML中插入时间倒计时的方法有以下几种： 使用JavaScript：使用JavaScript可以在HTML中插入动态的时间倒计时。您可以使用Date对象和定时器函数来计算剩余时间并更新页面上的倒计时显示。这是最常见和灵活的方法。 <!DOCTYPE html> <html> <head> <title>倒计时示例</titl...
html在状态栏中显示时间,html网页时间显示代码和倒计时代码大全
weixin_39862697的博客
05-30 1774
language=JavaScript>var enabled = 0; today = newDate();var day; var date;if(today.getDay()==0) day= "星期日"if(today.getDay()==1) day= "星期一"if(today.getDay()==2) day= "星期二"if(today.getDay()==3) day= "星期三...
网页倒计时
qq_40656849的博客
05-20 228
距离端午节还有几天，在网页中动态的显示出来 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .nav{ width: 600p...
使用VSCode创建元旦倒计时网页
总结来说，这个项目旨在教你如何使用基本的Web技术（HTML、CSS和JavaScript）创建一个元旦倒计时网页。通过VSCode的辅助工具和插件，可以更高效地进行开发，并添加个性化元素，如背景图片和背景音乐，提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值