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简化Ajax开发 Ajax开发入门
Oct 14 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
jQuery插件的写法分享
Jun 12 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
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 404错误页面实现代码
2009/06/22 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
cakephp常见知识点汇总
2017/02/24 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
把input初始值不写value的具体实现方法
2013/07/04 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python版名片管理系统
2018/11/30 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Django中的session用法详解
2020/03/09 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
体育比赛口号
2014/06/09 职场文书
企业宣传标语
2014/06/09 职场文书
人代会标语
2014/06/30 职场文书
关于安全的广播稿
2014/10/23 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电