This article examples illustrate how to make a simple calendar by JS. Share it for your reference. The details are as follows:
Today I learned how to use js to create an annual calendar, and reviewed the usage of this. It is a bit different from the production of tabs. I have used innerHTML for a new use. I hope I can stick to it. I will give you more advice from all the js masters.
Usage of innerHtml
Now use the top.innerHTML="....."; method to write HTML code to the location of this id.
For example, top.innerHTML=""; can appear a button in the corresponding position of top!
Program implementation ideas:
1. Similar to the tab, except that there is a div at the bottom;
2. Use of innerHTML
3. Use of arrays
① Definition: arr[0,1,2,3]
② Use: arr[0]
4. String connection
① Function: concatenate two strings "+"
② Problem: Use () to solve the priority in the connection
Implement source code:
JavaScript:
Copy the code as follows:<script type="text/javascript">
window.onload=function()
{
var arr=[
'It's the New Year almost, let's set off firecrackers together! ',
'I'm going to school soon, unhappy! ',
'Happy Women's Day! ',
'It's pretty dull April',
'Labor is glorious! ',
'Happy Children's Day! ',
'What a hot July!',
'August 1st Army Day!',
'School is starting again! '
];
var oDiv=document.getElementById('tab');
var oLi=oDiv.getElementsByTagName('li');
var oTxt=oDiv.getElementsByTagName('div')[0];
var i=0;
for(var i=0;i<oLi.length;i++)
{
oLi[i].index=i;
oLi[i].onmouseover=function ()
{
for(var i=0;i<oLi.length;i++)
{
oLi[i].className='';
}
this.className='active';
oTxt.innerHTML='<h2>'+(this.index+1)+'monthly activity</h2><p>'+arr[this.index]+'</p>';
};
}
};
</script>
CSS:
Copy the code as follows: <style type="text/css">
* { padding: 0;margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }
.calendar { width: 210px;
margin: 50px auto 0;
padding: 10px 10px 20px 20px;
background: #eae9e9; }
.calendar ul { width: 210px;
overflow: hidden;
padding-bottom: 10px; }
.calendar li { float: left;
width: 58px;
height: 54px;
margin: 10px 10px 0 0;
border: 1px solid #fff;
background: #424242;
color: #ffff;
text-align: center;
cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }
.calendar .active { border: 1px solid #424242;
background: #ffff;
color: #e84a7e; }
.calendar .active h2 { }
.calendar .active p { font-weight: bold; }
.calendar .text { width: 178px;
padding: 0 10px 10px;
border: 1px solid #fff;
padding-top: 10px;
background: #f1f1f1;
color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }
</style>
HTML:
Copy the code as follows:<body>
<div id="tab">
<ul>
<li><h2>1</h2><p>January</p></li>
<li><h2>2</h2><p>February</p></li>
<li><h2>3</h2><p>March</p></li>
<li><h2>4</h2><p>April</p></li>
<li><h2>5</h2><p>May</p></li>
<li><h2>6</h2><p>June</p></li>
<li><h2>7</h2><p>July</p></li>
<li><h2>8</h2><p>August</p></li>
<li><h2>9</h2><p>September</p></li>
<li><h2>10</h2><p>October</p></li>
<li><h2>11</h2><p>November</p></li>
<li><h2>12</h2><p>December</p></li>
</ul>
<div>
</div>
</div>
</body>
The renderings are as follows:
I hope this article will be helpful to everyone's JavaScript programming.