倒计时js

最新推荐文章于 2024-05-22 01:53:01 发布

yuyuan11

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量212

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yuyuan11/article/details/83097688

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天突发奇想，想到快六级口语考试了，自己还没怎么准备，就像做一个倒计时，耗时一个下午加一个晚上，终于捣鼓出来，当然是借鉴了别人的代码的，在加上自己的修改，还有样式方面的添加。这只是一个基本功能的实现，还存在很多问题，如果输入的时间不合法，该怎么办，还要考虑怎么把这个东西导出来，真正派上用场，还得加油改进。

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        body{
            background: url(56.jpg) no-repeat center 0px;
            background-position: center 0;
            background-size: cover;
        }
		input{
            width:50px;
            height: 20px;
            border:1px solid black;}
        .time1{
            text-align: center;
            color:white;
            font-size: 20px;
            font-family: cursive;
        }
		.time2 span{
            color:white;
            font-size: 150px;
            font-family: cursive;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);}
        .border{
            display:table-cell;
            vertical-align:bottom;
            font-size: 20px;
            color:white;
            text-align: center;
            width: 250px;
            height: 250px;
            border-color: white;
            border-width: medium;
            border:4px solid #FFF;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);}
        .border p{
            position:absolute;
            bottom:10px;
            padding:10px;
            margin:0px;
            text-align: center;
        }
	</style>     
</head>
<body>
	<form class="time1">目的日期：
		<input id="inyear" name="year" type="text"><span>年</span>
		<input id="inmonth" name="month" type="text"><span>月</span>
		<input id="inday" name="day" type="text"><span>日</span>
		<input type="button" value="确定" onclick="show()">
	</form>
	<div class="time2">
		<span id="1"></span>
	</div>
    <div class="border">
        <p>CET6 SPOKENING TEST</p>
    </div>
    <script>
    function show(){
	function mess(){
      var year=Number(document.getElementById("inyear").value);
      var month=Number(document.getElementById("inmonth").value)-1;
      var day=Number(document.getElementById("inday").value);
      //获取截至时间
      var endDate= new Date(year,month,day);
      //获取当前时间
      var nowDate=Date.now();
      //时间差
      var left_time=Math.round((endDate-nowDate)/1000);
      var day1=parseInt(left_time/(3600*24));
      document.getElementById("1").innerHTML=day1;}
      setInterval(mess,1000);}
      </script>
    </body>   
</html>

不知道为什么，图片粘贴不上来？？？？？

yuyuan11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时js

今天突发奇想，想到快六级口语考试了，自己还没怎么准备，就像做一个倒计时，耗时一个下午加一个晚上，终于捣鼓出来，当然是借鉴了别人的代码的，在加上自己的修改，还有样式方面的添加。这只是一个基本功能的实现，还存在很多问题，如果输入的时间不合法，该怎么办，还要考虑怎么把这个东西导出来，真正派上用场，还得加油改进。 &lt;html&gt;&lt;head&gt; &lt;meta charset...
复制链接

扫一扫

专栏目录