Coder Social home page Coder Social logo

countdown-demo's Introduction

倒计时抢购demo

查看效果

GithubPage 查看

或者使用http-server在当前目录下开启一个服务http-server -c-1,查看index.html

思路

两个时间:目标时间18:00:00,当前时间

  • 目标时间-当前时间=时间差 (毫秒差:然后计算时间差中包含多少小时,多少分钟,多少秒)
  • 每间隔一秒中都需要重新获取当前时间(定时器 setInterval),重算时间差等

细节问题优化

使用闭包方式组织js代码

  1. 当前时间是不可以获取客户端本地的事件的,因为本地的时间客户自己可以肆意地修改,需要统一获取服务器的时间然后从响应头中拿到Date
  2. 获取服务器时间会存在时间偏差问题。解决:Ajax请求使用HEAD的方法,只需要获得响应头,并取AJAX状态码为2的状态,减少响应事件
  3. 在页面不刷新的情况下,每间隔1秒,不是再次从服务器获取(如果这样:服务器会崩溃,用户得到的时间误差也会越大),而是基于第一次获取的结果之上,手动给其累加1000ms即可

countdown-demo's People

Contributors

mtt3366 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.