javascriptに基づいてカレンダーの機能原理とコードの実例を実現します。
6534 ワード
カレンダー
javascriptを勉強しているうちに、初心者の教程にjavascriptの実例があります。cssカレンダーは面白いと思います。その上に簡単な機能が増えました。
機能は、伝統的なカレンダーに従って、この月の毎日を表示します。 は今日の日付を強調表示することができます。 は前月と来月のカレンダーをめくることができます。
実現する step 1伝統的なカレンダーレイアウトスタイル：それぞれの年と月、月、月のすべての日数をリストレイアウトにし、伝統的なカレンダーを構成するスタイルを並べます。 step 2初期化と更新月：リストをクリアしてから、ある発見があります。初期化のリストにあるchildNodesは、プロジェクトの中でクリアする必要があります。それから、先頭の空白を記入します。 Step 3は、documentでリストオブジェクトを取得し、今日の対応する行のスタイルを変更して強調表示します。 他の詳細はコードで実装されます。
コード
htmlコード
javascriptは今は初歩的で、最も基礎的な皮毛学会です。少なくともできないものは関数を探して、資料を調べて勉強します。実現するのはちょっと複雑かもしれませんが、最終的には自分の構想を表現できます。次は、いくつかの実例を書いてjqueryを見に行きます。
cssはまだ不足しています。一部のものは衝突があるかもしれません。希望のものが実現できなくて、元のものを勉強しに帰ります。一番重要な点は多く訓練して、経験を積み、法則と思想をまとめます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
javascriptを勉強しているうちに、初心者の教程にjavascriptの実例があります。cssカレンダーは面白いと思います。その上に簡単な機能が増えました。
機能
htmlコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS </title>
<link type="text/css" rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<h1>CSS </h1>
<div class="month">
<ul>
<li class="prev" onclick="change(-1)">❮</li>
<li class="next" onclick="change(1)">❯</li>
<li style="text-align: center"><span id="month">August</span><br>
<span style="font-size: 18px" id="year">2016</span></li>
</ul>
</div>
<ul class="weekdays" id="weekdays">
</ul>
<ul class="days" id="days">
</ul>
</body>
<script type="text/javascript" src="show.js"></script>
</html>
@charset "UTF-8";
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}
.center {
text-align: center;
border: 3px solid green;
}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li active {
padding: 5px;
background: #1abc9c;
color: white !important;
}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
var date = new Date();
var year = date.getFullYear();
var month=date.getMonth();
var day = date.getDate();
var week=date.getDay();
var p=(week-day+1+35)%7+day-1;
var monthName=[
"January","February","March","April","May","June","July","August","September","October","November","December"
];
var monthNum=[
31,28,31,30,31,30,31,31,30,31,30,31
];
var weekName=[
"Su","Mo","Tu","We","Th","Fr","Sa"
];
var aimmonth=month,aimyear=year;
function init(){
createTitle(year,month);
var weekdays=document.getElementById("weekdays");
for(var i=0;i<7;i++){
var x = document.createElement("LI");
var t = document.createTextNode(weekName[i]);
x.appendChild(t);
weekdays.appendChild(x);
}
delDay();
createDay();
isnow();
}
function change(x){
aimmonth+=x;
if(aimmonth==-1){
aimyear-=1;
aimmonth=11;
}else if(aimmonth==12){
aimyear+=1;
aimmonth=0;
}
createTitle(aimyear,aimmonth);
delDay();
createDay();
isnow();
}
function createTitle(y,m){
document.getElementById("year").innerHTML=y;
document.getElementById("month").innerHTML=monthName[m];
}
function createDay(){
var datetmp=new Date();
datetmp.setFullYear(aimyear,aimmonth,1);
var firstday=datetmp.getDay();
var days=document.getElementById("days");
for(var i=0;i<firstday;i++){
var x = document.createElement("LI");
var t = document.createTextNode("");
x.appendChild(t);
days.appendChild(x);
}
for(var i=1;i<=getMonthDay();i++){
var x = document.createElement("LI");
var t = document.createTextNode(i);
x.appendChild(t);
days.appendChild(x);
}
}
function delDay(){
var list=document.getElementById("days");
var len=list.childNodes.length;
for(var i=0;i<len;i++){
list.removeChild(list.childNodes[0]);
}
}
function isnow(){
if(aimyear==year&&aimmonth==month){
days.childNodes[p].style="padding: 5px;background: #1abc9c;color: white !important;"
}
}
function getMonthDay(){
if(aimmonth!=2){
return monthNum[aimmonth];
}else{
if(aimyear%4!=0||aimyear%100==0&&aimyear%400!=0){
return monthNum[aimmonth];
}
else return 29;
}
}
//main
init();javascriptは今は初歩的で、最も基礎的な皮毛学会です。少なくともできないものは関数を探して、資料を調べて勉強します。実現するのはちょっと複雑かもしれませんが、最終的には自分の構想を表現できます。次は、いくつかの実例を書いてjqueryを見に行きます。
cssはまだ不足しています。一部のものは衝突があるかもしれません。希望のものが実現できなくて、元のものを勉強しに帰ります。一番重要な点は多く訓練して、経験を積み、法則と思想をまとめます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。