亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

純javascript制作日歷控件

 更新時間：2015年07月17日 10:39:44   投稿：hebedich  
本文給大家分享的是使用純javascript實現(xiàn)的日歷控件的代碼，筆者也是第一次寫控件，摸索著前行，

以前要用到日歷控件都是直接從網(wǎng)上下載一套源碼來使用，心里一直有個梗，就是想自己動手寫一個日歷控件，最近剛好來了興趣，時間上也允許，于是自己摸索寫了一個，功能還算完善，界面就湊合了?？赡茏钪档谜f的一點就是讓input控件內(nèi)部右邊顯示一個按鈕，我是直接給input加了個背景，然后把input的邊框去掉實現(xiàn)的。

這個是最初版的，再往后打算做出純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"); //包含所有大月的數(shù)組
var month_small = new Array("4","6","9","11"); //包含所有小月的數(shù)組 

//判斷數(shù)組array中是否包含元素obj的函數(shù)，包含則返回true，不包含則返回false
function array_contain(array, obj){
  for (var i = 0; i < array.length; i++){
    if (array[i] == obj)
      return true;
  }
  return false;
}

//判斷年份year是否為閏年，是閏年則返回true，否則返回false
function 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>

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

相關文章

  • javascript制作坦克大戰(zhàn)全紀錄（2）

    javascript制作坦克大戰(zhàn)全紀錄（2）

    上文我們簡單的完成了坦克大戰(zhàn)的雛形，本文我們來繼續(xù)完善坦克大戰(zhàn)，接下來我們來學習制作地圖和碰撞檢測方面的問題。
    2014-11-11
  • JS查找字符串中出現(xiàn)最多的字符及個數(shù)統(tǒng)計

    JS查找字符串中出現(xiàn)最多的字符及個數(shù)統(tǒng)計

    最近在項目中遇到這樣的需求：求字符串'nininihaoa'中出現(xiàn)次數(shù)最多字符。怎么實現(xiàn)呢？下面小編給大家分享具體實現(xiàn)代碼，需要的朋友參考下吧
    2017-02-02
  • javascript加號"+"的二義性說明

    javascript加號"+"的二義性說明

    單個的加號作為運算符在 JavaScript 中有三種作用。
    2013-03-03
  • JavaScript基于libgif.js實現(xiàn)控制gif動畫幀

    JavaScript基于libgif.js實現(xiàn)控制gif動畫幀

    這篇文章主要為大家詳細介紹了JavaScript如何利用libgif.js插件控制gif動畫幀,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-02-02
  • H5手機端多文件上傳預覽插件

    H5手機端多文件上傳預覽插件

    這篇文章主要為大家詳細介紹了H5圖片上傳插件，基于zepto，支持多文件上傳，進度和圖片預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-04-04
  • JavaScript位置參數(shù)實現(xiàn)原理及過程解析

    JavaScript位置參數(shù)實現(xiàn)原理及過程解析

    這篇文章主要介紹了JavaScript位置參數(shù)實現(xiàn)原理及過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-09-09
  • js+canvas實現(xiàn)動態(tài)吃豆人效果

    js+canvas實現(xiàn)動態(tài)吃豆人效果

    本文主要介紹了js+canvas實現(xiàn)動態(tài)吃豆人效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • Vue項目中關于全局css的處理

    Vue項目中關于全局css的處理

    我們在寫CSS的時候，會遇到大量相同的屬性(比如：margin-top:10px)這種屬性幾乎每個vue頁面都有。這個時候，我們可以把css掛載到全局上，供所有vue頁面使用，同時也方便修改。感興趣的同學可以參考一下
    2023-04-04
  • springMVC + easyui + $.ajaxFileUpload實現(xiàn)文件上傳注意事項

    springMVC + easyui + $.ajaxFileUpload實現(xiàn)文件上傳注意事項

    在使用easyUI做前端樣式展示時，遇到了文件上傳的問題，而且是在彈出層中提交表單，想做到不刷新頁面，所以選擇了使用ajaxFileUpload插件。下面通過本文給大家分享springMVC + easyui + $.ajaxFileUpload實現(xiàn)文件上傳注意事項，需要的朋友參考下吧
    2017-04-04
  • JS 清除字符串數(shù)組中,重復元素的實現(xiàn)方法

    JS 清除字符串數(shù)組中,重復元素的實現(xiàn)方法

    下面小編就為大家?guī)硪黄狫S 清除字符串數(shù)組中,重復元素的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05

最新評論