这道题是我在上js课程的时候,老师临时给我们出的一道题,虽然说这种小练习之前也要写过相关代码,但好像把它综合到一起,我就蒙圈了,哎~

实现页面:

java秒杀脚本编写 javascript 秒杀脚本_javascript

目录

 一、实现步骤详解:

1、设置秒杀结束时间

 2、声明变量保存剩余的时间

3、 设置定时器,实现限时秒杀效果

4、 获取时间差,单位秒

 5、判断秒杀是否过期

 6、取消定时器

 7、将剩余的天、小时、分钟和秒显示到指定的网页中

二、完整代码实现: 


 一、实现步骤详解:

1、设置秒杀结束时间

var endtime = new Date('2022-11-10 18:51:00' ), endseconds = endtime.getTime();

 或者:

// 设置据当前时间开始,秒杀的结束时间
//var endtime = new Date(), endseconds = endtime.getTime() + 60* 1000;

 2、声明变量保存剩余的时间

var d = h = m = s = 0;

3、 设置定时器,实现限时秒杀效果

var id = setInterval(seckill, 1000);
      function seckill() {
          var nowtime = new Date();    // 获取当前时间

4、 获取时间差,单位秒

var remaining = parseInt((endseconds - nowtime.getTime()) / 1000);

 5、判断秒杀是否过期

if (remaining > 0) {
          d = parseInt(remaining / 86400);        // 计算剩余天数(除以60*60*24取整,获取剩余的天数)
          h = parseInt((remaining / 3600) % 24);  // 计算剩余小时(除以60*60转换为小时,与24取模,获取剩余的小时)
          m = parseInt((remaining / 60) % 60);    // 计算剩余分钟(除以60转为分钟,与60取模,获取剩余的分钟)
          s = parseInt(remaining % 60);       // 计算剩余秒(与60取模,获取剩余的秒数)

 6、取消定时器

clearInterval(id);

 7、将剩余的天、小时、分钟和秒显示到指定的网页中

document.getElementById('d').innerHTML = d + '天';
document.getElementById('h').innerHTML = h + '时';
document.getElementById('m').innerHTML = m + '分';
document.getElementById('s').innerHTML = s + '秒';

二、完整代码实现: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>限时秒杀</title>
    <style>
      .box{margin:0 auto;position:relative;background:url(images/flash_sale.png);width:702px;height:378px;}
      .box div{float:left;width:50px;height:50px;border:1px solid #ccc;margin-left:5px;line-height:50px;text-align: center;color:red;position:relative;top:260px;left:305px;}
    </style>
  </head>
  <body>
    <div class="box">
      <div id="d"></div>        <!-- 剩余的天数 -->
      <div id="h"></div>        <!-- 剩余的小时 -->
      <div id="m"></div>        <!-- 剩余的分钟 -->
      <div id="s"></div>        <!-- 剩余的秒数 -->
    </div>
    <script>
      //设置秒杀结束时间
      var endtime = new Date('2022-11-10 18:51:00' ), endseconds = endtime.getTime();
      // 声明变量保存剩余的时间
      var d = h = m = s = 0;
      // 设置定时器,实现限时秒杀效果
      var id = setInterval(seckill, 1000);
      function seckill() {
          var nowtime = new Date();    // 获取当前时间
        // 获取时间差,单位秒
         var remaining = parseInt((endseconds - nowtime.getTime()) / 1000);
        // 判断秒杀是否过期
        if (remaining > 0) {
          d = parseInt(remaining / 86400);        // 计算剩余天数(除以60*60*24取整,获取剩余的天数)
          h = parseInt((remaining / 3600) % 24);  // 计算剩余小时(除以60*60转换为小时,与24取模,获取剩余的小时)
          m = parseInt((remaining / 60) % 60);    // 计算剩余分钟(除以60转为分钟,与60取模,获取剩余的分钟)
          s = parseInt(remaining % 60);           // 计算剩余秒(与60取模,获取剩余的秒数)
          // 统一利用两位数表示剩余的天、小时、分钟、秒
          d = d < 10 ? '0' + d : d;
          h = h < 10 ? '0' + h : h;
          m = m < 10 ? '0' + m : m;
          s = s < 10 ? '0' + s : s;
        } else {
          clearInterval(id);        // 秒杀过期,取消定时器
          d = h = m = s = '00';
        }
        // 将剩余的天、小时、分钟和秒显示到指定的网页中
        document.getElementById('d').innerHTML = d + '天';
        document.getElementById('h').innerHTML = h + '时';
        document.getElementById('m').innerHTML = m + '分';
        document.getElementById('s').innerHTML = s + '秒';
      }
    </script>
  </body>
</html>

还是要好好思考啊!!