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 相关文章推荐
Node.js编码规范
Jul 14 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
Vue.js添加组件操作示例
Jun 13 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
Position属性之relative用法
2015/12/14 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
python3制作捧腹网段子页爬虫
2017/02/12 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
给校长的建议书400字
2014/05/15 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
初中数学教学随笔
2015/08/15 职场文书
高中数学教学反思范文
2016/02/18 职场文书
找规律教学反思
2016/02/23 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书