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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
第二节 对象模型 [2]
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP调用其他文件中的类
2018/04/02 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python实现简单字典树的方法
2016/04/29 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python实现日常记账本小程序
2018/03/10 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python 如何引入协程和原理分析
2020/11/30 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
优秀教师工作感言
2014/02/16 职场文书
护士自我鉴定总结
2014/03/24 职场文书
学生党员公开承诺书
2014/05/28 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android