【web项目】任务倒计时网页前言模板选定背景图片加上倒计时组件加入留言板修饰时间（完整代码）缺陷新知识

54 阅读 0 评论 36 点赞

我是靠谱客的博主务实马里奥，最近开发中收集的这篇文章主要介绍【web项目】任务倒计时网页前言模板选定背景图片加上倒计时组件加入留言板修饰时间（完整代码）缺陷新知识，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

前言
模板
选定背景图片
加上倒计时组件
加入留言板
修饰时间（完整代码）
缺陷
新知识

前言

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

模板

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

选定背景图片

最后选择了

修改尺寸不易损坏画质
衬托上方黑体字体

加上倒计时组件

不会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>

无法把倒计时天、小时、分钟、秒数直接分开

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

            // 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>

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

缺陷

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

新知识

【JS】checkTime函数，设置小于10的时间数字格式，例如5秒显示成05秒
【JS】 parseInt方法接收两个参数，parseInt(string，radix?)；

string：要被解析的值。如果参数不是一个字符串，则将其转换为字符串(toString)。字符串开头的空白符将会被忽略。
radix：可选。从 2 到 36，表示被解析的值的进制。例如说指定 10 就等于指定十进位。

【css】margin类，与父类的相对位置
【css】
左右居中 justify-content: center;
上下居中 align-items: center;
ul和li是配合使用的
textarea留言板组件

最后

以上就是务实马里奥为你收集整理的【web项目】任务倒计时网页前言模板选定背景图片加上倒计时组件加入留言板修饰时间（完整代码）缺陷新知识的全部内容，希望文章能够帮你解决【web项目】任务倒计时网页前言模板选定背景图片加上倒计时组件加入留言板修饰时间（完整代码）缺陷新知识所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：54 次浏览
发布日期：2024-01-08 08:56:10
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_ogfx_13_j_22_0.html

【web项目】任务倒计时网页前言模板选定背景图片加上倒计时组件加入留言板修饰时间（完整代码）缺陷新知识

概述

文章目录

前言

模板

选定背景图片

加上倒计时组件

加入留言板

修饰时间（完整代码）

缺陷

新知识

最后

评论列表共有 0 条评论

发表评论取消回复

【web项目】任务倒计时网页前言模板选定背景图片加上倒计时组件加入留言板修饰时间（完整代码）缺陷新知识

概述

文章目录

前言

模板

选定背景图片

加上倒计时组件

加入留言板

修饰时间（完整代码）

缺陷

新知识

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复