面向过程（完美，有遮罩）
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>schedule</title>
</head>
<body>
<div>把这些文字放在这里，是为了展示输入框、日期表格、页面三者间的相对位置</div>
<span class="span">输入框、日期表格、页面三者间的相对位置</span><input type="text" id='inputBegin' />
<div>把这些文字放在这里，是为了展示输入框、日期表格、页面三者间的相对位置</div>
<div>把这些文字放在这里，是为了展示输入框、日期表格、页面三者间的相对位置</div>
<span class="span">输入框、日期表格、页面三者间的相对位置</span><input type="text" id='inputEnd' />
<div>把这些文字放在这里，是为了展示输入框、日期表格、页面三者间的相对位置</div>
</body>
</html>
<script type="text/javascript">
function schedule(inputID) {
var inputDateTime = document.getElementById(inputID);
inputDateTime.onfocus = function () {
if(divSchedule){
divSchedule.parentNode.removeChild(divSchedule);
}
inputDateTime.value="";
var nowDateTime = new Date();
var year = nowDateTime.getFullYear();
var month = nowDateTime.getMonth();
var day = nowDateTime.getDate();
var hour = nowDateTime.getHours();
var minute = nowDateTime.getMinutes();
var second = nowDateTime.getSeconds();
var scheduleHead = '';
var scheduleNeck = '';
var scheduleBody = '';
var submitButton = '';
var divMask = document.createElement("div");
divMask.style.cssText = "width:100%;height:100%;position:fixed;left:0;top:0;z-index:99999;background:white;opacity:0";
var divSchedule = document.createElement("div");
divSchedule.style.cssText = "width:500px;display:block;position:absolute;background:white;border:3px solid #EBEBEB;margin:0;padding:5px;z-index:100000;box-shadow:5px 5px 5px #EDEDED";
scheduleHead += '<div style="padding:10px 25px;font-size:0">';
scheduleHead += '<div style="display:inline-block;font-size:0">';
scheduleHead += '<span id="prevYearQC" style="user-select:none;cursor:pointer;display:inline-block;font-size:14px;margin-right:18px;">上年</span>';
scheduleHead += '<span id="prevMonthQC" style="user-select:none; cursor:pointer;display:inline-block;font-size:14px;margin-right:35px;">上月</span>';
scheduleHead += '</div>';
scheduleHead += '<div style="display:inline-block;font-size:0">';
scheduleHead += '<span id="yearMonthDayQC" style="display:inline-block;font-size:14px;margin-right:10px;">年月日</span>';
scheduleHead += '<select id="hourQC" style="display:inline-block;border:1px solid grey;font-size:14px;border-radius:3px;">';
for (var i = 0; i <= 23; i++) {
scheduleHead += '<option value="' + addZero(i) + '">' + addZero(i) + '</option> ';
}
scheduleHead += '</select>';
scheduleHead += '<span style="width:10px;display:inline-block;text-align:center;font-size:14px;">:</span>';
scheduleHead += '<select id="minuteQC" style="border:1px solid grey;font-size:14px;border-radius:3px;">';
for (i = 0; i <= 59; i++) {
scheduleHead += '<option value="' + addZero(i) + '">' + addZero(i) + '</option> ';
}
scheduleHead += '</select>';
scheduleHead += '<span style="width:10px;display:inline-block;text-align:center;font-size:14px;">:</span>';
scheduleHead += '<select id="secondQC" style="border:1px solid grey;font-size:14px;border-radius:3px;">';
for (i = 0; i <= 59; i++) {
scheduleHead += '<option value="' + addZero(i) + '">' + addZero(i) + '</option> ';
}
scheduleHead += '</select>';
scheduleHead += '</div>';
scheduleHead += '<div style="display:inline-block;font-size:0">';
scheduleHead += '<span id="nextMonthQC" style="user-select:none; cursor:pointer;display:inline-block;font-size:14px;margin-left:35px;">下月</span>';
scheduleHead += '<span id="nextYearQC" style="user-select:none;cursor:pointer;display:inline-block;font-size:14px;margin-left:16px;">下年</span>';
scheduleHead += '</div>';
scheduleHead += '</div>';
scheduleNeck += '<ul style="list-style:none;overflow:hidden;font-size:14px;margin-bottom:20px;padding:0;">';
scheduleNeck += '<li style="float:left;width:14.28%;text-align:center;">日</li>';
scheduleNeck += '<li style="float:left;width:14.28%;text-align:center;">一</li>';
scheduleNeck += '<li style="float:left;width:14.28%;text-align:center;">二</li>';
scheduleNeck += '<li style="float:left;width:14.28%;text-align:center;">三</li>';
scheduleNeck += '<li style="float:left;width:14.28%;text-align:center;">四</li>';
scheduleNeck += '<li style="float:left;width:14.28%;text-align:center;">五</li>';
scheduleNeck += '<li style="float:left;width:14.28%;text-align:center;">六</li>';
scheduleNeck += '</ul>';
scheduleBody += '<ul style="list-style:none;overflow:hidden;font-size:14px;margin:0;padding:0;" id="scheduleBodyQC" ></ul>';
submitButton += '<p style="width:160px;height:30px;margin:0 auto 10px;font-size:0"><input style="width:70px;height:30px;display:inline-block;margin-right:10px;font-size:18px;border-radius:4px;border:1px solid #C7C7C7;color:#666666;background:#EBEBEB;" type="button" value="填充" id="submitButtonQC"/><input style="width:70px;height:30px;display:inline-block;margin-left:10px;font-size:18px;border-radius:4px;border:1px solid #C7C7C7;color:#666666;background:#EBEBEB;" type="button" value="丢弃" id="abandonButtonQC"/></p>';
divSchedule.innerHTML = scheduleHead + scheduleNeck + scheduleBody + submitButton;
divSchedule.style.left = inputDateTime.offsetLeft + "px";
insertAfter(divSchedule, inputDateTime);
insertAfter(divMask, inputDateTime);
divSchedule.onclick = dateClick;
render();
document.getElementById("submitButtonQC").addEventListener("click",submitButtonClick,false);
document.getElementById("abandonButtonQC").addEventListener("click",abandonButtonClick,false);
divMask.addEventListener("click",divScheduleOuterClick,false);
function divScheduleOuterClick(){
divMask.parentNode.removeChild(divMask);
divSchedule.parentNode.removeChild(divSchedule);
}
function addZero(number) {
return (number.toString())[1] ? number :'0' + number;
}
function formatDate(year, month, day, hour, minute, second) {
month = addZero(month);
day = addZero(day);
hour = addZero(hour);
minute = addZero(minute);
second = addZero(second);
return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
}
function formatYearMonthDay(year, month, day) {
month = addZero(month);
day = addZero(day);
return year + "-" + month + "-" + day + " "
}
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement)
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
function dateClick(event) {
event = event || window.event;
var eventSource=event.target||event.srcElement;
switch (eventSource.id) {
case 'nextMonthQC':
if (month + 1 > 11) {
year += 1;
month = 0;
} else {
month += 1;
}
render();
break;
case 'nextYearQC':
year += 1;
render();
break;
case 'prevMonthQC':
if (month - 1 < 0) {
year -= 1;
month = 11;
} else {
month -= 1;
}
render();
break;
case 'prevYearQC':
year -= 1;
render();
break;
default:
break;
}
if (eventSource.className.indexOf('currentDateQC') > -1) {
day = eventSource.innerHTML;
render();
}
}
function submitButtonClick() {
hour = document.getElementById("hourQC").value;
minute = document.getElementById("minuteQC").value;
second = document.getElementById("secondQC").value;
inputDateTime.value = formatDate(year, month + 1, day, hour, minute, second);
divSchedule.parentNode.removeChild(divSchedule);
divMask.parentNode.removeChild(divMask);
}
function abandonButtonClick() {
divSchedule.parentNode.removeChild(divSchedule);
divMask.parentNode.removeChild(divMask);
}
function render() {
var LastDayOfLastMonth = new Date(year, month, 0).getDate(); //上月最后一天（即当月的第0天）
var totalDaysOfCurrentMonth = new Date(year, month + 1, 0).getDate(); //当月总天数（即当月最后一天，下月的第0天）
var firstDayOfFirstWeekInCurrentMonth = new Date(year, month, 1).getDay(); //当月第一天是周几
var partOfAllDaysOfShow=firstDayOfFirstWeekInCurrentMonth + totalDaysOfCurrentMonth;
var allDaysOfShow = partOfAllDaysOfShow % 7 == 0 ? partOfAllDaysOfShow :partOfAllDaysOfShow + (7 - partOfAllDaysOfShow % 7);//元素总个数
var temporaryElement = [];
for (var i = 0; i < allDaysOfShow; i++) {
if (i < firstDayOfFirstWeekInCurrentMonth) {
var startWeekString = '';
startWeekString += '<li style= "color:#999999;float:left;width:14.28%;text-align:center;height:50px;font-size:0">';
startWeekString += '<span style="display:inline-block;font-size:14px;width:35px;height:35px;border-radius:50%;text-align:center;line-height:35px;cursor:pointer;">';
startWeekString += (LastDayOfLastMonth - firstDayOfFirstWeekInCurrentMonth + 1 + i);
startWeekString += '</span>';
startWeekString += '</li>';
temporaryElement.push(startWeekString)
} else if (i < partOfAllDaysOfShow) {
var nowDate = formatDate(year, month + 1, (i + 1 - firstDayOfFirstWeekInCurrentMonth), hour, minute, second);
var nowMonthString = '';
nowMonthString += '<li style="float:left;width:14.28%;text-align:center;height:50px;font-size:0" >';
if (formatDate(year, month + 1, day, hour, minute, second) == nowDate) {
nowMonthString += '<span style="color:#ffffff;display:inline-block;font-size:14px;width:35px;height:35px;border-radius:50%;text-align:center;line-height:35px;cursor:pointer;background:#7D26CD;" class="currentDateQC">';
} else {
nowMonthString += '<span style="color:#333333;display:inline-block;font-size:14px;width:35px;height:35px;border-radius:50%;text-align:center;line-height:35px;cursor:pointer;" class="currentDateQC">';
}
nowMonthString += (i + 1 - firstDayOfFirstWeekInCurrentMonth);
nowMonthString += '</span>';
nowMonthString += '</li>';
temporaryElement.push(nowMonthString);
} else {
var overWeekString = '';
overWeekString += '<li style="color:#999999;float:left;width:14.28%;text-align:center;height:50px;font-size:0"><span style="display:inline-block;width:35px;height:35px;border-radius:50%;text-align:center;line-height:35px;cursor:pointer;font-size:14px">';
overWeekString += (i + 1 - partOfAllDaysOfShow);
overWeekString += '</span>';
overWeekString += '</li>';
temporaryElement.push(overWeekString);
}
}
var scheduleBody = document.getElementById('scheduleBodyQC');
var yearMonthDay = document.getElementById('yearMonthDayQC');
scheduleBody.innerHTML = temporaryElement.join('');
yearMonthDay.innerHTML = formatYearMonthDay(year, month + 1, day);
}
}
}
window.schedule = schedule;
</script>
<script type="text/javascript">
schedule("inputBegin");
schedule("inputEnd");
</script>
```
面向对象（完美，有遮罩）
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DateTime</title>
</head>
<body>
<div>把这些文字放在这里，是为了展示输入框、日期表格、页面三者间的相对位置</div>
<span class="span">输入框、日期表格、页面三者间的相对位置</span><input type="text" id='inputBegin'/>
<div>把这些文字放在这里，是为了展示输入框、日期表格、页面三者间的相对位置</div>
<div>把这些文字放在这里，是为了展示输入框、日期表格、页面三者间的相对位置</div>
<span class="span">输入框、日期表格、页面三者间的相对位置</span><input type="text" id='inputEnd'/>
<div>把这些文字放在这里，是为了展示输入框、日期表格、页面三者间的相对位置</div>
</body>
</html>
<script type="text/javascript">
function DateTime(inputID) {
//类上用this，要么是实例需要（通过实例.获取），要么是原型需要（原型不能获取这里var出来的值）。
var that=this;
this.nowDateTime = new Date();
this.year = this.nowDateTime.getFullYear();
this.month = this.nowDateTime.getMonth();
this.day = this.nowDateTime.getDate();
this.hour = this.nowDateTime.getHours();
this.minute = this.nowDateTime.getMinutes();
this.second = this.nowDateTime.getSeconds();
this.inputDateTime = document.getElementById(inputID);
this.inputDateTime.onfocus = function () {
if (divDateTime) {
divDateTime.parentNode.removeChild(divDateTime);
}
that.inputDateTime.value = "";
var dateTimeHead = '';
var dateTimeNeck = '';
var dateTimeBody = '';
var submitButton = '';
var divMask = document.createElement("div");
divMask.style.cssText = "width:100%;height:100%;position:fixed;left:0;top:0;z-index:99999;background:white;opacity:0";
var divDateTime = document.createElement("div");
divDateTime.style.cssText = "width:500px;display:block;position:absolute;background:white;border:3px solid #EBEBEB;margin:0;padding:5px;z-index:100000;box-shadow: 5px 5px 5px #EDEDED";
dateTimeHead += '<div style="padding:10px 25px;font-size: 0">';
dateTimeHead += '<div style="display: inline-block;font-size: 0">';
dateTimeHead += '<span id="prevYearQC" style="user-select: none;cursor:pointer;display: inline-block;font-size: 14px;margin-right:18px;">上年</span>';
dateTimeHead += '<span id="prevMonthQC" style="user-select: none; cursor:pointer;display: inline-block;font-size: 14px;margin-right:35px;">上月</span>';
dateTimeHead += '</div>';
dateTimeHead += '<div style="display: inline-block;font-size: 0">';
dateTimeHead += '<span id="yearMonthDayQC" style="display: inline-block;font-size: 14px;margin-right:10px;">年月日</span>';
dateTimeHead += '<select id="hourQC" style="display: inline-block;border:1px solid grey;font-size: 14px;border-radius: 3px;">';
for (var i = 0; i <= 23; i++) {
dateTimeHead += '<option value="' + that.addZero(i) + '">' + that.addZero(i) + '</option> ';
}
dateTimeHead += '</select>';
dateTimeHead += '<span style="width:10px;display: inline-block;text-align: center;font-size: 14px;">:</span>';
dateTimeHead += '<select id="minuteQC" style="border:1px solid grey;font-size: 14px;border-radius: 3px;">';
for (i = 0; i <= 59; i++) {
dateTimeHead += '<option value="' + that.addZero(i) + '">' + that.addZero(i) + '</option> ';
}
dateTimeHead += '</select>';
dateTimeHead += '<span style="width:10px;display: inline-block;text-align: center;font-size: 14px;">:</span>';
dateTimeHead += '<select id="secondQC" style="border:1px solid grey;font-size: 14px;border-radius: 3px;">';
for (i = 0; i <= 59; i++) {
dateTimeHead += '<option value="' + that.addZero(i) + '">' + that.addZero(i) + '</option> ';
}
dateTimeHead += '</select>';
dateTimeHead += '</div>';
dateTimeHead += '<div style="display: inline-block;font-size: 0">';
dateTimeHead += '<span id="nextMonthQC" style="user-select: none; cursor:pointer;display: inline-block;font-size: 14px;margin-left:35px;">下月</span>';
dateTimeHead += '<span id="nextYearQC" style="user-select: none;cursor:pointer;display: inline-block;font-size: 14px;margin-left:16px;">下年</span>';
dateTimeHead += '</div>';
dateTimeHead += '</div>';
dateTimeNeck += '<ul style="list-style: none;overflow: hidden;font-size: 14px;margin-bottom:20px;padding:0;">';
dateTimeNeck += '<li style="float:left;width:14.28%;text-align:center;">日</li>';
dateTimeNeck += '<li style="float:left;width:14.28%;text-align:center;">一</li>';
dateTimeNeck += '<li style="float:left;width:14.28%;text-align:center;">二</li>';
dateTimeNeck += '<li style="float:left;width:14.28%;text-align:center;">三</li>';
dateTimeNeck += '<li style="float:left;width:14.28%;text-align:center;">四</li>';
dateTimeNeck += '<li style="float:left;width:14.28%;text-align:center;">五</li>';
dateTimeNeck += '<li style="float:left;width:14.28%;text-align:center;">六</li>';
dateTimeNeck += '</ul>';
dateTimeBody += '<ul style="list-style: none;overflow: hidden;font-size: 14px;margin:0;padding:0;" id="dateTimeBodyQC" ></ul>';
submitButton += '<p style="width:160px;height:30px;margin:0 auto 10px;padding:0;font-size: 0"><input style="width:70px;height:30px;display: inline-block;margin-right: 10px;font-size:18px;border-radius: 4px;border:1px solid #C7C7C7;color:#666666;background: #EBEBEB;" type="button" value="填充" id="submitButtonQC"/><input style="width:70px;height:30px;display: inline-block;margin-left: 10px;font-size:18px;border-radius: 4px;border:1px solid #C7C7C7;color:#666666;background: #EBEBEB;" type="button" value="丢弃" id="abandonButtonQC"/></p>';
divDateTime.innerHTML = dateTimeHead + dateTimeNeck + dateTimeBody + submitButton;
divDateTime.style.left = that.inputDateTime.offsetLeft + "px";
that.insertAfter(divDateTime, that.inputDateTime);
that.insertAfter(divMask, that.inputDateTime);
divDateTime.onclick = function (event) {
event = event || window.event;
var eventSource = event.target || event.srcElement;
switch (eventSource.id) {
case 'nextMonthQC':
if (that.month + 1 > 11) {
that.year += 1;
that.month = 0;
} else {
that.month += 1;
}
that.render();
break;
case 'nextYearQC':
that.year += 1;
that.render();
break;
case 'prevMonthQC':
if (that.month - 1 < 0) {
that.year -= 1;
that.month = 11;
} else {
that.month -= 1;
}
that.render();
break;
case 'prevYearQC':
that.year -= 1;
that.render();
break;
default:
break;
}
if (eventSource.className.indexOf('currentDateQC') > -1) {
that.day = eventSource.innerHTML;
that.render();
}
};
that.render();
document.getElementById("submitButtonQC").addEventListener("click", function () {
that.hour = document.getElementById("hourQC").value;
that.minute = document.getElementById("minuteQC").value;
that.second = document.getElementById("secondQC").value;
that.inputDateTime.value = that.formatDate(that.year, that.month + 1, that.day, that.hour, that.minute, that.second);
divDateTime.parentNode.removeChild(divDateTime);
divMask.parentNode.removeChild(divMask);
}, false);
document.getElementById("abandonButtonQC").addEventListener("click", function () {
divDateTime.parentNode.removeChild(divDateTime);
divMask.parentNode.removeChild(divMask);
}, false);
divMask.addEventListener("click",function (){
divMask.parentNode.removeChild(divMask);
divDateTime.parentNode.removeChild(divDateTime);
},false);
}
}
DateTime.prototype.addZero=function (number) {
return (number.toString())[1] ? number : '0' + number;
};
DateTime.prototype.formatDate=function (year, month, day, hour, minute, second) {
month = this.addZero(month);
day = this.addZero(day);
hour = this.addZero(hour);
minute = this.addZero(minute);
second = this.addZero(second);
return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
};
DateTime.prototype.render=function() {
var LastDayOfLastMonth = new Date(this.year, this.month, 0).getDate(); //上月最后一天（即当月的第0天）
var totalDaysOfCurrentMonth = new Date(this.year, this.month + 1, 0).getDate(); //当月总天数（即当月最后一天，下月的第0天）
var firstDayOfFirstWeekInCurrentMonth = new Date(this.year, this.month, 1).getDay(); //当月第一天是周几
var partOfAllDaysOfShow = firstDayOfFirstWeekInCurrentMonth + totalDaysOfCurrentMonth;
var allDaysOfShow = partOfAllDaysOfShow % 7 == 0 ? partOfAllDaysOfShow : partOfAllDaysOfShow + (7 - partOfAllDaysOfShow % 7);//元素总个数
var temporaryElement = [];
for (var i = 0; i < allDaysOfShow; i++) {
if (i < firstDayOfFirstWeekInCurrentMonth) {
var startWeekString = '';
startWeekString += '<li style= "color:#999999;float:left;width:14.28%;text-align:center;height:50px;font-size: 0">';
startWeekString += '<span style="display: inline-block;font-size:14px;width: 35px;height: 35px;border-radius: 50%;text-align: center;line-height: 35px;cursor: pointer;">';
startWeekString += (LastDayOfLastMonth - firstDayOfFirstWeekInCurrentMonth + 1 + i);
startWeekString += '</span>';
startWeekString += '</li>';
temporaryElement.push(startWeekString)
} else if (i < partOfAllDaysOfShow) {
var nowDate = this.formatDate(this.year, this.month + 1, (i + 1 - firstDayOfFirstWeekInCurrentMonth), this.hour, this.minute, this.second);
var nowMonthString = '';
nowMonthString += '<li style="float:left;width:14.28%;text-align:center;height:50px;font-size: 0" >';
if (this.formatDate(this.year, this.month + 1, this.day, this.hour, this.minute, this.second) == nowDate) {
nowMonthString += '<span style="color: #ffffff;display: inline-block;font-size:14px;width: 35px;height: 35px;border-radius: 50%;text-align: center;line-height: 35px;cursor: pointer;background: #7D26CD;" class="currentDateQC">';
} else {
nowMonthString += '<span style="color: #333333;display: inline-block;font-size:14px;width: 35px;height: 35px;border-radius: 50%;text-align: center;line-height: 35px;cursor: pointer;" class="currentDateQC">';
}
nowMonthString += (i + 1 - firstDayOfFirstWeekInCurrentMonth);
nowMonthString += '</span>';
nowMonthString += '</li>';
temporaryElement.push(nowMonthString);
} else {
var overWeekString = '';
overWeekString += '<li style="color:#999999;float:left;width:14.28%;text-align: center;height:50px;font-size: 0"><span style="display: inline-block;width: 35px;height: 35px;border-radius: 50%;text-align: center;line-height: 35px;cursor: pointer;font-size:14px">';
overWeekString += (i + 1 - partOfAllDaysOfShow);
overWeekString += '</span>';
overWeekString += '</li>';
temporaryElement.push(overWeekString);
}
}
var dateTimeBody = document.getElementById('dateTimeBodyQC');
var yearMonthDay = document.getElementById('yearMonthDayQC');
dateTimeBody.innerHTML = temporaryElement.join('');
yearMonthDay.innerHTML = this.year + "-" + this.addZero(this.month+1) + "-" + this.addZero(this.day) + " ";
};
DateTime.prototype.insertAfter=function(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement)
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
</script>
<script type="text/javascript">
new DateTime("inputBegin");
new DateTime("inputEnd");
</script>
```
附、bootstrap进度条动态使用方法（两层div标签）
1、外层 class="progress" style="width:300px" ng-show="true"，规定展示区样式、宽度、是否显示。
1、内层 class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuenow="60" aria-valuemax="100" ng-style="{width: XXX}"，规定展示区样式、角色、最小展值、默认展示值、最大展示值、当前展示值，其中最大值和最小值供当前值计算占比。
```html
<div class="progress" style="width:300px" ng-show="init_study.state==='1'">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuenow="60" aria-valuemax="100"
ng-style="{width: init_study.progress}">
{{init_study.progress}}<!--进度条上展示的文字内容-->
</div>
</div>
```
47原生200行JavaScript日历插件（兼容bootstrap）
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/10966939.html
今日推荐
周排行