一个纯js的秒杀页面

最新推荐文章于 2022-07-07 17:46:11 发布
最新推荐文章于 2022-07-07 17:46:11 发布
阅读量346 收藏 3
点赞数
原文链接：https://my.oschina.net/smzdqiang/blog/749037
版权

 

<html>
<head>
    <title>纯js的一个秒杀页面</title>

        <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        fieldset, img {
            border: 0;
        }
        img {
            border: none;
            margin-top: 5px;
        }
        address, caption, cite, code, dfn, em, strong, th, var {
            font-style: normal;
            font-weight: normal;
        }
        ol, ul {
            list-style: none;
        }
        a {
            color: #333333;
            text-decoration: none;
            font-family: 微软雅黑,黑体,宋体;
            font-size: 12px;
        }
            a:hover {
                text-decoration: none;
            }
        .clear {
            clear: both;
        }
        .hd_left {
            float: left;
        }
        body {
            font-family: 微软雅黑,黑体,宋体;
        }
        .content {
            width: 1000px;
            margin: 0 auto;
        }
        .bg {
                background: url(http://smzdqiang.com/data/attachment/forum/201609/19/131333mtqtuud1yqt9ujur.jpg) no-repeat;
                background-color: #ff0066;
                height: 850px;
                background-position: top center;
            }
            .top {
                background: url(http://smzdqiang.com/data/attachment/forum/201609/19/131251f58t8ktzjkidpqai.jpg) no-repeat;
                height: 254px;
                position: relative;
            }
        .more {
            width: 1000px;
            height: 254px;
            position: absolute;
        }
        /**********************秒杀***********************/
        .top_tab {
            width: 960px;
            height: 490px;
            position: relative;
            overflow: hidden;
            margin-left: 20px;
        }

            .top_tab .on {
                background-color: #ff0;
            }

        .top_times1,
        .top_times2,
        .top_times3 {
            height: 65px;
            width: 320px;
            background-color: #fff;
            cursor: pointer;
            float: left;
        }

        .top_tab p {
            font-size: 30px;
            text-align: center;
            font-weight: bold;
            line-height: 65px;
            color: #333333;
        }

        .top_cont {
            width: 960px;
            height: 490px;
            display: block;
            text-align: center;
            background-color: #ffff00;
        }

            .top_cont .ul1 {
                position: absolute;
                top: 81px;
            }

            .top_cont ul li {
                height: 381px;
                width: 310px;
                margin: 0px 0px 0px 8px;
                float: left;
                background-color: #fff;
                padding-top: 8px;
                position: relative;
            }

            .top_cont .cp_mc {
                color: #000;
                width: 308px;
                height: 25px;
                font-size: 14px;
                line-height: 25px;
                padding-top:15px;
            }

            .top_cont .cp_jg {
                height: 45px;
                width: 254px;
                font-size: 12px;
                line-height: 45px;
                background: none;
                color: #999;
            }

                .top_cont .cp_jg b {
                    color: #ff0099;
                    font-size: 28px;
                }

                .top_cont .cp_jg span {
                    text-decoration: line-through;
                }

            .top_cont .cp_btn_dd, .cp_btn_ks, .cp_btn_js {
                background: url(http://smzdqiang.com/data/attachment/forum/201609/19/131408dpq8sfsjq3xqy3x3.png) no-repeat;
                height: 35px;
                width: 290px;
                margin-left: 13px;
                top: 335px;
                position: absolute;
            }
                .top_cont .cp_btn_dd a,
                .cp_btn_ks a,
                .cp_btn_dd span,
                .cp_btn_ks span, .cp_btn_js a, .cp_btn_js span {
                    height: 35px;
                    width: 290px;
                    line-height: 35px;
                    font-family: 黑体;
                    color: #fff;
                    text-align: center;
                    font-size: 18px;
                    text-decoration: none;
                    display: block;
                }

            .top_cont .cp_btn_dd {
                background-position: 0px 0px;
            }

            .top_cont .cp_btn_ks {
                background-position: 0px -35px;
            }

                .top_cont .cp_btn_ks:hover {
                    background-position: 0px -70px;
                }

            .top_cont .cp_btn_js {
                background-position: 0px -105px;
            }

                .top_cont .cp_btn_js:hover {
                    background-position: 0px -140px;
                }

            .top_cont .cp_shade1,
            .top_cont .cp_shade2,
            .top_cont .cp_shade3,
            .top_cont .cp_shade4,
            .top_cont .cp_shade5,
            .top_cont .cp_shade6,
            .top_cont .cp_shade7,
            .top_cont .cp_shade8 {
                width: 310px;
                height: 250px;
                background: url(http://smzdqiang.com/data/attachment/forum/201609/19/131507w11gcwwv3cyouz2y.png) no-repeat;
                position: absolute;
                top: 0px;
            }

            .top_cont .cp_shade2, .top_cont .cp_shade5, .top_cont .cp_shade8 {
                left: 0px;
            }

            .top_cont .cp_shade3, .top_cont .cp_shade6{
                left: 0px;
            }
        /**********************秒杀***********************/


       
    </style>
    
</head>
<body>
    
    

    <div class="bg" >
        <div class="content">
            <div class="top">
                <a target="_blank" href="http://smzdqiang.com/dataoke/" class="more"></a>
            </div>
            <div class="bg_1_pp">
                <div class="top_tab">
                    <div class="top_times1 on" id="top_times1"><p>10:00</p></div>
                    <div class="top_times2" id="top_times2"><p>14:00</p></div>
                    <div class="top_times3" id="top_times3"><p>20:00</p></div>

                    <div style="display: block;" class="top_cont" id="top_cont1">
                        <ul class="ul1">
                            <li>
                                <a href="http://www.smzdqiang.com " target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/19/131120jkn36r32v6v13uu8.jpg" alt="澜柏多功能隐形眼镜护理液2*10"></a>
                                <div class="cp_mc">产品名称</div>
                                <div class="cp_jg">秒杀价：￥<b>6.60</b>  市场价：<span>40.00</span></div>
                                <div class="cp_btn_dd" id="btn1"><span id="times">0小时35分14秒</span></div>
                                <abbr style=" display: none">2046/10/1 10:00:00</abbr>
                                <div class="" id="shande_1"></div>
                            </li>
                            <li>
                                <a href="http://smzdqiang.com/quan/" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/19/131120jkn36r32v6v13uu8.jpg" alt="蓓拉花恋彩色隐形眼镜半年抛一片装 黑色"></a>
                                <div class="cp_mc">产品名称</div>
                                <div class="cp_jg">秒杀价：￥<b>6.60</b>  市场价：<span>40.00</span></div>
                                <div class="cp_btn_dd" id="btn2"><span id="times1">0小时35分14秒</span></div>
                                <abbr style="display: none">2046/10/1 14:00:00</abbr>
                                <div class="" id="shande_2"></div>
                            </li>
                            <li>
                                <a href="http://smzdqiang.com/dataoke/" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/19/131120jkn36r32v6v13uu8.jpg" alt="捷佳游泳镜AM107"></a>
                                <div class="cp_mc">产品名称</div>
                                <div class="cp_jg">秒杀价：￥<b>6.60</b>  市场价：<span>40.00</span></div>
                                <div class="cp_btn_dd" id="btn3"><span id="times2">0小时35分14秒</span></div>
                                <abbr style="display: none">2046/10/1 21:00:00</abbr>
                                <div class="" id="shande_3"></div>
                            </li>
                          
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    
   
    
    <!--Tab 切换-->
    <script type="text/javascript">

        function tab(id) {
            if (id == 1) {
                $("#top_times1").siblings().removeClass("on");
                $("#top_times1").addClass("on");
            }
            if (id == 2) {
                $("#top_times2").siblings().removeClass("on");
                $("#top_times2").addClass("on");
            }
            if (id == 3) {
                $("#top_times3").siblings().removeClass("on");
                $("#top_times3").addClass("on");
            }
        }
    </script>
    <!--Tab过去遮罩-->
    <script type="text/javascript">
        function shade() {
            var date_time = new Date();
            if (date_time > new Date("2046/10/1 11:00:00")) {
                document.getElementById("shande_1").className = "cp_shade1";
                document.getElementById("btn1").className = "cp_btn_js";
                document.getElementById("btn1").innerHTML = "<a href='http://smzdqiang.com/dataoke/' target='_blank'>&nbsp;<span id='times' style='display:none;'>1</span></a>";
            }
            if (date_time > new Date("2046/10/1 15:00:00")) {
                document.getElementById("shande_2").className = "cp_shade2";
                document.getElementById("btn2").className = "cp_btn_js";
                document.getElementById("btn2").innerHTML = "<a href='http://smzdqiang.com/dataoke/' target='_blank'>&nbsp;<span id='times' style='display:none;'>1</span></a>";

            }
            if (date_time > new Date("2046/10/1 21:00:00")) {
                document.getElementById("shande_3").className = "cp_shade3";
                document.getElementById("btn3").className = "cp_btn_js";
                document.getElementById("btn3").innerHTML = "<a href='http://smzdqiang.com/dataoke/' target='_blank'>&nbsp;<span id='times' style='display:none;'>1</span></a>";
            }
        }
    </script>
    <!--倒计时-->
    <script type="text/javascript">
        function fresh() {
            var endtime = new Date();
            var endcount = document.getElementsByTagName('abbr').length;
            for (var s = 0; s < endcount; s++) {
                endtime[s] = new Date(document.getElementsByTagName('abbr')[s].innerHTML);
            }
            var nowtime = new Date();
            var leftsecond = new Date();
            for (var i = 0; i < endcount; i++) {
                leftsecond[i] = parseInt((endtime[i].getTime() - nowtime.getTime()) / 1000);
            }
            var d = new Array();
            var h = new Array();
            var m = new Array();
            var s = new Array();
            for (var j = 0; j < endcount; j++) {
                d[j] = parseInt(leftsecond[j] / 3600 / 24);
                h[j] = parseInt((leftsecond[j] / 3600) % 24);
                m[j] = parseInt((leftsecond[j] / 60) % 60);
                s[j] = parseInt(leftsecond[j] % 60);
            }
            //document.getElementById("times").innerHTML=__h+"小时"+__m+"分"+__s+"秒";
            for (var k = 0; k < endcount; k++) {
                if (d[k] == 0) {
                    if (k == 0) {
                        document.getElementById("times").innerHTML = h[k] + "小时" + m[k] + "分" + s[k] + "秒";
                    }
                    else {
                        document.getElementById("times" + k).innerHTML = h[k] + "小时" + m[k] + "分" + s[k] + "秒";
                    }
                }
                else {
                    if (k == 0) {
                        document.getElementById("times").innerHTML = d[k] + "天" + h[k] + "小时" + m[k] + "分" + s[k] + "秒";
                    }
                    else {
                        document.getElementById("times" + k).innerHTML = d[k] + "天" + h[k] + "小时" + m[k] + "分" + s[k] + "秒";
                    }
                }
            }
            for (var l = 0; l < endcount; l++) {
                if (leftsecond[l] <= 0) {
                    if (l == 0) {
                        document.getElementById("btn1").className = "cp_btn_ks";
                        document.getElementById("btn1").innerHTML = "<a href='http://www.smzdqiang.com/' target='_blank'>&nbsp;<span id='times' style='display:none;'>1</span></a>";
                    }
                    else if (l == 1) {
                        document.getElementById("btn2").className = "cp_btn_ks";
                        document.getElementById("btn2").innerHTML = "<a href='http://www.smzdqiang.com/' target='_blank'>&nbsp;<span id='times1' style='display:none;'>1</span></a>";
                    }
                    else if (l == 2) {
                        document.getElementById("btn3").className = "cp_btn_ks";
                        document.getElementById("btn3").innerHTML = "<a href='http://www.smzdqiang.com/' target='_blank'>&nbsp;<span id='times2' style='display:none;'>1</span></a>";
                    }
                }
            }
            shade();
        }
        fresh();
        var sh;
        sh = setInterval(fresh, 1000);
    </script>

</body>
</html>

 

转载于:https://my.oschina.net/smzdqiang/blog/749037

chichaojing6253
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯js实现Div在页面垂直居中！可根据浏览器大小的改变而改变！兼容各种浏览器----神器版！
卡布洛技术专栏
05-20 4954
今日，在csdn上看别人提问题的时候看到了这个需求，就是让div在浏览器中垂直居中！水平居中大家肯定都会了，只需要margin:0 auto; 就可以了，但是垂直居中，以前我也是搜了各种网页也解决不了，今天突发奇想，自己用js实现了！ 下面为源代码： 无标题文档 function getWindowSize() {//获取浏览器可见区域高度     va
仿京东秒杀倒计时页面[html+css+js]
01-18
该资源在 ...这篇文章中介绍过，效果图部分代码都有讲解。 这个资源就是这篇文章的代码以及图片资源都有。 ...2.每个模块代码都有注释可...3.没有用到任何的组件，纯html+css+js编写。 4.适合于刚学习完js的人群去了解代码。
一个纯js写的秒杀页面
09-20
一个纯js写的秒杀页面 三个过程：秒杀倒计时 秒杀进行时 秒杀结束
纯js页面跳转整理
521478
05-18 185
js方式的页面跳转1.window.location.href方式    &lt;script language="javascript" type="text/javascript"&gt;           window.location.href="http://updn.cn";     &lt;/script&gt;2.window.navigate方式跳转   &lt;script...
纯js分页,javascript
weixin_46305078的博客
08-12 157
之前做的分页用的是
纯 JS 实现灵活的前端主题切换功能
油墨香^-^的博客
07-07 2294
网站或者应用一键切换主题（简称：换肤）功能，对每个前端开发者来说已经非常常见了，通常是一深一浅，或自由组合衍生出众多主题，或任意主题，这时候，设计一个工程化主题切换功能，并梳理现代前端样式的解决方案显得尤为重要。很久以前，通常的做法是每个颜色主题块编写样式表，切换的时候对应去切换。现代前端主题切换——目前主流的方案往往通过 CSS 变量（CSS 自定义属性）[1]来实现，将主题有关的颜色，通过业务和语义化的方式命名。接下来我们看看前端圈比较知名的UI他们是怎么做的：（1）ElementUI[2] 我们可以
javascript时间排序算法实现活动秒杀倒计时效果
01-21
制做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来，后来问了下一个后台的php同学 他写了个算法给我看了下 ，刚开始看的时候觉得这就是个纯算法，不能转化成页面的dom效果...
高仿京东移动端首页纯js轮播 倒计时 触摸滑动 滚动特效
09-22
【标题】"高仿京东移动端首页纯js轮播 倒计时 触摸滑动 滚动特效"所涉及的知识点主要包括JavaScript基础、移动端适配、CSS3动画、触摸事件处理以及页面滚动效果的实现。下面将逐一详细介绍这些内容。 1. JavaScript...
前端web结课作业 小米商城 纯HTML+CSS
06-20
【描述】提到：“本人原创，可能会有一些小bug但是我没发现有bug”，这表明这是一个个人开发者完成的原创项目，可能存在一些未被发现的编程错误。开发者通常会在开发过程中遇到各种问题，如样式冲突、布局问题或者...
用javascript 实现页面
yzp1152400470yzp的博客
03-15 1345
数组数组是按次序排列的一组值。每个值的位置都有编号（从0开始的）。整个数组用方括号表示。数组的元素可以是不同的数据类型如果在数组中的元素也为数组，那么就构成了个二维数组形式var arr = ['a','b','c']; var arr2 = []; arr2[0] = 'a'; arr2[1] = 'b'; arr2[2] = 'c'; var arr3 = ['a',12,true,{name...
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
10-15
主要介绍了JS实现商城秒杀倒计时功能（动态设置秒杀时间）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
秒杀功能js-自定义时间（可不为整点）
12-20
js实现秒杀功能的时间问题，时间按先后顺序轮巡，每一个时间段结束则自动消失，新的时间段继续往前排列，直到所设置的时间轮巡完毕，
Javascript实现商品秒杀倒计时（时间与服务器时间同步）
10-23
在一些购物商城经常看到有很多商品做秒杀活动，也就是倒计时，本篇文章给大家介绍Javascript实现商品秒杀倒计时（时间与服务器时间同步），需要的朋友可以了解下
原生JS限时秒杀
09-19
大多用于购物类网站，实现限时抢购等功能，类似淘宝，天猫，京东都有····
秒杀HTML
alexliu6711的博客
09-05 250
一：三要素，标签，属性，属性值 二：布局只分行列，每行一个DIV，每列一个DIV 转载于:https://www.cnblogs.com/kaililikai/p/5840991.html
实现倒计时功能js
plumblum的博客
10-11 179
实现倒计时功能js HTML &lt;td id="miaoshaTip"&gt; &lt;input type="hidden" id="remainSeconds" th:value="${remainSeconds}" /&gt; &lt;span th:if="${miaoshaStatus eq 0}"&a
PHP商品秒杀倒计时
java-t-go
07-12 252
&lt;?php //php的时间是以秒算。js的时间以毫秒算 date_default_timezone_set('PRC'); //date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动时间段 $starttimestr = "2011-3-29 8:10:00"; $endtimestr = "2011-3-29 9:43:...
搭建秒杀系统修改html，页面没反应的坑。
u013915286的博客
03-01 151
日了，是缓存的问题，一直在redis中找缓存，且缓存没有更新，所以怎么修改html网页也没反应。 记录下来，坑呀。
秒杀倒计时
Royce1990的博客
07-18 94
setInterval("timer()",1000); // 每隔1S执行一次 function timer(){ var ts = (new Date(2015, 9, 1, 12, 0, 0)) - (new Date()); //设置目标时间，并计算剩余的毫秒数 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);...
帮我写一个京东的不用js的京东秒杀页面
最新发布
04-04
但是，我可以给你一些提示和建议，帮助你设计一个不需要JavaScript的京东秒杀页面。 首先，需要考虑如何实现倒计时功能。可以使用HTML5的time标签来显示倒计时，使用CSS样式来美化显示效果。例如： ``` 距离秒杀...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值