最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

利用JS制作萬年歷的方法

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 22:32:37
文檔

利用JS制作萬年歷的方法

利用JS制作萬年歷的方法:我們知道,萬年歷在人們的生活中是在平常不過的一種東西了,那么怎樣用JS來實(shí)現(xiàn)在網(wǎng)頁中展示一個與眾不同萬年歷呢 1.HTML布局: <div id=calendar> <div id=month_year> <select id=year></sele
推薦度:
導(dǎo)讀利用JS制作萬年歷的方法:我們知道,萬年歷在人們的生活中是在平常不過的一種東西了,那么怎樣用JS來實(shí)現(xiàn)在網(wǎng)頁中展示一個與眾不同萬年歷呢 1.HTML布局: <div id=calendar> <div id=month_year> <select id=year></sele

我們知道,萬年歷在人們的生活中是在平常不過的一種東西了,那么怎樣用JS來實(shí)現(xiàn)在網(wǎng)頁中展示一個與眾不同萬年歷呢

1.HTML布局:

<div id="calendar">
 <div id="month_year">
 <select id="year"></select>年
 <select id="month"></select>月
 </div>
 <ul id="title">
 <li>星期日</li>
 <li>星期一</li>
 <li>星期二</li>
 <li>星期三</li>
 <li>星期四</li>
 <li>星期五</li>
 <li>星期六</li>
 </ul>
 <ul id="datesUl"></ul>
</div>

1.首先在布局上,可以先用一個id為calender(日歷)的div將你的萬年歷包住,以便我們對萬年歷的位置進(jìn)行設(shè)置;

2.在這個大的div中有三部分: 1. month_year 用以設(shè)置年月; 2.title 用以顯示星期; 3.detesUl 用以顯示具體的日期;

CSS樣式:

*{
 padding: 0;
 margin: 0;
 list-style: none;
 }
 #calendar{
 width: 700px;
 background-color: lightgray;
 margin: 20px auto;

 }
 #calendar::after{
 content: "";
 display: block;
 clear: both;
 }
 #month_year{
 width: 700px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 }
 ul > li{
 float: left;
 width: 100px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 }
 #datesUl > li:empty{
 opacity: 0;
 }
 #datesUl > li:hover{
 background-color: lightblue;
 }

JS代碼分析:

  1. 做一些初始化的處理,給倆個顯示年月的選項(xiàng)卡中添加內(nèi)容便于用戶查找
  2. 構(gòu)造一些我們要用到的函數(shù): 如輸入年月計(jì)算出這個月有幾天,創(chuàng)建添加option及l(fā)i的函數(shù)
<script>
 var yearSelect = document.getElementById('year');
 var monthSelect = document.getElementById('month');
 var datesUl = document.getElementById('datesUl');
 //初始化
 function init(){
 for(var year=1990;year<3000;year++){ //初始化倆個選項(xiàng)卡
 createOption(year,year,yearSelect);
 }
 for(var month=1;month<13;month++){
 createOption(month,month,monthSelect);
 }
 var now = new Date(); //獲取當(dāng)前的日期
 showSelect(now.getFullYear(),now.getMonth()+1); //引用顯示選項(xiàng)卡的函數(shù)

 showDates(); //調(diào)用顯示日期的函數(shù)

 yearSelect.onchange=function(){ //當(dāng)選項(xiàng)卡改變時
 showDates();
 };
 monthSelect.onchange=function(){
 showDates();
 }
 }
 init(); //調(diào)用初始化函數(shù) 
 //創(chuàng)建option的函數(shù)
 function createOption(text,value,parent){
 var option = document.createElement('option');
 option.innerHTML = text;
 option.value = value;
 parent.appendChild(option);
 }
 //獲取當(dāng)前的日期并顯示在選項(xiàng)卡中
 function showSelect(year,month){
 yearSelect.value = year;
 monthSelect.value = month;
 }
 //獲取選擇的年月的第一天是星期幾
 function getDays(year,month){
 var d = new Date(year,month,1);
 return d.getDay();
 }
 //根當(dāng)前的select中的年和月來顯示日期
 function showDates(){
 datesUl.innerHTML= "";
 var year = yearSelect.value;
 var month = monthSelect.value;
 //創(chuàng)建空的li
 for(var i=0;i<getDays(year,month);i++){
 createLi("",datesUl);
 }
 //創(chuàng)建有日期的li
 for(var j=1;j<=getDatesOfMonth(year,month);j++){
 createLi(j,datesUl);
 }
 }
 //創(chuàng)建li并添加至對應(yīng)的容器
 function createLi(text,parent){
 var li = document.createElement('li');
 li.innerHTML = text;
 parent.appendChild(li);
 }
 //創(chuàng)建一個輸入年月計(jì)算出這個月有幾天的函數(shù)
 function getDatesOfMonth(year,month){
 var d = new Date(year,month,0);
 return d.getDate();
 }
</script>

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文檔

利用JS制作萬年歷的方法

利用JS制作萬年歷的方法:我們知道,萬年歷在人們的生活中是在平常不過的一種東西了,那么怎樣用JS來實(shí)現(xiàn)在網(wǎng)頁中展示一個與眾不同萬年歷呢 1.HTML布局: <div id=calendar> <div id=month_year> <select id=year></sele
推薦度:
  • 熱門焦點(diǎn)
專題
Top

抖音扫码关注

手机端二维码

每天分享百科知识!