js入门(4)——关于时间选择列表,date和select

今天遇到一个题目,用户通过页面的下拉列表来设置两个日期,我们根据这两个日期计算出相差的天数

(没有考虑大月和小月,侧重点是说明下拉列表框和onchange事件处理器的使用)

为了方便用户,开始的默认日期为系统当前日期。


代码:

<script type="text/javascript">
function theday(start,end){
    for(var i=start;i<=end;i++){
        document.write("<option value="+i+">"+i);
    }
}
function themonth(){
    var date=new Date();
    for(var i=0;i<12;i++){
        date.setMonth(i);
        var month=date.toString();
        month=month.substr(4,3);
        document.write("<option value="+month+">"+month);
    }
}
function setdate(){
    var form=document.form1;
    var date=new Date();
    form.day1.options[date.getDate()-1].selected=true;
    form.month1.options[date.getMonth()].selected=true;
    form.year1.options[date.getFullYear()-1970].selected=true;
    form.day2.options[date.getDate()-1].selected=true;
    form.month2.options[date.getMonth()].selected=true;
    form.year2.options[date.getFullYear()-1970].selected=true;
}
function xiangge(){
    var form=document.form1;
    var d1=form.day1.options[form.day1.selectedIndex].value;
    alert(typeof(d1));
    var m1=form.month1.options[form.month1.selectedIndex].value;
    var y1=form.year1.options[form.year1.selectedIndex].value;
    var date1=new Date(d1+" "+m1+" "+y1);                                                     //开始的时候我没有加" ",出现了错误,
    alert(date1);                                                                          //没加“”,输出的date1是Invalid Date即的日期
    
    var d2=form.day2.options[form.day2.selectedIndex].value;
    var m2=form.month2.options[form.month2.selectedIndex].value;
    var y2=form.year2.options[form.year2.selectedIndex].value;
    var date2=new Date(d2+" "+m2+" "+y2);
    var cha=Math.floor((((Math.abs(date1.valueOf()-date2.valueOf())/1000)/60)/60)/24);
    form.text.value=cha;
    return true;
}
</script>
</head>

<body οnlοad="return setdate()">
<form name="form1">
    <select name="day1" οnchange="return xiangge()">
        <script type="text/javascript">
            theday(1,31);
        </script>
    </select>
    <select name="month1" οnchange="return xiangge()">
        <script type="text/javascript">
            themonth();
        </script>
    </select>
    <select name="year1" οnchange="return xiangge()">
        <script type="text/javascript">
            theday(1970,2020);
        </script>
    </select>
    <br />
    <br />
    <select name="day2" οnchange="return xiangge()">
        <script type="text/javascript">
            theday(1,31);
        </script>
    </select>
    <select name="month2" οnchange="return xiangge()">
        <script type="text/javascript">
            themonth();
        </script>
    </select>
    <select name="year2" οnchange="return xiangge()">
        <script type="text/javascript">
            theday(1970,2020);
        </script>
    </select>
    相差<input name="text" value="0" />天
</form>
</body>


上网搜了一下,格式:

Date 对象用于处理日期和时间。
创建 Date 对象的语法:
var myDate=new Date()
Date 对象会自动把当前日期和时间保存为其初始值。
参数形式有以下5种:  
   new Date("month dd,yyyy hh:mm:ss");
   new Date("month dd,yyyy");
   new Date(yyyy,mth,dd,hh,mm,ss);
   new Date(yyyy,mth,dd);
   new Date(ms);
注意最后一种形式,参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数。各种函数的含义如下:
month:用英文表示月份名称,从January到December
mth:用整数表示月份,从(1月)到11(12月)
dd:表示一个月中的第几天,从1到31
yyyy:四位数表示的年份
hh:小时数,从0(午夜)到23(晚11点)
mm:分钟数,从0到59的整数
ss:秒数,从0到59的整数
ms:毫秒数,为大于等于0的整数
如:
new Date("January 12,2006 22:19:35");
new Date("January 12,2006");
new Date(2006,0,12,22,19,35);
new Date(2006,0,12);
new Date(1137075575000);
但是上例中有变量的时候,只有new Date(d1+" "+m1+" "+y1); 可以使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值