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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
简单了解常用的JavaScript 库
Jul 16 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
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
python 8种必备的gui库
2020/08/27 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
一道Delphi上机题
2012/06/04 面试题
应届生财务管理求职信
2013/11/06 职场文书
《画》教学反思
2014/04/14 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
自主招生自荐信格式
2015/03/04 职场文书
免职通知
2015/04/23 职场文书
团队拓展训练感想
2015/08/07 职场文书
感恩教师主题班会
2015/08/12 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
php png失真的原因及解决办法
2021/10/24 PHP
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python