JavaScript日曆效果程式碼例項

admin發表於2017-04-16
JavaScript

分享一段簡單的皮膚式日曆效果。

更多的時間日期可以查閱時間日期特效分類。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
ul > li {
  list-style: none;
  display: inline-block;
  font-size: 16px;
}
#timer {
  margin: 10px auto;
  width: 210px;
  height: 240px;
  font-size: 0px;
  -webkit-text-size-adjust: none;
}
/*去除inline-block 元素間隔*/
#dateMonth {
  width: inherit;
  height: 30px;
}
#dateWeek {
  width: inherit;
  height: 28px;
  border-top: 1px solid #2E2E2E;
  border-bottom: 1px dotted #636363;
}
ul > li {
  width: 30px;
  height: 30px;
  float: left;
  line-height: 30px;
  text-align: center;
}
.today {
  background: #CCCCFF;
}
.showTime {
  width: 150px;
}
.beforeMonth:hover, .nextMonth:hover {
  cursor: pointer;
}
</style>
</head>
<body>
<!-- 採用float 結構 -->
<section id='timer'>
  <ul id='dateMonth'>
    <li class='beforeMonth'><</li>
    <!-- 可新增年和月份 -->
    <li class='showTime'></li>
    <li class='nextMonth'>></li>
  </ul>
  <ul id='dateWeek'>
    <li>日</li>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>
  </ul>
  <ul id='date'></ul>
</section>
<script>
var date = document.getElementById('date');
var showTime = document.getElementsByClassName('showTime')[0];
var beforeMonth = document.getElementsByClassName('beforeMonth')[0];
var nextMonth = document.getElementsByClassName('nextMonth')[0];
var text = ''; //初始化
var toDay = new Date();
var toDayMill = +new Date();
var year = toDay.getFullYear();
var month = toDay.getMonth() + 1;
var day = toDay.getDate();
var week = toDay.getDay();
var timeArr = [];
beforeMonth.onclick = beforeMonthClick;
nextMonth.onclick = nextMonthClick;
console.log(year, month, day, week, toDayMill);
console.log(toDay);
//f_InitDate(day);
f_InitDate(sureDay(year, month), day);
// for(var i=0;i<42;i++){
// }
f_showTime();
 
function beforeMonthClick() {
  if (month === 1) {
    month = 12;
    year = year - 1;
    if (year < 1970) {
      throw ('year is wrong , play try angin');
    }
  } else {
    month = month - 1;
  }
  f_InitDate(sureDay(year, month), day);
  f_showTime();
}
 
function nextMonthClick() {
  if (month === 12) {
    month = 1;
    year = year + 1;
    if (year < 1970) {
      throw ('year is wrong , play try angin');
    }
  } else {
    month = month + 1;
  }
  f_InitDate(sureDay(year, month), day);
  f_showTime();
}
 
function initTime(text) {
  showTime.innerText = text;
}
 
function initDate() {
  /*初始化日期*/
  date.innerHTML = text;
}
 
function f_showTime() {
  var timeshow = '';
  timeshow = year + '-' + month + '-' + day;
  initTime(timeshow);
}
/*計算第一天所在的位置*/
function f_initFirstDay() {
  var weekIndex = new Array(0, 1, 2, 3, 4, 5, 6);
  //toDayMill = toDayMill - (day -1)*24*60*60*1000;
  return new Date('' + year + '-' + month + '-' + 1).getDay();
  // var left = day%7 ;
  // var index = weekIndex.indexOf(week);
  // var divisor = Math.floor(day/7);
  // for(var j=0;j<index+1-left;j++){
  //   text = '<li></li>'+text;
  // }
}
/*確定今天的位置*/
function f_InitDate(count, day) {
 
  text = '';
  var week = f_initFirstDay(day);
  for (var j = 0; j < week; j++) {
    text = '<li></li>' + text;
  }
  for (var i = 1; i <= count; i++) {
 
    // if(i==divisor*7+left-1){
    //         text += '<li>'+day+'<li>';
    // }else{
    //         text += '<li><li>';
    // }
    if (day === i) {
      text += '<li class="today">' + i + '</li>';
    } else {
      text += '<li>' + i + '</li>';
    }
 
  }
 
 
  initDate();
}
/*返回確定月數的天數*/
function sureDay(year, month) {
  var monthArr = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
  var leap = isLeapYear(year);
  if (month == 2 && leap) {
    return 29;
  } else {
    return monthArr[month - 1];
  }
}
/*判斷是否是閏年*/
function isLeapYear(pYear) {
  if ((pYear % 4 == 0 && pYear % 100 != 0) || (pYear % 100 == 0 && pYear % 400 == 0)) {
    return true;
  } else {
    return false;
  }
}
</script>
</body>
</html>


相關文章