zoukankan      html  css  js  c++  java
  • js 日历

    前几天工作的时候,困于js 内置对象Date()的使用,所以想写一个日历的插件,之前有看过一个视频,视频的老师说,不要说你不会,先做你会的,慢慢想就出来了。我就这样单枪匹马的上了,思路大概是这样的,第一行显示当天的日期,第二行显示星期,后面显示天数;思路比较古板,刚刚是准备用p标签里面嵌入span标签,在实施的过程中遇见两个问题,首先span标签不能直接的定义宽度、长度,其次span换行不方便,失败几次以后果断换成了td ,下面把我的想法和算法做一个比较:

    两种方法的大致思路:

    1.取得月的总天数

    2.当月一号星期几

    3.打印

    1.取得月的总天数

    算法中获取月总天数的方法:

    function is_leap(year) {
    return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
    } //是否为闰年
    var m_days=new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31); //各月份的总天数

    我的获取月总天数的方法:
    //获取当月最后一天,用数组将天数存储起来
    var date1  = new Date(year,month,0);
    var lastDay= date1.getDate();
    var dayList = new Array();
    for(var i =1;i<=lastDay;i++){
    dayList[i-1] = i;
    }

    2.当月一号星期几  ,这个就比较通用,都是getDay()

      算法:

    var n1str=new Date(ynow,mnow,1); //当月第一天Date资讯
    var firstday=n1str.getDay(); //当月第一天星期几

      我的:
    var date2 = new Date(year,month-1,1);
    weekOfDay = date2.getDay();

    3.打印
    var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //表格所需要行数

    //打印表格第一行(有星期标志)
    document.write ("<table border='1' align='center' width='220' cellspacing='0'><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>");

    for(i=0;i<tr_str;i++) { //表格的行
    document.write("<tr>");
    for(k=0;k<7;k++) { //表格每行的单元格
    idx=i*7+k; //单元格自然序列号
    date_str=idx-firstday+1; //计算日期
    (date_str<=0 || date_str>m_days[mnow]) ? date_str="&nbsp;" : date_str=idx-firstday+1; //过滤无效日期(小于等于零的、大于月总天数的)
    //打印日期:今天底色为红
    date_str==dnow ? document.write ("<td align='center' bgcolor='red'>" + date_str + "</td>") : document.write ("<td align='center'>" + date_str + "</td>");
    }
    document.write("</tr>"); //表格的行结束
    }

    document.write("</table>"); //表格结束

    不得不说算法的语音很精炼,条件运算符用的很溜

    var id = document.getElementById(id);
    var node4 = document.createElement("tr");
    var date2 = new Date(year,month-1,1);
    weekOfDay = date2.getDay();
    for(var m = 0;m<weekOfDay;m++){
    var node3Td = document.createElement("td");
    node4.appendChild(node3Td);
    }
    var dayList = new Array();
    dayList = monthDays(year,month).dayList;
    for(var i =0;i<dayList.length;i++){
    var node4Td = document.createElement("td");
    node4Td.innerHTML = dayList[i];
    if(dayList[i]==day){//当天样式
    // node4Td.setAttribute("class", "now");
    node4Td.className="now";
    }
    node4.appendChild(node4Td);
    id.appendChild(node4);

    var td = node4.childNodes;//判断td的数目
    if(td.length>6){//超过则换行
    node4 = document.createElement("tr");
    console.log(td)
    }

    }
    我的语言没有算法那么凝练,但我觉得思路是不寻常的,就想着记录下来

    但是有一个考虑,算法的样式写的内联样式,在一定程度上会造成不便,或许可以用我这种动态创建DOM元素的方法,这样就可以在css文件中直接写样式,但是值得注意的是得在元素存在页面上的时候才能对其进行操作

    上一个月、下一个月的按钮
    添加这两个按钮时记得清除之前的内容,否则按钮不起作用
    function preMonth() {
    console.log(mnow);
    if(mnow<=0){
    mnow = 11;
    ynow = ynow-1;
    }else {
    mnow--;
    }
    calendar(nstr,ynow,mnow,dnow);
    monDetail(ynow,mnow)
    }


    function nextMonth() {
    console.log(mnow);
    if(mnow>=11){
    mnow = 0;
    ynow = ynow+1;
    }else {
    mnow--;
    }
    calendar(nstr,ynow,mnow,dnow);
    monDetail(ynow,mnow)
    }}



    
    
  • 相关阅读:
    thinkphp5 tp5 命名空间 报错 Namespace declaration statement has to be the very first statement in the script
    开启 php 错误 提示 php-fpm 重启 nginx 500错误 解决办法 wdlinux lnmp 一键包 php脚本无法解析执行
    js 设置 cookie 定时 弹出层 提示层 下次访问 不再显示 弹窗 getCookie setCookie setTimeout
    php 二维数组 转字符串 implode 方便 mysql in 查询
    nginx 重启 ps -ef|grep nginx kill -HUP 主进程号
    jquery bootstrap help-block input 表单 提示 帮助 信息
    jquery 倒计时 60秒 短信 验证码 js ajax 获取
    jQuery如何获取同一个类标签的所有的值 遍历
    linux下C语言文件操作相关函数
    gcc,gdb用法
  • 原文地址:https://www.cnblogs.com/html-css-js/p/8066441.html
Copyright © 2011-2022 走看看