Shulou(Shulou.com)06/01 Report--

This article is about how to implement the countdown function using native js. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Countdown-multiple format calls-Native js encapsulates / * public * / html {height:100%;} body, div, dl, dt, dd, ul, ol, li, H2, h3, h4, h5, h6, H7, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0; padding: 0} ol, ul {list-style: none} body {position relative; min-height:100%; font-size:14px: Font-family: Tahoma, Verdana, "Microsoft Yahei"; color:#333;} a {text-decoration: none; color:#333;} .header {width:960px; padding-top: 15px; margin: 0 auto; line-height: 30px; text-align: right;} .header a {margin: 05px;} .main {width:960px; margin: 50px auto 0;} .code {border:1px dashed # e2e2e2; padding:10px 5px; margin-bottom:25px } pre {font-family: "Microsoft Yahei", Arial,Helvetica; white-space: pre-wrap; / * css-3*/ white-space:-moz-pre-wrap; / * Mozilla,since1999*/ white-space:-pre-wrap; / * Opera4-6percent / white-space:-Omuri premuri wrap.example {padding-top:40px; margin-bottom:90px } .example .call {padding:18px 5px; background:#f0f5f8;} .example h3 {padding-top:20px; margin-bottom:7px;} .example table {width:100%; table-layout:fixed; border-collapse: collapse; border-spacing: 0; border: 1px solid # cee1ee; border-left: 0;} .example thead {border-bottom: 1px solid # cee1ee; background-color: # e3eef8;} .example tr {line-height: 24px; font-size: 13px Example tr:nth-child (2n) {background-color: # f0f5f8;} .example tr th,.example tr td {border-left: 1px solid # cee1ee; word-break: break-all; word-wrap: break-word; padding:0 10px; font-weight: normal;} .example tr th {color: # 555; padding-top: 2px; padding-bottom: 2px; text-align: left;} / * Public * / .countdown {margin-bottom: 15px } / * Encapsulation Code * / (function () {var Countdown = function (el, opts) {var self = this Var defaults = {'format':' hh:mm:ss', / / format 'endtime':', / / end time 'interval': 1000, / / how often is the countdown unit: ms' starttime':r (el) [0] [xss_clean], / / start time 'countEach': function (time) {/ / per unit time departure event, pass in an object Contains time information (month) and time formatted output (format) r (el) [0] [xss_clean] = time ['format']},' countEnd':function (time) {} / / callback event at the end of countdown} opts = opts | | {} For (var w in defaults) {if ("undefined" = = typeof opts [w]) {opts [w] = defaults [w];}} this.params = opts; this.container = r (el); if (this.container.length > 1) {var x = []; return this.container.each (function () {x.push (this, opts)}), x} this._hander=null; this._start=0; this._end=0 This.isTimestamp = isNaN (this.params.starttime) | | isNaN (this.params.endtime); / / whether it is the second count mode this.init ();} Countdown.prototype = {/ / initialize init: function () {var self = this; this.reset ();}, reset:function () {var self = this; if (this.isTimestamp) {this._start = this.params.starttime? This.getTimestamp (this.params.starttime): (+ new Date ()); this._end = this.getTimestamp (this.params.endtime);} else {this._start = this.params.starttime * 1e3; this._end = this.params.endtime * 1e3;} this.count (), count:function () {var self = this; this._hander = setInterval (function () {self._start-=self.params.interval; self.params.countEach (self.getTime (self._start)) If (self._start= 0 & & o.indexOf (">") > = 0) {var l = "div"; for (0 = o.indexOf ("

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.