1 var weekDemo = $_className('div-week-css');
2 weekDemo.innerHTML = weekDemo.innerHTML + "<div style=\'position:relative\'><div class=\'input-week-data\' style=\'width: 274px;height:341px;display:none;z-index: 99999;position:absolute\'><div style=\'width: 274px;height: 45px;background-color: #009688;\'><div class=\'small_top_div small_top_hover week-year-css\' style=\'margin-left: 17px;\'>前一年</div><div class=\'small_top_div small_top_year data-year-css\'>2018</div><div class=\'small_top_div small_top_hover week-year-css\'>后一年</div></div><div style=\'width: 272px;height: 248px;background-color: white;border: 1px solid #C0C0C0;border-bottom: 0px;\'><div style=\'width: 272px;height: 248px;margin: 10px 0px 10px 10px;\'><table style=\'width: 262px;\'><tr style=\'width: 252px;\'><td onclick='getTd(this)' class=\'week_td\'>01</td><td onclick='getTd(this)' class=\'week_td\'>02</td><td onclick='getTd(this)' class=\'week_td\'>03</td><td onclick='getTd(this)' class=\'week_td\'>04</td><td onclick='getTd(this)' class=\'week_td\'>05</td><td onclick='getTd(this)' class=\'week_td\'>06</td><td onclick='getTd(this)' class=\'week_td\'>07</td></tr><tr><td onclick='getTd(this)' class=\'week_td\'>08</td><td onclick='getTd(this)' class=\'week_td\'>09</td><td onclick='getTd(this)' class=\'week_td\'>10</td><td onclick='getTd(this)' class=\'week_td\'>11</td><td onclick='getTd(this)' class=\'week_td\'>12</td><td onclick='getTd(this)' class=\'week_td\'>13</td><td onclick='getTd(this)' class=\'week_td\'>14</td></tr><tr><td onclick='getTd(this)' class=\'week_td\'>15</td><td onclick='getTd(this)' class=\'week_td\'>16</td><td onclick='getTd(this)' class=\'week_td\'>17</td><td onclick='getTd(this)' class=\'week_td\'>18</td><td onclick='getTd(this)' class=\'week_td\'>19</td><td onclick='getTd(this)' class=\'week_td\'>20</td><td onclick='getTd(this)' class=\'week_td\'>21</td></tr><tr><td onclick='getTd(this)' class=\'week_td\'>22</td><td onclick='getTd(this)' class=\'week_td\'>23</td><td onclick='getTd(this)' class=\'week_td\'>24</td><td onclick='getTd(this)' class=\'week_td\'>25</td><td onclick='getTd(this)' class=\'week_td\'>26</td><td onclick='getTd(this)' class=\'week_td\'>27</td><td onclick='getTd(this)' class=\'week_td\'>28</td></tr><tr><td onclick='getTd(this)' class=\'week_td\'>29</td><td onclick='getTd(this)' class=\'week_td\'>30</td><td onclick='getTd(this)' class=\'week_td\'>31</td><td onclick='getTd(this)' class=\'week_td\'>32</td><td onclick='getTd(this)' class=\'week_td\'>33</td><td onclick='getTd(this)' class=\'week_td\'>34</td><td onclick='getTd(this)' class=\'week_td\'>35</td></tr><tr><td onclick='getTd(this)' class=\'week_td\'>36</td><td onclick='getTd(this)' class=\'week_td\'>37</td><td onclick='getTd(this)' class=\'week_td\'>38</td><td onclick='getTd(this)' class=\'week_td\'>39</td><td onclick='getTd(this)' class=\'week_td\'>40</td><td onclick='getTd(this)' class=\'week_td\'>41</td><td onclick='getTd(this)' class=\'week_td\'>42</td></tr><tr><td onclick='getTd(this)' class=\'week_td\'>43</td><td onclick='getTd(this)' class=\'week_td\'>44</td><td onclick='getTd(this)' class=\'week_td\'>45</td><td onclick='getTd(this)' class=\'week_td\'>46</td><td onclick='getTd(this)' class=\'week_td\'>47</td><td onclick='getTd(this)' class=\'week_td\'>48</td><td onclick='getTd(this)' class=\'week_td\'>49</td></tr><tr><td onclick='getTd(this)' class=\'week_td\'>50</td><td onclick='getTd(this)' class=\'week_td\'>51</td><td onclick='getTd(this)' class=\'week_td\'>52</td></tr></table></div></div><div style=\'width: 272px;height: 44px;background-color: white;border: 1px solid #C0C0C0;\'><div onclick='sureWeek()' class=\'small_right_div\' style=\'margin-right: 10px;\'>确定</div><div onclick='nowWeek(this)' class=\'small_right_div\' style=\'border-left: 0px;border-right: 0px;\'>现在</div><div onclick='emptyWeek(this)' class=\'small_right_div\'>清空</div></div></div>";
3
4 function $_className(className){
5 var week_class = document.getElementsByClassName(className);
6 return week_class[0];
7 };
8
9 function $$_className(className){
10 var week_class = document.getElementsByClassName(className);
11 return week_class[1];
12 };
13
14 function week_setFullYear(){
15 var date = new Date();
16 var year = date.getFullYear();
17 $_className("data-year-css").innerText = year;
18 }
19
20 window.onload = function(){
21 week_setFullYear();
22 document.onclick = function(e){
23 $_className("input-week-data").style.display = "none";
24 };
25 $_className("input-week-css").onclick = function(e){
26 if($_className("input-week-data").style.display == "none"){
27 $_className("input-week-data").style.display = "block";
28 }else{
29 $_className("input-week-data").style.display = "none";
30 }
31 stopFunc(e);
32 };
33 $_className("input-week-data").onclick = function(e){
34 stopFunc(e);
35 };
36 }
37
38 function stopFunc(e) {
39 document.all ? event.cancelBubble = true : e.stopPropagation();
40 };
41
42 function getTd(e){
43 var td_Arr = document.getElementsByClassName("week_td");
44 for(var i = 0; i < td_Arr.length; i++){
45 td_Arr[i].style.cssText = "background-color:white";
46 }
47 e.style.backgroundColor = "white";
48 e.style.backgroundColor = "#009688";
49 $_className("input-week-css").value = $_className("data-year-css").innerText + ' 第 ' + e.innerText + ' 周';
50 };
51
52 function emptyWeek(e){
53 $_className("input-week-css").value = '';
54 week_setFullYear();
55 $_className("input-week-data").style.display = "none";
56 };
57
58 function nowWeek(e){
59 var weekShow = getWeekOfYear();
60 if(weekShow<10){
61 weekShow = '0'+weekShow;
62 }
63 $_className("input-week-css").value = $_className("data-year-css").innerText + ' 第 ' + weekShow + ' 周';
64 };
65
66 function sureWeek(e){
67 $_className("input-week-data").style.display = "none";
68 };
69
70 function getWeekOfYear(){
71 var today = new Date();
72 var firstDay = new Date(today.getFullYear(),0, 1);
73 var dayOfWeek = firstDay.getDay();
74 var spendDay= 1;
75 if (dayOfWeek !=0) {
76 spendDay=7-dayOfWeek+1;
77 }
78 firstDay = new Date(today.getFullYear(),0, 1+spendDay);
79 var d =Math.ceil((today.valueOf()- firstDay.valueOf())/ 86400000);
80 var result =Math.ceil(d/7);
81 return result+1;
82 };
83
84 $_className("week-year-css").onclick = function(){
85 var year = $_className("data-year-css").innerText;
86 var preYear = getPreYear(year);
87 $_className("data-year-css").innerText = preYear;
88 };
89
90 $$_className("week-year-css").onclick = function(){
91 var year = $_className("data-year-css").innerText;
92 var nextYear = getNextYear(year);
93 $_className("data-year-css").innerText = nextYear;
94 };
95
96 function getPreYear(date){
97 var year = date;
98 year = year - 1;
99 return year;
100 }
101
102 function getNextYear(date){
103 var year = date;
104 year = parseInt(year) + parseInt(1);
105 return year;
106 }
1 .week_td {
2 float: left;
3 width: 34px;
4 height: 24px;
5 text-align: center;
6 line-height: 24px;
7 cursor: pointer;
8 font: "微软雅黑";
9 font-size: 13px;
10 }
11
12 .week_td:hover {
13 cursor: pointer;
14 text-decoration: none;
15 background-color: #E0E0E0;
16 }
17
18 .small_right_div {
19 float: right;
20 border: 1px solid #C0C0C0;
21 width: 50px;
22 height: 30px;
23 cursor: pointer;
24 margin-top: 7px;
25 font-size: 14px;
26 text-align: center;
27 line-height: 30px;
28 }
29
30 .small_right_div:hover {
31 color: #5FB878;
32 }
33
34 .small_top_div {
35 float: left;
36 margin-top: 5px;
37 width: 80px;
38 height: 35px;
39 text-align: center;
40 line-height: 30px;
41 color: white;
42 }
43
44 .small_top_hover {
45 cursor: pointer;
46 font: "微软雅黑";
47 font-size: 17px;
48 }
49
50 .small_top_hover:hover {
51 color: #1E9FFF;
52 }
53
54 .small_top_year {
55 font: "微软雅黑";
56 font-size: 15px;
57 }
1 <div class="div-week-css">
2 <input type="text" readonly="readonly" id="ttttt" class="input-week-css" style="width: 270px;height: 25px;"/>
3</div>
