JavaScript制作简单的日历效果


Posted in Javascript onMarch 10, 2016

本文实例为大家分享了

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312">
    <title></title>
  </head>
  <body>
    <script>
       
      document.write("<table>");
      document.write("<th colspan='7'>2016年3月</th>");
      document.write("<tr id='titleCss'>");
      document.write("<td>日</td>");
      document.write("<td>一</td>");
      document.write("<td>二</td>");
      document.write("<td>三</td>");
      document.write("<td>四</td>");
      document.write("<td>五</td>");
      document.write("<td>六</td>");
      document.write("</tr>");
      var num=1;
//     for(var i=0;i<5;i++){
//       document.write("<tr>");
//       
//       for(var j=0;j<7;j++){
//         if(i==0 && j<2) document.write("<td></td>");
//         else if(i==4 && j>=5) document.write("<td></td>");
//         else document.write("<td>" + num++ +"</td>");  
//       }
//       document.write("</tr>");
//     }
      document.write("<tr>");
      document.write("<td></td>");
      document.write("<td></td>");
      for(var i=3;i<=33;i++){
        document.write("<td>" + num++);
        if((i%7)==0) document.write("</td></tr><tr>");
        else document.write("</td>");
      }
      document.write("<td></td>");
      document.write("<td></td>");
      document.write("</tr>");
      document.write("</table>");
    </script>
  </body>
</html>

效果图:

JavaScript制作简单的日历效果

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
Bootstrap精简教程
Nov 27 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
vue中英文切换实例代码
Jan 21 Javascript
js滑动提示效果代码分享
Mar 10 #Javascript
js实现页面跳转的五种方法推荐
Mar 10 #Javascript
js实现页面跳转的五种方法推荐
Mar 10 #Javascript
js实现上一页下一页的效果【附代码】
Mar 10 #Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 #Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 #Javascript
node.js实现爬虫教程
Aug 25 #Javascript
You might like
4.与数据库的连接
2006/10/09 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
理解Python中函数的参数
2015/04/27 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python 实现简单的电话本功能
2015/08/09 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
如何用python处理excel表格
2020/06/09 Python
pandas针对excel处理的实现
2021/01/15 Python
西柏坡导游词
2015/02/05 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
婚庆答谢词大全
2015/09/29 职场文书
导游词之安徽九华山
2019/09/18 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python