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 相关文章推荐
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
js基于canvas实现时钟组件
Feb 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
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php微信公众平台开发类实例
2015/04/01 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
毕业生幼师求职自荐信
2013/10/01 职场文书
暑期社会实践感言
2014/02/25 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
Python作用域和名称空间的详细介绍
2022/04/13 Python
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python