JavaScript实现年历效果

2024-10-02 14:13:49

本文实例为大家分享了JavaScript实现年历效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>制作年历</title>
  <style>
   body{text-align:center;}
   .box{margin:0 auto;width:880px;}
   .title{background: #ccc;}
   table{height:200px;width:200px;font-size:12px;text-align:center;float:left;margin:10px;font-family:arial;}
  </style>
  <script src="calendar.js"></script>
  <script>
   var year = parseInt(prompt('输入年份：','2019'));//制作弹窗
   document.write(calendar(year));//调用函数生成指定年份的年历
  </script>
 </head>
 <body>
 </body>
</html>

calendar.js

function calendar(y){
 //获取指定年份1月1日的星期数值
 var w = new Date(y,0).getDay();
 var html = '<div class="box">';

 //拼接每个月份的表格
 for(m=1;m<=12;m++){
  html += '<table>';
  html += '<tr class="title"><th colspan="7">' + y + '年' +m+' 月</th></tr>';
  html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'

  //获取每个月份共有多少天
  var max = new Date(y,m,0).getDate();

  html += '<tr>';//开始<tr>标签
  for (d=1;d<=max;d++){
   if(w && d== 1){//如果该月的第1天不是星期日，则填充空白
    html += '<td colspan ="' + w + '"> </td>';
   }
   html += '<td>' +d+ '</td>';
   if(w == 6 && d != max){//如果星期六不是该月的最后一天，则换行
    html += '</tr><tr>';
   }else if(d==max){//该月的最后一天，闭合</tr>标签
    html += '</tr>';
   }
   w = (w+1>6) ? 0 : w+1;
  }
  html += '</table>';
 }
 html += '</div>';
 return html;
}

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS制作类似选项卡切换的年历

本文实例为大家分享了用JS制作简易的可切换的年历,类似于选项卡,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ background-color: green; border-radius: 20px; pad
js制作简易年历完整实例

本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点. innerHtml的用法现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了. 例如top.innerHTML="";就可以在top对应的位置出现一个button了! 程序实现思
利用JS制作万年历的方法

我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢 1.HTML布局: <div id="calendar"> <div id="month_year"> <select id="year"></select>年 <select id="month"></select>月 </div>
JavaScript实现年历效果

本文实例为大家分享了JavaScript实现年历效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>制作年历</title> <style> body{text-align:center;} .box{margin:0 auto;width:880px;} .title{background:
javascript搜索框效果实现方法

本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
Javascript 实现放大镜效果实例详解

Javascript 实现放大镜效果今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构! <div id="pic_wrap"> <div id="floa
JavaScript 消息框效果【实现代码】

警告框 alert(); 确认框 var message=confirm("你喜欢javascript吗"); if(message==true){ document.write("很好,加油"); }else{ document.write("js功能强大,要学习哦"); } 提问框 prompt("文本","默认值"); var myname=prompt(请输入你的姓名); if(myname!=nu
JavaScript无缝滚动效果的实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&
JavaScript实现打字效果的方法

本文实例讲述了JavaScript实现打字效果的方法.分享给大家供大家参考.具体实现方法如下: <input type="button" onclick='start("高考了")' value="start"/> <input type="text" id="here" /> <script type="text/javascript"> funct
javascript实现拖放效果

本文实例为大家分享的是一个拖放的效果,参考的代码,重构以下,加以理解学习. 首先来看效果: 拖动div 拖放状态:未开始 [程序说明] 拖动原理:其实就是在拖动块上监听mousedown事件,鼠标点击时,通过事件对象获取对应的坐标参数.然后鼠标移动时再监听document上的mousemove事件,获取鼠标的clientX 和clientY坐标然后设置拖动块的left 和 top. 首先是监听mousedown事件复制代码代码如下: EventUtil.addEventHandler(thi
JavaScript 仿歌词效果

JavaScript仿歌词效果 var message="Welcome to JavaScript Fairyland!" var neonbasecolor="gray" var neontextcolor="33ff33" var flashspeed=100 var n=0 if (document.all){ document.write('') for (m=0;m'+message.charAt(m)+'') document.wr
javascript图片滑动效果实现

本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href
JavaScript运动减速效果实例分析

本文实例讲述了JavaScript运动减速效果.分享给大家供大家参考.具体如下: 这段代码可帮助利用JS从事游戏编程的朋友,它主要实现一种运行减速缓冲的效果,代码精简,很不错. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JavaScript实现年历效果

相关推荐

随机推荐