million calendar, we must be familiar with it, the following is a calendar example using jquery, like friends can refer to the following
The code is as follows: <! Doctype html><html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv= Content-type content= "Text/html;charset=utf-8" > <style> .main{ width:600px; Height :350px; background:gray; margin-left:auto; margin-right:auto; overflow:hidden; - webkit-border-radius:10px; -moz-border-radius:10px; } .title{ text-align:center; } .date{ float:left; padding-left:31px; } .date1{ float:left; ; height:20px; padding-top:10px; padding-left:30px; padding-right:30px; } . content{ margin-left:25px; } </style> <script type= "Text/javascript" src= " Jquery.min.js "></script> <script> function GetTime (year,month,day) { y = year m = month D = day var mydate = new Date (year,month-1,day); return mydate; } function days_in_month (year, month) { y = year; m = month; return 32-new Date (y, M-1, GetDate (); } function View (year,month) { var w = getTime (year,month,1). Getday () -1; var num = days_in_month (year,month); var index = 1; //console.log (w); var data = new Array (); for ( var d = 0; D < num+w; d++) { if (d<w) { data[d] = '; }else{ data[d] = index; index++; } } $ ("#c Ontent "). html ('); for (var k =0;k < data.length;k++) { if (k%7==0) { $ (" #content "). Append (" <div Id= ' t "+k+" ' class= ' date1 ' > "+data[k]+" </div><br> "); }else{ $ (" #content "). Append (" < Div id= ' t ' +k+ ' class= ' date1 ' > ' +data[k]+ ' </div> '; } $ ("#content > div").} ( function () { if ($ (). Text ()!= ') { $ (this). CSS (' background ', ' red '); } }); $ ("# Content > div "). Mouseout (function () { if ($ (this). Text ()!= ' ") { $ (this). CSS (' background ', ' gray '); } }); } $ ( Document). Ready (function () { for (var t = 1970 T < 2999; t++) { $ ("#yearsel"). Append ("<option value = '" +t + "' >" +t+ "</option>"); } for (var y = 1; y < 13;y++) { $ ("#monthsel"). Append ("<option Value = ' "+y+ ' >" +y+ "</option>"); } var year = new Date (). getFullYear (); var month = new Date (). GetMonth () +1; var day = new Date (). GetDate (); var w = getTime (year,month,1). Getday () -1; var num = day + w-1; $ ("#yearsel"). Change (function () { year = $ ("#yearsel option:selected"). Text (); month = $ ("# Monthsel option:selected "). Text (); view (year,month); }); $ (" #monthsel "). Change (function () { Year = $ ("#yearsel option:selected"). Text (); month = $ ("#monthsel option:selected"). Text (); view (year, Month); }); var odate = [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' StarPeriod five ', ' Saturday ', ' Sunday ',]; for (var i = 0;i < 7;i++) { $ ("#title"). Append ("<div class= ' Date ' ><b>" + odate[i]+ "</b></div>"); } $ ("#yearsel option[value= '" +year+ "]"). attr ("selected", true); View (Year,month); //tag Current date $ ("#t" +num). CSS (' background ', ' Yellow '); }); > </head> <body> <div id= "main" class= "main" > <center><h3> Calendar </h3></center> <select id= "Yearsel" > </select> year <select id= " Monthsel "> </select> month <br><br> <div id=" title "class=" title "> </div > <div id= "content" class= "content" > </div> </div> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
