您正在使用IPV4(35.153.166.111)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
虚位以待
2021年 冬至节 14
2021年 圣诞节 18
2022年 元 旦 25
2022年 春 节 56
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    原生js实现仿window10系统日历效果的实例
    内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'titleTitle/titlestyle#calendar{position:absolute;padding:5px;border:1pxsolid#000000;background:#8f3349;display:none;}#todayTime{padd......
    <!DOCTYPEhtml>

    <htmllang="en">

    <head>

    <metacharset="UTF-8">

    <title>Title</title>

    <style>

    #calendar{

    position:absolute;

    padding:5px;

    border:1pxsolid#000000;

    background:#8f3349;

    display:none;

    }

    #todayTime{

    padding:5px0;

    font-size:40px;

    color:white;

    }

    #todayDate{

    padding:5px0;

    font-size:24px;

    color:#ffcf88;

    }

    #tools{

    padding:5px0;

    height:30px;

    color:white;

    }

    #tools.l{

    float:left;

    }

    #tools.r{

    float:right;

    }

    table{

    width:100%;

    color:white;

    }

    tableth{

    color:#a2cbf3;

    }

    tabletd{

    text-align:center;

    cursor:default;

    }

    tabletd.today{

    background:#cc2951;

    color:white;

    }

    </style>

    <script>

    window.onload=function(){

    vartext1=document.getElementById('text1');

    text1.onfocus=function(){

    calendar();

    }

    //calendar();

    functioncalendar(){

    varcalendarElement=document.getElementById('calendar');

    vartodayTimeElement=document.getElementById('todayTime');

    vartodayDateElement=document.getElementById('todayDate');

    varselectYearElement=document.getElementById('selectYear');

    varselectMonthElement=document.getElementById('selectMonth');

    varshowTableElement=document.getElementById('showTable');

    varprevMonthElement=document.getElementById('prevMonth');

    varnextMonthElement=document.getElementById('nextMonth');

    calendarElement.style.display='block';

    /*

    *获取今天的时间

    **/

    vartoday=newDate();

    //设置日历显示的年月

    varshowYear=today.getFullYear();

    varshowMonth=today.getMonth();

    //持续更新当前时间

    updateTime();

    //显示当前的年月日星期

    todayDateElement.innerHTML=getDate(today);

    //动态生成选择年的select

    for(vari=1970;i<2020;i++){

    varoption=document.createElement('option');

    option.value=i;

    option.innerHTML=i;

    if(i==showYear){

    option.selected=true;

    }

    selectYearElement.appendChild(option);

    }

    //动态生成选择月的select

    for(vari=1;i<13;i++){

    varoption=document.createElement('option');

    option.value=i-1;

    option.innerHTML=i;

    if(i==showMonth+1){

    option.selected=true;

    }

    selectMonthElement.appendChild(option);

    }

    //初始化显示table

    showTable();

    //选择年

    selectYearElement.onchange=function(){

    showYear=this.value;

    showTable();

    showOption();

    }

    //选择月

    selectMonthElement.onchange=function(){

    showMonth=Number(this.value);

    showTable();

    showOption();

    }

    //上一个月

    prevMonthElement.onclick=function(){

    showMonth--;

    showTable();

    showOption();

    }

    //下一个月

    nextMonthElement.onclick=function(){

    showMonth++;

    showTable();

    showOption();

    }

    /*

    *实时更新当前时间

    **/

    functionupdateTime(){

    vartimer=null;

    //每个500毫秒获取当前的时间,并把当前的时间格式化显示到指定位置

    vartoday=newDate();

    todayTimeElement.innerHTML=getTime(today);

    timer=setInterval(function(){

    vartoday=newDate();

    todayTimeElement.innerHTML=getTime(today);

    },500);

    }

    functionshowTable(){

    showTableElement.tBodies[0].innerHTML='';

    //根据当前需要显示的年和月来创建日历

    //创建一个要显示的年月的下一个的日期对象

    vardate1=newDate(showYear,showMonth+1,1,0,0,0);

    //对下一个月的1号0时0分0秒的时间-1得到要显示的年月的最后一天的时间

    vardate2=newDate(date1.getTime()-1);

    //得到要显示的年月的总天数

    varshowMonthDays=date2.getDate();

    //获取要显示的年月的1日的星期,从0开始的星期

    date2.setDate(1);

    //showMonthWeek表示这个月的1日的星期,也可以作为表格中前面空白的单元格的个数

    varshowMonthWeek=date2.getDay();

    varcells=7;

    varrows=Math.ceil((showMonthDays+showMonthWeek)/cells);

    //通过上面计算出来的行和列生成表格

    //没生成一行就生成7列

    //行的循环

    for(vari=0;i<rows;i++){

    vartr=document.createElement('tr');

    //列的循环

    for(varj=0;j<cells;j++){

    vartd=document.createElement('td');

    varv=i*cells+j-(showMonthWeek-1);

    //根据这个月的日期控制显示的数字

    //td.innerHTML=v;

    if(v>0&&v<=showMonthDays){

    //高亮显示今天的日期

    if(today.getFullYear()==showYear&&today.getMonth()==showMonth&&today.getDate()==v){

    td.className='today';

    }

    td.innerHTML=v;

    }else{

    td.innerHTML='';

    }

    td.ondblclick=function(){

    calendarElement.style.display='none';

    text1.value=showYear+'年'+(showMonth+1)+'月'+this.innerHTML+'日';

    }

    tr.appendChild(td);

    }

    showTableElement.tBodies[0].appendChild(tr);

    }

    }

    functionshowOption(){

    vardate=newDate(showYear,showMonth);

    varsy=date.getFullYear();

    varsm=date.getMonth();

    console.log(showYear,showMonth)

    varoptions=selectYearElement.getElementsByTagName('option');

    for(vari=0;i<options.length;i++){

    if(options[i].value==sy){

    options[i].selected=true;

    }

    }

    varoptions=selectMonthElement.getElementsByTagName('option');

    for(vari=0;i<options.length;i++){

    if(options[i].value==sm){

    options[i].selected=true;

    }

    }

    }

    }

    /*

    *获取指定时间的时分秒

    **/

    functiongetTime(d){

    return[

    addZero(d.getHours()),

    addZero(d.getMinutes()),

    addZero(d.getSeconds())

    ].join(':');

    }

    /*

    *获取指定时间的年月日和星期

    **/

    functiongetDate(d){

    returnd.getFullYear()+'年'+addZero(d.getMonth()+1)+'月'+addZero(d.getDate())+'日星期'+getWeek(d.getDay());

    }

    /*

    *给数字加前导0

    **/

    functionaddZero(v){

    if(v<10){

    return'0'+v;

    }else{

    return''+v;

    }

    }

    /*

    *把数字星期转换成汉字星期

    **/

    functiongetWeek(n){

    return'日一二三四五六'.split('')[n];

    }

    }

    </script>

    </head>

    <body>

    <inputtype="text"id="text1">

    <divid="calendar">

    <divid="todayTime"></div>

    <divid="todayDate"></div>

    <divid="tools">

    <divclass="l">

    <selectid="selectYear"></select>年

    <selectid="selectMonth"></select>月

    </div>

    <divclass="r">

    <spanid="prevMonth">∧</span>

    <spanid="nextMonth">∨</span>

    </div>

    </div>

    <tableid="showTable">

    <thead>

    <tr>

    <th>日</th>

    <th>一</th>

    <th>二</th>

    <th>三</th>

    <th>四</th>

    <th>五</th>

    <th>六</th>

    </tr>

    </thead>

    <tbody></tbody>

    </table>

    </div>

    </body>

    </html>

    上一篇:通过javascript获取iframe里的值示例代 下一篇:jQuery判断网页是否已经滚动到浏览器底部的实现方
    发布日期:2021/11/18
    手机扫二维码直达本页
    发布时间:16:27:17
    点击:172
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.0.9.10888 Build 21.11.30(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
    ©2000-2021