純javascript製作日曆控制項_javascript技巧

來源:互聯網
上載者:User

以前要用到日曆控制項都是直接從網上下載一套源碼來使用,心裡一直有個梗,就是想自己動手寫一個日曆控制項,最近剛好來了興趣,時間上也允許,於是自己摸索寫了一個,功能還算完善,介面就湊合了。可能最值得說的一點就是讓input控制項內部右邊顯示一個按鈕,我是直接給input加了個背景,然後把input的邊框去掉實現的。

這個是最初版的,再往後打算做出純javascript版的,再往後打算用JQuery做一套。

<!doctype html><html><head><meta charset="utf-8"><title>日曆控制項</title><style>#date_text {  background-image: url(images/input.png);  background-repeat:no-repeat;  width: 198px;  height: 27px;  border:none;  padding-left:5px;  cursor:pointer;}#cal_body {  width: 198px;  height: auto;  overflow:hidden;  border: solid 1px #CCCCCC;  display: none;  position:absolute;  z-index:10;}.line {  width:100%;  height:26px;  float:left;  background-color:#0FF;  font-size:14px;}.cube {  float:left;  width:26px;  height:26px;  line-height:26px;  text-align:center;  margin-left:2px;  margin-bottom:2px;}.btn {  float:left;  background-color:#CCC;  margin-left:10px;  width:20px;  height:20px;  text-align:center;  line-height:20px;  border-radius:3px;  border:solid 1px;  margin-top:2px;  cursor:pointer;}.year_month {  float:left;  margin-left:10px;  width:90px;  height:19px;  text-align:center;  line-height:19px;  border-radius:6px;}.end_tag {  height:26px;  line-height:26px;  margin-left:10px;}</style><script>Date.prototype.toFormatString = function(){  var result = this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();  return result;};  var today = new Date();var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的數組var month_small = new Array("4","6","9","11"); //包含所有小月的數組 //判斷數組array中是否包含元素obj的函數,包含則返回true,不包含則返回falsefunction array_contain(array, obj){  for (var i = 0; i < array.length; i++){    if (array[i] == obj)      return true;  }  return false;}//判斷年份year是否為閏年,是閏年則返回true,否則返回falsefunction isLeapYear(year){  var a = year % 4;  var b = year % 100;  var c = year % 400;  if( ( (a == 0) && (b != 0) ) || (c == 0) ){    return true;  }  return false;}function hideCalendar(){  var calbody = document.getElementById("cal_body");  cal_body.style.display = "none";}function showCalendar(){    var calbody = document.getElementById("cal_body");  var style = getDefaultStyle(calbody,"display");  if(style == "none")    cal_body.style.display = "block";  if(style == "block")    cal_body.style.display = "none";    var date_text = document.getElementById("date_text");  var val = date_text.value;  init(val);}function init(val){    clearCube();    var temp_date;  var date_text = document.getElementById("date_text");  if(val == ""){    temp_date = today;    date_text.value = today.toFormatString();  }  else{    temp_date = new Date(val);      }      var year = temp_date.getFullYear();  var month = temp_date.getMonth() + 1;  var date = temp_date.getDate();  temp_date.setDate(1);    var start = temp_date.getDay() + 7;  var end;    if(array_contain(month_big, month)){    end = start + 31;  }  else if(array_contain(month_small, month)){    end = start + 30;  }  else{    if(isLeapYear(year)){      end = start + 29;    }    else{      end = start + 28;    }  }    for(var i = start; i < end; i++){    var cube = document.getElementsByClassName("cube").item(i);    cube.innerHTML = i - start + 1;        cube.style.cursor = "pointer";    cube.onmouseover = function(){      this.style.backgroundColor = '#0FF';    }    if(date == (i - start + 1))      cube.style.backgroundColor = '#0FF';    else{      cube.onmouseout = function(){        this.style.backgroundColor = '';      }    }    cube.onclick = function(){      date_text.value = year + "-" + month + "-" + this.innerHTML;            cal_body.style.display = "none";        }  }    document.getElementById("text_year").value = year;  document.getElementById("text_month").value = month;}function clearCube(){  for(var i=7; i < 49; i++){    var cube = document.getElementsByClassName("cube").item(i);    cube.innerHTML = "";    cube.style.backgroundColor = "";  }}function yearDown(){  if(isValidated()){    var old_year = parseInt(document.getElementById("text_year").value);    if(old_year > 1960){      var year = old_year - 1;      var month = parseInt(document.getElementById("text_month").value);      var val = year + "-" + month + "-" + 1;      init(val);    }  }}function yearUp(){  if(isValidated()){    var old_year = parseInt(document.getElementById("text_year").value);    if(old_year < 2050){      var year = old_year + 1;      var month = parseInt(document.getElementById("text_month").value);      var val = year + "-" + month + "-" + 1;      init(val);    }  }}function monthDown(){  if(isValidated()){    var old_month = parseInt(document.getElementById("text_month").value)    if(old_month > 1){      var year = parseInt(document.getElementById("text_year").value);      var month = old_month - 1;      var val = year + "-" + month + "-" + 1;      init(val);    }    else {      var year = parseInt(document.getElementById("text_year").value) - 1;      var month = 12;      var val = year + "-" + month + "-" + 1;      init(val);    }  }    }function monthUp(){  if(isValidated()){    var old_month = parseInt(document.getElementById("text_month").value)    if(old_month < 12){      var year = parseInt(document.getElementById("text_year").value);      var month = parseInt(document.getElementById("text_month").value) + 1;      var val = year + "-" + month + "-" + 1;      init(val);    }    else {      var year = parseInt(document.getElementById("text_year").value) + 1;      var month = 1;      var val = year + "-" + month + "-" + 1;      init(val);    }  }}function isValidated(){  var year = document.getElementById("text_year").value;  var month = document.getElementById("text_month").value;  if(isNaN(year) || isNaN(month)){    alert("請輸入正確的年份/月份");    return false;  }  else{    if(year%1 != 0 || month%1 != 0){      alert("請輸入正確的年份/月份");      return false;    }    else{      year = parseInt(year);      if(year < 1960 || year > 2050){        alert("請輸入1960~2050之間的年份!");        return false;      }      else if(month < 1 || month >12){        alert("請輸入正確的月份!");        return false;      }      else{        return true;      }    }  }}function changed(){  if(isValidated()){    var year = document.getElementById("text_year").value;    var month = document.getElementById("text_month").value;    var val = year + "-" + month + "-" + 1;    init(val);  }}function getDefaultStyle(obj,attribute){    return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];}</script></head><body><div id="container"><div id="input_bg"><input id="date_text" type="text" readonly onClick="showCalendar()" /></div><div id="cal_body">  <div class="line"><div class="btn" id="year_down" onClick="yearDown()">-</div><input class="year_month" id="text_year" value="2015" onChange="changed()"><div class="btn" id="year_up" onClick="yearUp()">+</div><span class="end_tag">年</span></div>  <div class="line"><div class="btn" id="month_down" onClick="monthDown()">-</div><input class="year_month" id="text_month" value="5" onChange="changed()"><div class="btn" id="month_up" onClick="monthUp()">+</div><span class="end_tag">月</span></div>  <div class="cube">日</div>  <div class="cube">一</div>  <div class="cube">二</div>  <div class="cube">三</div>  <div class="cube">四</div>  <div class="cube">五</div>  <div class="cube">六</div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div>  <div class="cube"></div></div><div></body></html>

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.