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 相关文章推荐
html下载本地
Jun 19 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
jquery ui对话框实例代码
May 10 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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动态生成静态HTML网页的代码
2010/03/04 PHP
php中对2个数组相加的函数
2011/06/24 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
在Python的web框架中配置app的教程
2015/04/30 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python 函数返回值的示例代码
2019/03/11 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
2014学年自我鉴定
2014/02/23 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
培训师岗位职责
2015/02/14 职场文书
撤诉状格式范本
2015/05/19 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers