实验二——倒计时页面的实现

ice三分颜色

已于 2022-03-27 23:06:25 修改

阅读量2.1k

点赞数 11

分类专栏： web前端技术文章标签： html 前端 javascript css3

于 2022-03-27 23:00:46 首次发布

本文链接：https://blog.csdn.net/qq_46007633/article/details/123782873

版权

web前端技术专栏收录该内容

11 篇文章 4 订阅

订阅专栏

实验二——倒计时页面的实现

前言

这是一个老师要求的实验，经查找资料后完成的用JavaScript脚本语言实现倒计时页面的设计。

要求：使用html基本标签、CSS样式实现页面样式的设计。实现页面倒计时功能，时间以秒为单位。并用IE、Chrome、Firefox等主流浏览器打开测试功能。

走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流，一起努力一起成长！需要这里面用到的图片评论即可。

笔芯

1.这是HTML文件

里面包含<script>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <link type="text/css" rel="stylesheet" href="countDown.css"/>
</head>
<body>
<div id="container">
    <div id="header">
        <div style="float: left;">
            <ul>
                <li style="list-style: none;" >
                    <a href="https://www.etao.com/cjfl/flash.htm?spm=a2e0b.20350158.1998559106.1.7688468a66sRka&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_33.44.133.51_26950387_1648358699284%3Bprepvid%3A201_33.44.133.51_26950387_1648358699284&clk1=6cefdcbfa03c1e20c1b07bf0603d5c82" style="color: #999999;">今日团购</a>&nbsp>
                    <a href="https://www.etao.com/search.htm?spm=1002.8113010.2698880.6862&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_33.44.133.51_26950387_1648358699284%3Bprepvid%3A201_33.44.133.51_26950387_1648358699284&clk1=6cefdcbfa03c1e20c1b07bf0603d5c82&nq=%E7%99%BE%E8%8D%89%E5%91%B3%E8%8A%92%E6%9E%9C%E5%B9%B2" style="color: #999999;">&nbsp商品团</a> &nbsp>
                    <a href="https://www.etao.com/search.htm?spm=1002.8113010.2698880.6862&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_33.44.133.51_26950387_1648358699284%3Bprepvid%3A201_33.44.133.51_26950387_1648358699284&clk1=6cefdcbfa03c1e20c1b07bf0603d5c82&nq=%E9%A3%9F%E5%93%81%E4%BF%9D%E5%81%A5" style="color: #999999;">&nbsp食品保健</a>
                </li>
            </ul>
        </div>
        <div id="header_right">
            <br/>
            <a href="#" style="color:#999999;">查看更多同类商品></a>            
        </div>
        <div > 
        <br> </div>
    </div>

    <div id="main" >
        <div id="main_left">
            <img style="height: 400px; width: 400px;" src="img/芒果.jpg">
        </div>
        <div id="middle">
            <h4 id="main_header">百草味酸甜芒果干120g×3袋（每个ID限购20件）</h4>
            <table id="table0">
                <tr>
                    <td class="orange">包邮 </td>  
                    <td class="orange">退货赔运费 </td>  
                    <td class="orange">前35000件24.9元</td>
                </tr>
            </table>
            <div id="main_middle">
            <ul>
                <li> 限量减3元 400余款零食超值让利，抢爆款第二件9.9元</li>
                <li>拍下立减同品质价更低，实在让利</li>
                <li>限首件优惠火速发货，快才痛快</li>
            </ul>
            </div>
            <div id="daojishi"style="text-align:left;">
                <span>
                    <img src="img/倒计时.png"alt="倒计时图片" style=" width: 25px;height: 25px; ">
                </span>
                    <span>距离结束还有：</span>
                    <span id="t_d"></span>天
                    <span id="t_h"></span>小时
                    <span id="t_m"></span>分钟
                    <span id="t_s"></span>秒
                <script>
                    function getRTime(){
                        var EndTime= new Date('2022/9/18 00:00:00');
                        var NowTime = new Date();
                        var t =EndTime.getTime() - NowTime.getTime();

                        var d=Math.floor(t/1000/60/60/24);
                        var h=Math.floor(t/1000/60/60%24);
                        var m=Math.floor(t/1000/60%60);
                        var s=Math.floor(t/1000%60);

                        document.getElementById("t_d").innerHTML = d;
                        document.getElementById("t_h").innerHTML = h;
                        document.getElementById("t_m").innerHTML = m;
                        document.getElementById("t_s").innerHTML = s;
                    }
                    setInterval(getRTime,1000);
                </script>
            </div>
            <div>
                <img src="img/火爆.png"alt="" style="vertical-align:middle;width: 30px;height: 30px; margin-top:-65px;margin-left:500px;">
                <span style="color: red;font-size: 20px; font-weight: bold;position:absolute;margin-top:-30px; margin-left: 1px;">54864</span>
                <span style="color:black;font-size: 20px;position:absolute;margin-left:45px;margin-top:-31px;">&nbsp &nbsp件已付款</span>
            </div>
            <div id="jiage" style="background:red; height: 60px " >
                <form action="http://www.taobao.com">
                    <table style="font-size: 35px;color: white;font-weight: bold;">
                        <tr >
                            <td >￥27.90&nbsp &nbsp </td>
                            <td id="table2">¥66.80</td>
                        </tr>
                    </table>
                    <div style=" float: right;margin-top: -40px;">
                        <input type="image" src="img/马上抢.jpg" value="图片按钮"/>
                    </div>
                </form>
        </div>
            <div id="footer_left">
                <ul style="padding-left: 14px;padding-top: -11px;float: left;">
                    <li style="height: 25px;font-size: 10px;">
                        <img src="img/购物车.png " alt="" style="height: 10px;width: 10px; vertical-align:middle">加入购物车
                        <img src="img/收藏.png " alt="" style=" height: 10px;width: 10px; vertical-align:middle">加入收藏
                        <img src="img/分享.png " alt="" style="height: 10px;width: 10px; vertical-align:middle">分享
                    </li>
                </ul>
            </div>
            <div style="margin-left: 705px;height: 30px;width: 300px;">
                <ul>
                    <li style="font-size: 11px;list-style: none; float: left;"><img style="width: 40px;height: 40px" src="img/二维码.png" alt="" style="vertical-align:middle"></li>
                    <li style="font-size: 11px; color: red;list-style: none; float: left;">  扫码下载手机客户端<br></li>
                    <li style="font-size: 11px; color: gray;list-style: none; float: left;">  享受手机及专属优惠机会</li>

                </ul>
            </div>
    </div>
    </div>
</div>
</body>
</html>
</body>
</html>

2.下面是相应的CSS文件

countDown.css



#container{

    width: 1300px;

    height: 600px;

}

/*div{*/

/*    border:1px;*/

/*    border-style: solid;*/

/*    border-color: red;*/

/*}*/

#header{

    width: 100%;

    height: 80px;

}

li {

    color: #999999;

}

#header_right{

    margin-right: 10px;

    float: right;

}



#main{

    width: 99%;

    height: 450px;

}

#main_left{

    width: 32%;

    float: left;

}

#middle{

    float: right;

    height: 400px;

    width: 67%;

}



.main_header{

    font-size: 18px;

    /*margin-top: -315px;*/

    /*margin-left: 359px;*/

}

#table0{

    border-collapse: separate;

    border-spacing: 20px;

    color: white;

}

.orange{

    background-color: orange;

}



.huobao{

    width: 30px;

    height:30px;

    background-image: url("img/火爆.png");

    background-repeat: no-repeat;



}

#table2{

    font-size: 15px;

    color: white;

    text-decoration: line-through;

}

总结

1.要设置好宽度和高度，不然很容易出现块状元素内的东西大小变化的面目全非，或者图片和想象中的根本不匹配，覆盖住整个页面之类的。

2.在一些小细节上要注意一些文字或者符号是否在它该在的位置，是否有被属性包含，是否包含多了，否则可能无法达到想要的效果。

3.设计页面时有时可能会出现各种问题，不知道出现在哪儿，可以通过对块级元素以及其他出现问题的元素设置边框。来更清楚的查看是否出现问题，以及问题出现在哪里。

ice三分颜色

关注

11
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
4
评论
实验二——倒计时页面的实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档目录前言1.这是HTML文件2.下面是相应的CSS文件总结前言这是一个老师要求的实验，经查找资料后完成的用JavaScript脚本语言实现倒计时页面的设计。要求：使用html基本标签、CSS样式实现页面样式的设计。实现页面倒计时功能，时间以秒为单位。并用IE、Chrome、Firefox等主流浏览器打开测试功能。1.这是HTML文件里面包含<script>标签<!DOCT.
复制链接

扫一扫