JavaScriptで実装された日付コントロール現在時刻も読み取ります [html] 日期自動输入制御件 <br>.date-picker-wp { <br>表示: なし; <br>位置: 絶対的; <br>背景: #f1f1f1; <br>左: 40ピクセル; <br>トップ: 40ピクセル; <br>ボーダートップ: 4px ソリッド #3879d9; <br>} <br>.date-picker-wp table { <br>border: 1px Solid #ddd; <br>} <br>.date-picker-wp td { <br>背景: #fafafa; <br>幅: 22ピクセル; <br>高さ: 18ピクセル; <br>ボーダー: 1px ソリッド #ccc; <br>フォントサイズ: 12px; <br>text-align: 中央; <br>} <br>.date-picker-wp td.noborder { <br>border: なし; <br>背景: なし。 <br>} <br>.date-picker-wp td a { <br>color: #1c93c4; <br>テキスト装飾: なし。 <br>} <br>.strong {font-weight: 太字} <br>.hand {カーソル: ポインタ; color: #3879d9} <br> <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.offsetParent) { <br>pos.x += el.offsetLeft; <br>pos.y += el.offsetTop; <br>} <br>posを返します。 <br>}; <br>var init = function (n, config) { <br>window[n] = this; <br>Date.prototype._fd = function () {var d = 新しい日付(this); d.setDate(1);戻り値 d.getDay()}; <br>Date.prototype._fc = function () {var d1 = 新しい日付 (この)、d2 = 新しい日付 (この); d1.setDate(1); d2.setDate(1); d2.setMonth(d2.getMonth()+1);戻り値 (d2-d1)/86400000;}; <br>this.n = n; <br>this.config = 構成; <br>this.D = 新しい日付; <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 = [], year = ['Su','Mo','Tu','We','Th','Fr', 'さ'], 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+''}, <br>_html = '</p> <table cellpadding="0" cellpacing="2">'; <br>y && D.set Year(D.getFull Year() + y); <br>m && D.setMonth(D.getMonth() + m); <br>var 年 = D.getFull Year()、月 = D.getMonth() + 1、日付 = D.getDate(); <br>for (var i=0; i<week.length i con.push </td>></week.length>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", ">>")+''; <br>for (var i=0; i<con.length i _html : con con.length-1></con.length>!!このボックス ? 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 = 'なし'; <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['表示'] = is['表示'] = 'ブロック'; <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 = 'なし'; <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 || '日付ピッカー'; <br>mask.src = 'javascript:false'; <br>マスク.フレームボーダー = 0; <br>box.style.cssText = '位置:絶対;表示:なし;z-index:9999'; <br>mask.style.cssText = '位置:絶対;表示:なし;z-index:9998'; <br>box.title = this.n+'DatePicker'; <br>box.innerHTML = html; <br>document.body.appendChild(box); <br>document.body.appendChild(マスク); <br>返却ボックス; <br>} <br>}; <br>初期化を返します。 <br>}(); <br>onload = function () { <br>new DatePicker('_DatePicker_demo', { <br>inputId: 'date-input', <br>className: 'date-picker-wp', <br>seprator: '-' <br>}); <br>} <br> 生日： * > > html页面内のjs実行順序：1）head标签内の最後の実行2）body标签内の現在の実行3）body标签内にonloadイベントを追加した時点でのjsの最後の実行、即ち、当页面追加完了在执行 注意: 当在 body 签中 onload イベントを追加したとき、head 内で、外部の js が無効になり、当换成が body 内部または
