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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
在Vue中使用antv的示例代码
Jun 29 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 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
跟我学Laravel之路由
2014/10/15 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
限制复选框的最大可选数
2006/07/01 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python实现用户名密码校验
2020/03/18 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
优秀少先队辅导员事迹材料
2014/12/24 职场文书
上课说话检讨书
2015/01/27 职场文书
2016年春节慰问信息
2015/03/25 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
python实现的web监控系统
2021/04/27 Python
Python数据分析之绘图和可视化详解
2021/06/02 Python
python如何利用traceback获取详细的异常信息
2021/06/05 Python
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
vue router 动态路由清除方式
2022/05/25 Vue.js