解密"秒杀"软件 | JavaScript最佳入门案例

网上购物变得的越来普遍,各种"秒杀"抢购的活动越来越多,除了早年雷布斯的"饥饿营销",大多数秒杀活动还是有货源的,我们秒不到货,大多是因为我们败给了计算机脚本...

秒杀

用javascript实现秒杀倒计时的效果

模拟一个激动人心的 "剁手节" 的倒计时页面!

2017年"剁手节"倒计时

chrome "奇技淫巧" 之 脚本编辑器!

使用chrome自带的脚本工具,写一个秒杀的脚本!

打开脚本工具
编写脚本

运行脚本,脚本自动"秒杀"

运行脚本

这是运行时的效果演示,最后一次我的鼠标没动,脚本模拟鼠标完成了最后的点击!

最终效果演示!

javascript与java是什么关系?

大概就是 "雷锋" 与 "雷锋塔"的关系!

为啥要学javascript, javascript的优势是什么?

其实原生的javascript语言并不好学,所以很多人选择折中去学jquery(jquery是javascript的一个库,比javascript稍微容易一些),但我们没有选择,javascript是唯一被各大浏览器原生支持的语言,坦率的讲,javascript的水还是蛮深的,没有几个人敢说自己精通javascript;关于优势:Node.js可以开发服务端,也就是,把javascript玩6了,就可以尝试做全栈了!

示例中源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>剁手倒计时!</title>

    <script>

        window.onload = function () {

            //获取HTML对象
            var oTime_box = document.getElementById("time_box");

            //设置秒杀开始时间,这里以 "剁手节|双十一"为例
            // 0-11 表示 12个月(容易出错!)

            // 1-31 表示一个月的某天(这个要看月份具体的情况,也可能是1-28,1-29,1-30)

            // 0-23 表示一天的24小时
            // 0-59 表示一小时的60分钟
            // 0-60 表示一分钟的60秒
            //今天的时间
            //var targetDate = new Date(2017, 8, 18, 12, 0, 0);
            //双十一的时间
            var targetDate = new Date(2017, 10, 11, 0, 0, 0);

            //setInterval函数可以每隔一段的时间调用一次目标函数
            // 我们为了精准, 每隔0.1秒,更新一次当前时间

            setInterval(update_time, 100);
            //页面加载完成后立刻调用一次函数
            update_time();


            //更新时间的主函数,这是最常见的函数命名方式

            function update_time() {

                //获取当前时间
                var nowDate = new Date();

                //获取据目标时间的    秒数

                console.log(targetDate);
                var edge_millisecond = parseInt((targetDate - nowDate)/1000);


                // 获取天数

                var edge_days = parseInt(edge_millisecond/(24*60*60));

                //获取小时数

                var edge_hours = parseInt(edge_millisecond%(24*60*60)/3600);

                //获取分钟数

                var edge_minutes = parseInt(edge_millisecond%(24*60*60)%(60*60)/60);

                //获取秒数

                var edge_seconds = parseInt(edge_millisecond%(24*60*60)%(60*60)%60);


                // 为了美观,使显示的数字一直保持两位
                if (edge_seconds<=9){

                    edge_seconds = "0" + edge_seconds;

                }

                if (edge_minutes <=9){

                    edge_minutes = "0" + edge_minutes;

                }


                if (edge_hours <=9){

                    edge_hours = "0" + edge_hours;

                }

                if (edge_days <=9){

                    edge_days = "0" + edge_days;

                }



                // 为了避免出现负值,时间全部归零
                if (nowDate >= targetDate){

                    edge_days = "00";
                    edge_hours = "00";
                    edge_minutes = "00";
                    edge_seconds = "00";

                }


                var result_time = '距离"双十一 , 剁手节"<br>还剩' + edge_days + "天" + edge_hours + "小时" + edge_minutes + "分" + edge_seconds +"秒";

                oTime_box.innerHTML = result_time;

                //获取点击区域
                var obu = document.getElementById("butt");

                // 点击事件逻辑!
                obu.onclick = function () {

                    if (nowDate > targetDate){
                        alert("抢购成功!")

                    }else{

                        alert("还没到抢购时间呢!")


                    }
                };


            }


        }

    </script>


    <style>

        #time_box{

            font-size: 50px;

            margin: 0 auto;


        }

        .content{

            width: 800px;

            margin: 15% auto;

            text-align: center;

            line-height: 100px;
            color: #ea6f5a;;

        }

        #butt{
            width: 200px;
            height: 80px;
            background-color: #ea6f5a;
            border-radius: 3px;
            text-align: center;
            line-height: 80px;
            color: white;
            margin: 0 auto;
            font-size: 35px;
            top: 30%;

        }

        .my_button{

            width: 100%;


        }




    </style>


</head>
<body>

<!--秒杀内容-->
<div class="content">

<div id="time_box">

</div>
</div>


<!--按钮-->
<div class="my_button">

<div id="butt">

    点击秒杀!

</div>
</div>


</body>
</html>

秒杀脚本

// 获取按钮对象
var obu = document.getElementById("butt");

// 设置秒杀时间(默认为11月11号0时0分秒)
var targetDate = new Date(2017, 10, 11, 0, 0, 0);

// 获取当前时间
var nowDate = new Date();

//用递归实现,循环监听时间的变化,
function check_click(){

    nowDate = new Date();
    //时间到,则进行点击
    if (nowDate > targetDate){
    
        obu.onclick();
    }

    else{
    //每隔 1秒检测一次时间
    setTimeout(check_click,1000); 
    }



}

console.log("开始!");
//调用函数
check_click();

如果您喜欢python,喜欢故事,请点赞或关注我!您的支持是对作者最大的鼓励!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • 前言 本篇将完成前端页面的设计与开发,包括: 使用Bootstrap开发页面结构 交互逻辑编程 一、使用Boots...
    MOVE1925阅读 2,778评论 0 4
  • 项目简介 本项目是使用SSM框架开发的高并发限时秒杀web应用。 项目功能介绍: 商品秒杀开启前,用户能看到商品秒...
    霍运浩阅读 1,870评论 0 1
  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,598评论 1 180
  • 前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的...
    珍此良辰阅读 2,376评论 1 9
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,400评论 1 45