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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
js实现弹窗效果
Aug 09 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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令牌 Token改进版
2008/07/18 PHP
php 变量定义方法
2009/06/14 PHP
php定时执行任务设置详解
2015/02/06 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
普通院校学生的自荐信
2013/11/27 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
春节慰问简报
2015/07/21 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
html5调用摄像头截图功能
2022/01/18 Javascript