首頁 > 開發者 > JavaScript
JavaScript實現的日期控制項
它還會讀取當前的時間
<html><br /><head><br /><style><br /><!--<br />.wr{font-size: 12pt; line-height: 22px}<br />.wr1 {FONT-SIZE: 12px; LINE-HEIGHT: 200%}<br />.wr2 {FONT-SIZE: 14px; LINE-HEIGHT: 200%}<br />.wr3 {FONT-SIZE: 12px}<br />.wr4 {FONT-SIZE: 12px; LINE-HEIGHT: 150%}<br />// --><br /></style></p><p><title>日期自動輸入控制項</title><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /></head></p><p><style type="text/css"><br />.date-picker-wp {<br />display: none;<br />position: absolute;<br />background: #f1f1f1;<br />left: 40px;<br />top: 40px;<br />border-top: 4px solid #3879d9;<br />}<br />.date-picker-wp table {<br />border: 1px solid #ddd;<br />}<br />.date-picker-wp td {<br />background: #fafafa;<br />width: 22px;<br />height: 18px;<br />border: 1px solid #ccc;<br />font-size: 12px;<br />text-align: center;<br />}<br />.date-picker-wp td.noborder {<br />border: none;<br />background: none;<br />}<br />.date-picker-wp td a {<br />color: #1c93c4;<br />text-decoration: none;<br />}<br />.strong {font-weight: bold}<br />.hand {cursor: pointer; color: #3879d9}<br /></style></p><p><script type="text/javascript"><br />var DatePicker = function () {<br />var $ = function (i)<br />{<br /> return document.getElementById(i)<br />},<br />addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},<br />getPos = function (el) {<br />for (var pos = {x:0, y:0}; el; el = el.offsetParent) {<br />pos.x += el.offsetLeft;<br />pos.y += el.offsetTop;<br />}<br />return pos;<br />};<br />var init = function (n, config) {<br />window[n] = this;<br />Date.prototype._fd = function () {var d = new Date(this); d.setDate(1); return d.getDay()};<br />Date.prototype._fc = function () {var d1 = new Date(this), d2 = new Date(this); d1.setDate(1); d2.setDate(1); d2.setMonth(d2.getMonth()+1); return (d2-d1)/86400000;};<br />this.n = n;<br />this.config = config;<br />this.D = new Date;<br />this.el = $(config.inputId);<br />this.el.title = this.n+'DatePicker';<br />this.update();<br />this.bind();<br />};<br />init.prototype = {<br />update : function (y, m) {<br />var con = [], week = ['Su','Mo','Tu','We','Th','Fr','Sa'], D = this.D, _this = this;<br />fn = function (a, b) {return '<td title="'+_this.n+'DatePicker" class="noborder hand" onclick="'+_this.n+'.update('+a+')">'+b+'</td>'},<br />_html = '<table cellpadding=0 cellspacing=2>';<br />y && D.setYear(D.getFullYear() + y);<br />m && D.setMonth(D.getMonth() + m);<br />var year = D.getFullYear(), month = D.getMonth() + 1, date = D.getDate();<br />for (var i=0; i<week.length; i++) con.push('<td title="'+this.n+'DatePicker" class="noborder">'+week[i]+'</td>');<br />for (var i=0; i<D._fd(); i++ ) con.push('<td title="'+this.n+'DatePicker" class="noborder"> </td>');<br />for (var i=0; i<D._fc(); i++ ) con.push('<td class="hand" onclick="'+this.n+'.fillInput('+year+', '+month+', '+(i+1)+')">'+(i+1)+'</td>');<br />var toend = con.length%7;<br />if (toend != 0) for (var i=0; i<7-toend; i++) con.push('<td class="noborder"> </td>');<br />_html += '<tr>'+fn("-1, null", "<<")+fn("null, -1", "<")+'<td title="'+this.n+'DatePicker" colspan=3 class="strong">'+year+'/'+month+'/'+date+'</td>'+fn("null, 1", ">")+fn("1, null", ">>")+'</tr>';<br />for (var i=0; i<con.length; i++) _html += (i==0 ? '<tr>' : i%7==0 ? '</tr><tr>' : '') + con[i] + (i == con.length-1 ? '</tr>' : '');<br />!!this.box ? this.box.innerHTML = _html : this.createBox(_html);<br />},<br />fillInput : function (y, m, d) {<br />var s = this.config.seprator || '/';<br />this.el.value = y + s + m + s + d;<br />this.box.style.display = 'none';<br />},<br />show : function () {<br />var s = this.box.style, is = this.mask.style;<br />s['left'] = is['left'] = getPos(this.el).x + 'px';<br />s['top'] = is['top'] = getPos(this.el).y + this.el.offsetHeight + 'px';<br />s['display'] = is['display'] = 'block';<br />is['width'] = this.box.offsetWidth - 2 + 'px';<br />is['height'] = this.box.offsetHeight - 2 + 'px';<br />},<br />hide : function () {<br />this.box.style.display = 'none';<br />this.mask.style.display = 'none';<br />},<br />bind : function () {<br />var _this = this;<br />addEvent(document, 'click', function (e) {<br />e = e || window.event;<br />var t = e.target || e.srcElement;<br />if (t.title != _this.n+'DatePicker') {_this.hide()} else {_this.show()}<br />});<br />},<br />createBox : function (html) {<br />var box = this.box = document.createElement('div'), mask = this.mask = document.createElement('iframe');<br />box.className = this.config.className || 'datepicker';<br />mask.src = 'javascript:false';<br />mask.frameBorder = 0;<br />box.style.cssText = 'position:absolute;display:none;z-index:9999';<br />mask.style.cssText = 'position:absolute;display:none;z-index:9998';<br />box.title = this.n+'DatePicker';<br />box.innerHTML = html;<br />document.body.appendChild(box);<br />document.body.appendChild(mask);<br />return box;<br />}<br />};<br />return init;<br />}();<br />onload = function () {<br />new DatePicker('_DatePicker_demo', {<br />inputId: 'date-input',<br />className: 'date-picker-wp',<br />seprator: '-'<br />});<br />}<br /></script></p><p><body bgcolor="#FFFFDB" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><br /><form ></p><p> <table border="0" width="60%" align="center"></p><p> <tr><br /> <td width="45%" class="wr4" align="right"> 生日：</td><br /> <td width="55%" class="wr4"><br /> <input type="text" name="mtime" id="date-input"> <font color="RED">*</font><br /> </td></p><p> </tr></p><p> <tr><br /> <td width="45%" align="right"><input type = "submit" value = "確定"/></td><br /> <td width="55%"><input type = "reset" value = "重設"/></td><br /> </tr><br /></table></p><p></form><br /></body><br /></html>
html頁面中的js執行順序：
1） 在head標籤內的最先執行
2） 在body標籤內的 執行
3） 當在 body標籤中 加了 onload 事件時 對應的 js 最後執行，也就是當頁面載入完在執行
注意：當在 body標籤中 加了 onload 事件時 在head標籤內，所引用外部的 js 不起作用，當換成 在body 內部或</html>之上引用外部js時可正常引用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
