Maison >interface Web >js tutoriel >Créer un contrôle de calendrier en utilisant de pures compétences javascript_javascript
Créer un contrôle de calendrier en utilisant de pures compétences javascript_javascript
- WBOYoriginal
- 2016-05-16 15:50:001357parcourir
Dans le passé, lorsque je voulais utiliser le contrôle de calendrier, je devais télécharger un ensemble de codes sources directement depuis Internet. J'ai toujours eu l'idée en tête que je voulais écrire moi-même un contrôle de calendrier. Je viens de m'intéresser et j'avais le temps, alors je l'ai exploré moi-même, j'en ai écrit un, la fonction est assez complète et l'interface est tout simplement correcte. Le point le plus remarquable est peut-être d'afficher un bouton sur le côté droit du contrôle de saisie. J'ai directement ajouté un arrière-plan à l'entrée, puis j'ai supprimé la bordure de l'entrée.
Il s'agit de la première version, et je prévois de créer une version purement JavaScript à l'avenir, et je prévois d'utiliser JQuery pour en créer une à l'avenir.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>日历控件</title>
<style>
#date_text {
background-image: url(images/input.png);
background-repeat:no-repeat;
width: 198px;
height: 27px;
border:none;
padding-left:5px;
cursor:pointer;
}
#cal_body {
width: 198px;
height: auto;
overflow:hidden;
border: solid 1px #CCCCCC;
display: none;
position:absolute;
z-index:10;
}
.line {
width:100%;
height:26px;
float:left;
background-color:#0FF;
font-size:14px;
}
.cube {
float:left;
width:26px;
height:26px;
line-height:26px;
text-align:center;
margin-left:2px;
margin-bottom:2px;
}
.btn {
float:left;
background-color:#CCC;
margin-left:10px;
width:20px;
height:20px;
text-align:center;
line-height:20px;
border-radius:3px;
border:solid 1px;
margin-top:2px;
cursor:pointer;
}
.year_month {
float:left;
margin-left:10px;
width:90px;
height:19px;
text-align:center;
line-height:19px;
border-radius:6px;
}
.end_tag {
height:26px;
line-height:26px;
margin-left:10px;
}
</style>
<script>
Date.prototype.toFormatString = function(){
var result = this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();
return result;
};
var today = new Date();
var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组
var month_small = new Array("4","6","9","11"); //包含所有小月的数组
//判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false
function array_contain(array, obj){
for (var i = 0; i < array.length; i++){
if (array[i] == obj)
return true;
}
return false;
}
//判断年份year是否为闰年，是闰年则返回true，否则返回false
function isLeapYear(year){
var a = year % 4;
var b = year % 100;
var c = year % 400;
if( ( (a == 0) && (b != 0) ) || (c == 0) ){
return true;
}
return false;
}
function hideCalendar(){
var calbody = document.getElementById("cal_body");
cal_body.style.display = "none";
}
function showCalendar(){
var calbody = document.getElementById("cal_body");
var style = getDefaultStyle(calbody,"display");
if(style == "none")
cal_body.style.display = "block";
if(style == "block")
cal_body.style.display = "none";
var date_text = document.getElementById("date_text");
var val = date_text.value;
init(val);
}
function init(val){
clearCube();
var temp_date;
var date_text = document.getElementById("date_text");
if(val == ""){
temp_date = today;
date_text.value = today.toFormatString();
}
else{
temp_date = new Date(val);
}
var year = temp_date.getFullYear();
var month = temp_date.getMonth() + 1;
var date = temp_date.getDate();
temp_date.setDate(1);
var start = temp_date.getDay() + 7;
var end;
if(array_contain(month_big, month)){
end = start + 31;
}
else if(array_contain(month_small, month)){
end = start + 30;
}
else{
if(isLeapYear(year)){
end = start + 29;
}
else{
end = start + 28;
}
}
for(var i = start; i < end; i++){
var cube = document.getElementsByClassName("cube").item(i);
cube.innerHTML = i - start + 1;
cube.style.cursor = "pointer";
cube.onmouseover = function(){
this.style.backgroundColor = '#0FF';
}
if(date == (i - start + 1))
cube.style.backgroundColor = '#0FF';
else{
cube.onmouseout = function(){
this.style.backgroundColor = '';
}
}
cube.onclick = function(){
date_text.value = year + "-" + month + "-" + this.innerHTML;
cal_body.style.display = "none";
}
}
document.getElementById("text_year").value = year;
document.getElementById("text_month").value = month;
}
function clearCube(){
for(var i=7; i < 49; i++){
var cube = document.getElementsByClassName("cube").item(i);
cube.innerHTML = "";
cube.style.backgroundColor = "";
}
}
function yearDown(){
if(isValidated()){
var old_year = parseInt(document.getElementById("text_year").value);
if(old_year > 1960){
var year = old_year - 1;
var month = parseInt(document.getElementById("text_month").value);
var val = year + "-" + month + "-" + 1;
init(val);
}
}
}
function yearUp(){
if(isValidated()){
var old_year = parseInt(document.getElementById("text_year").value);
if(old_year < 2050){
var year = old_year + 1;
var month = parseInt(document.getElementById("text_month").value);
var val = year + "-" + month + "-" + 1;
init(val);
}
}
}
function monthDown(){
if(isValidated()){
var old_month = parseInt(document.getElementById("text_month").value)
if(old_month > 1){
var year = parseInt(document.getElementById("text_year").value);
var month = old_month - 1;
var val = year + "-" + month + "-" + 1;
init(val);
}
else {
var year = parseInt(document.getElementById("text_year").value) - 1;
var month = 12;
var val = year + "-" + month + "-" + 1;
init(val);
}
}
}
function monthUp(){
if(isValidated()){
var old_month = parseInt(document.getElementById("text_month").value)
if(old_month < 12){
var year = parseInt(document.getElementById("text_year").value);
var month = parseInt(document.getElementById("text_month").value) + 1;
var val = year + "-" + month + "-" + 1;
init(val);
}
else {
var year = parseInt(document.getElementById("text_year").value) + 1;
var month = 1;
var val = year + "-" + month + "-" + 1;
init(val);
}
}
}
function isValidated(){
var year = document.getElementById("text_year").value;
var month = document.getElementById("text_month").value;
if(isNaN(year) || isNaN(month)){
alert("请输入正确的年份/月份");
return false;
}
else{
if(year%1 != 0 || month%1 != 0){
alert("请输入正确的年份/月份");
return false;
}
else{
year = parseInt(year);
if(year < 1960 || year > 2050){
alert("请输入1960~2050之间的年份！");
return false;
}
else if(month < 1 || month >12){
alert("请输入正确的月份！");
return false;
}
else{
return true;
}
}
}
}
function changed(){
if(isValidated()){
var year = document.getElementById("text_year").value;
var month = document.getElementById("text_month").value;
var val = year + "-" + month + "-" + 1;
init(val);
}
}
function getDefaultStyle(obj,attribute){
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
</script>
</head>
<body>
<div id="container">
<div id="input_bg"><input id="date_text" type="text" readonly onClick="showCalendar()" /></div>
<div id="cal_body">
<div class="line"><div class="btn" id="year_down" onClick="yearDown()">-</div><input class="year_month" id="text_year" value="2015" onChange="changed()"><div class="btn" id="year_up" onClick="yearUp()">+</div><span class="end_tag">年</span></div>
<div class="line"><div class="btn" id="month_down" onClick="monthDown()">-</div><input class="year_month" id="text_month" value="5" onChange="changed()"><div class="btn" id="month_up" onClick="monthUp()">+</div><span class="end_tag">月</span></div>
<div class="cube">日</div>
<div class="cube">一</div>
<div class="cube">二</div>
<div class="cube">三</div>
<div class="cube">四</div>
<div class="cube">五</div>
<div class="cube">六</div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
<div>
</body>
</html>
Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Développement de compte public .NET WeChat pour créer des compétences menu_javascript personnaliséesArticle suivant：Développement de compte public .NET WeChat pour créer des compétences menu_javascript personnalisées
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript