欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js+html+css實(shí)現(xiàn)簡(jiǎn)單日歷效果

 更新時(shí)間:2022年06月20日 08:57:03   作者:好多bug  
這篇文章主要為大家詳細(xì)介紹了js+html+css實(shí)現(xiàn)簡(jiǎn)單日歷效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js+html+css實(shí)現(xiàn)簡(jiǎn)單日歷效果的具體代碼,供大家參考,具體內(nèi)容如下

效果:

遇到的問(wèn)題與解決方法:

1.“日”上移

方法:在“下個(gè)月”button后加上<div>&nbsp;</div>防止上移

<div>&nbsp;</div>

2.打完代碼后不顯示日期,但按鈕切換月份可用

方法:最后一行那里,在父元素才可以用,替換為daterow.appendChild(dayElement);

for (var j=1;j<=allday;j++){
? ? ? ? var dayElement=document.createElement('div');
? ? ? ? dayElement.className='everyday';
? ? ? ? dayElement.innerHTML=j+'';
? ? ? ??
? ? ? ? if(j==day){
? ? ? ? ? ? dayElement.style.color='red';
? ? ? ? }
? ? ? ? dayElement.appendChild(dayElement);《《《《《

源代碼:

HTML部分

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>2.2電子日歷的設(shè)計(jì)與實(shí)現(xiàn)</title>
?? ??? ?<link rel="stylesheet" type="text/css" href="css/calendar.css" />
?? ??? ?<script src="js/calendar.js" type="text/javascript" charset="utf-8"></script>
?? ?</head>
?? ?<body onload="showDate()">
?? ??? ?<h3>電子日歷的設(shè)計(jì)與實(shí)現(xiàn)</h3>
?? ??? ?<hr >
?? ??? ?<div id="calendar">
?? ??? ??? ?<!-- 狀態(tài)欄 -->
?? ??? ??? ?<div>
?? ??? ??? ??? ?<!-- 顯示“上個(gè)月”按鈕 -->
?? ??? ??? ??? ?<button onclick="lastMonth()">上個(gè)月</button>
?? ??? ??? ??? ?<!-- 顯示當(dāng)前年份月份 -->
?? ??? ??? ??? ?<div id="month"></div>
?? ??? ??? ??? ?<!-- 顯示“下個(gè)月”按鈕 -->
?? ??? ??? ??? ?<button onclick="nextMonth()">下個(gè)月</button>
?? ??? ??? ??? ?<div> </div> <!--為了調(diào)節(jié)防止“日”上移-->
?? ??? ??? ?</div>
?? ??? ??? ?
?? ??? ??? ?<!-- 顯示星期幾 -->
?? ??? ??? ?<div>
?? ??? ??? ??? ?<div class="everyday">日</div>
?? ??? ??? ??? ?<div class="everyday">一</div>
?? ??? ??? ??? ?<div class="everyday">二</div>
?? ??? ??? ??? ?<div class="everyday">三</div>
?? ??? ??? ??? ?<div class="everyday">四</div>
?? ??? ??? ??? ?<div class="everyday">五</div>
?? ??? ??? ??? ?<div class="everyday">六</div>
?? ??? ??? ?</div>
?? ??? ??? ?
?? ??? ??? ?<!-- 顯示當(dāng)前月份每天的日期 -->
?? ??? ??? ?<div id="day"></div>
?? ??? ?</div>
?? ?</body>
</html>

css部分

div{
?? ?text-align: center;
?? ?margin-top: 10px;
?? ?margin-bottom: 10px;
}
#calendar{
?? ?width: 400px;
?? ?margin: auto;
}
button{
?? ?width: 25%;
?? ?float: left;
?? ?height: 40px;
}
#month{
?? ?width: 50%;
?? ?float: left;
}
.everyday{
?? ?width: 14%;
?? ?float: left;
}

js部分

var today=new Date();
var year=today.getFullYear();
//獲取當(dāng)前年份
var month=today.getMonth()+1;
//獲取當(dāng)前月份
var day=today.getDate();
//獲取當(dāng)前日期
var allday=0;
//當(dāng)前月份的總天數(shù)
?
//用于推算當(dāng)前月份一共多少天
function count(){
?? ?if (month !=2){
?? ??? ?if ((month==4)||(month==6)||(month==9)||(month==11)){
?? ??? ??? ?allday=30;
?? ??? ??? ?//4,6,9,11月份為30天
?? ??? ?}else{
?? ??? ??? ?allday=31;
?? ??? ??? ?//其他月份為31天(不包括2月)
?? ??? ?}
?? ?}else{
?? ??? ?//如果是2月份需要判斷當(dāng)前是否為閏年
?? ??? ?if (((year%4)==0&&(year%100)!=0)||(year%400)==0){
?? ??? ??? ?allday=29;
?? ??? ??? ?//閏年的2月份是29天
?? ??? ?}else{
?? ??? ??? ?allday=28;
?? ??? ??? ?//非閏年的2月份是28天
?? ??? ?}
?? ?}
}
?
//顯示日歷標(biāo)題中的當(dāng)前年份和月份
function showMonth(){
?? ?var year_month=year+"年"+month+"月";
?? ?document.getElementById("month").innerHTML=year_month;
}
?
//顯示當(dāng)前月份的日歷
function showDate(){
?? ?showMonth();//在年份和月份的顯示牌上顯示當(dāng)前的年月
?? ?count();//計(jì)算當(dāng)前月份的總天數(shù)
?? ?
?? ?//獲取本月第一天的日期對(duì)象
?? ?var firstdate=new Date(year,month-1,1);
?? ?
?? ?//推算本月的第一天是星期幾
?? ?var xq=firstdate.getDay();
?? ?
?? ?//動(dòng)態(tài)添加HTML元素
?? ?var daterow=document.getElementById("day");
?? ?daterow.innerHTML='';
?? ?
?? ?//如果本月的第一天不是星期日,則前面需要用空白元素補(bǔ)全日期
?? ?if (xq !=0){
?? ??? ?for (var i=0;i<xq;i++){
?? ??? ??? ?var dayElement=document.createElement('div');
?? ??? ??? ?dayElement.className='everyday';
?? ??? ??? ?daterow.appendChild(dayElement);
?? ??? ?}
?? ?}
?? ?
?? ?//使用循環(huán)語(yǔ)句將當(dāng)前月份的所有日期顯示出來(lái)
?? ?for (var j=1;j<=allday;j++){
?? ??? ?var dayElement=document.createElement('div');
?? ??? ?dayElement.className='everyday';
?? ??? ?dayElement.innerHTML=j+'';
?? ??? ?
?? ??? ?//如果日期為今天,將顯示為紅色
?? ??? ?if(j==day){
?? ??? ??? ?dayElement.style.color='red';
?? ??? ?}
?? ??? ?// dayElement.appendChild(dayElement);
?? ??? ?daterow.appendChild(dayElement);
?? ?}
}
?
//顯示上個(gè)月的日歷
function lastMonth(){
?? ?if (month>1){
?? ??? ?month-=1;
?? ?}else{
?? ??? ?month=12;
?? ??? ?year-=1;
?? ?}
?? ?showDate();
}
?
//顯示下個(gè)月的日歷
function nextMonth(){
?? ?if (month<12){
?? ??? ?month+=1;
?? ?}else{
?? ??? ?month=1;
?? ??? ?year+=1;
?? ?}
?? ?showDate();
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法

    JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法,實(shí)例分析了javascript彈出特效的css與提示框的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • 關(guān)于javascript中this關(guān)鍵字(翻譯+自我理解)

    關(guān)于javascript中this關(guān)鍵字(翻譯+自我理解)

    在傳統(tǒng)面向?qū)ο笳Z(yǔ)言中,this關(guān)鍵字是個(gè)很乖的小孩,從不亂跑,該是誰(shuí)的就是誰(shuí)的??墒窃贘avaScript中,我們發(fā)現(xiàn)它不那么乖,有時(shí)甚至把我們搞的暈頭轉(zhuǎn)向的。所以有必要對(duì)它稍微做個(gè)總結(jié)。
    2010-10-10
  • 為什么JavaScript沒(méi)有塊級(jí)作用域

    為什么JavaScript沒(méi)有塊級(jí)作用域

    這篇文章主要介紹了為什么JavaScript沒(méi)有塊級(jí)作用域的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • 精通JavaScript的this關(guān)鍵字

    精通JavaScript的this關(guān)鍵字

    這篇文章主要介紹了JavaScript的this關(guān)鍵字,真正幫助大家做到精通this關(guān)鍵字,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-02-02
  • JavaScript async&await方法中的異常處理方案

    JavaScript async&await方法中的異常處理方案

    在 async/await 方法中,可以使用 try-catch 塊來(lái)處理異常,通過(guò)使用 try-catch,可以捕獲異步操作中拋出的異常,并在 catch 塊中進(jìn)行適當(dāng)?shù)奶幚?本文給大家詳細(xì)介紹了async&await方法中異常如何處理,需要的朋友可以參考下
    2023-08-08
  • javascript 四則運(yùn)算精度修正函數(shù)代碼

    javascript 四則運(yùn)算精度修正函數(shù)代碼

    JS預(yù)算精度問(wèn)題確實(shí)很麻煩,這個(gè)能解決一些問(wèn)題,雖然有bug.
    2010-05-05
  • javascript 日期工具匯總

    javascript 日期工具匯總

    這篇文章主要為大家詳細(xì)介紹了javaScript日期工具類的匯總,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析

    JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析

    這篇文章主要介紹了JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-09-09
  • JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法

    JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法

    這篇文章主要介紹了JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法,因?yàn)槲覀冃枰刂埔幌麻L(zhǎng)度,需要的朋友可以參考下
    2016-01-01
  • 預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存

    預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存

    這篇文章主要為大家介紹了你不知道的JavaScript正在泄漏內(nèi)存預(yù)防及解決方法實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>
    2023-10-10

最新評(píng)論