前言

本来想写一个桌面的，但是看文章说用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中的livar as = document.querySelectorAll("a");//循环给每个删除绑定事件for (var i = 0; i < as.length; i++) {as[i].onclick = function () {//删除当前a标签所在位置的父节点liul.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中的livar as = document.querySelectorAll("a");//循环给每个删除绑定事件for (var i = 0; i < as.length; i++) {as[i].onclick = function () {//删除当前a标签所在位置的父节点liul.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项目】任务倒计时网页相关推荐

主攻ASP.NET.4.5.1 MVC5.0之重生:Web项目语音朗读网页文本,简单语音提示浏览状态
第一步添加SpeechLib.dll 下载SpeechLib.dll: 在项目中并且引用DLL using SpeechLib; using System.Threading; 第二步调用并使用 ...
web项目引入PDF.js并添加水印禁止下载
目录 web项目引入PDF.js并添加水印禁止下载下载并引入PDF.js实现预览动态预览PDF文件隐藏打开.下载.打印等功能禁止键盘组合按键下载或另存为禁用鼠标操作添加全局水印 PDF文件 ...
基于SSH的整个简单web项目的建立（含配置文件）[所用软件为IntelliJ IDEA 2018.3.3 x64，运行环境为tomcat]
** emp的sql数据库: 2.整个项目的大致文件目录如下图 2.1 首先按照如上图的文件目录添加一些特别的文件,根据自己的需求添加. 2.2 梳理一下SSH整个思想的过程,用如下图SSH中的整个过 ...
用vs打开已有web项目运行时显示网页无法访问
文章目录问题方法问题用vs打开已有web项目运行时显示网页无法访问方法文件管理器点击查看→隐藏的项目√ 删除.vs文件夹,重新启动vs并重新打开项目文件.sln,再次运行即可
新手搭建网页web项目：包括服务器搭建、后台、前端、交互
我本身是学C++的,突然要写一个java项目,顿时感觉无从下手,首先找度娘,可是查了好多,都没有全篇搭建过程,走了第一步就不知道怎么走下一步了,现在分享我的搭建过程,供互相参考学习,有更好的方案欢迎提 ...
IDEA WEB项目，网页出现乱码问题
IDEA WEB项目,网页出现乱码问题一,问题描述 **出现页面乱码的原因有多种,这里我的项目配置文件以及html文件都配置了字符集为UTF-8:所以文件配置错误的可能性较小: 上网查了可能是tom ...
Web项目，网页上传excel文件并解析实战示例
最近写了一个基于poi解析excel文件的工具类,所以想在web项目中测试一下,就做了这个简单的项目.本项目主要使用了 SpringMVC+RESTful+Maven的风格.适合有一定基础的人员. 源 ...
JavaWeb开发---B/S和C/S模式 tomcat服务器 Tomcat项目部署和发布静态网页和动态网页 tomcat对web项目的目录要求使用idea开发工具创建web项目设置默认首页
目录 1. B/S和C/S模式 1.1 C/S模式 1.2 B/S模式 1.3 B/S和C/S区别 2.服务器 3.web 服务器 3.1.IIS 3.2.Tomcat 3.3.Zeus 3.4.Ng ...
网页中调用matlab,在C#的Web项目中调用Matlab代码的步骤
在C#的Web项目中调用Matlab代码的方法为了毕设的图形检索方向的研究,本人需要在信科的师兄师姐们已经完成的C#界面中,调用现在研究的算法的Matlab代码,以便看到实验的效果.前段时间已经拖延 ...
JAVA Web项目中所出现错误及解决方式合集（不断更新中）
JAVA Web项目中所出现错误及解决方式合集前言一.几个或许会用到的软件下载官网二.Eclipse的[preferences]下没有[sever]选项三.Tomcat的安装路径找不到四.T ...

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

文章目录

前言

模板

选定背景图片

加上倒计时组件

加入留言板

修饰时间（完整代码）

缺陷

新知识

【web项目】任务倒计时网页相关推荐

最新文章

热门文章