Heim > Artikel > Web-Frontend > Ausführliche Erklärung, wie man mit JS einen einfachen Almanach erstellt
Dieser Artikel stellt hauptsächlich die Methode zum Erstellen eines einfachen Almanachs mit js vor, einschließlich der Implementierungsideen und der Implementierungsfähigkeiten jedes Teils von js, CSS und HTML. Freunde in Not können sich darauf beziehen
Dieser Artikel Beschreibt die js-Produktion anhand von Beispielen. Einfache Almanach-Methode. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:
Heute habe ich gelernt, wie man einen Almanach erstellt. Ich habe auch die Verwendung von innerHTML überprüft Ich kann mich daran halten. Liebe js-Meister. Gebt mir auch viele Ratschläge.
Verwendung von innerHtml
Verwenden Sie nun die Methode top.innerHTML=".....", um an den Speicherort dieser ID zu schreiben. Geben Sie den HTML-Code ein.
Beispiel: top.innerHTML=""; eine Schaltfläche erscheint an der entsprechenden Position von top!
Ideen zur Programmimplementierung:
1. Ähnlich einem Tab, aber mit einem p am unteren Rand
2
3. Verwendung von Arrays ① Definition: arr[0,1,2,3] ② Verwendung: arr[0]4. ① Funktion: Zwei Zeichenketten „+“ verbinden ② Problem: Die Priorität in der Verbindung wird mit ()gelöst Quellcode:
JavaScript: Der Code ist wie folgt:<script type="text/javascript">
window.onload=function()
{
var arr=[
'快过年了，大家一起去放鞭炮咯！',
'马上上学了，不开心！',
'妇女节快乐！',
'很平淡的四月',
'劳动光荣！',
'儿童节快乐！',
'好热的七月!',
'八一建军节!',
'又开学了哎！'
];
var op=document.getElementById('tab');
var oLi=op.
getElementsByTagName
('li');
var oTxt=op.getElementsByTagName('p')[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)+'月活动</h2><p>'+arr[this.index]+'</p>';
};
}
};
</script>CSS:
Der Code ist wie folgt folgt:
<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: #fff;
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: #fff;
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:
Der Code lautet wie folgt:
<body>
<p id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>一月</p></li>
<li><h2>2</h2><p>二月</p></li>
<li><h2>3</h2><p>三月</p></li>
<li><h2>4</h2><p>四月</p></li>
<li><h2>5</h2><p>五月</p></li>
<li><h2>6</h2><p>六月</p></li>
<li><h2>7</h2><p>七月</p></li>
<li><h2>8</h2><p>八月</p></li>
<li><h2>9</h2><p>九月</p></li>
<li><h2>10</h2><p>十月</p></li>
<li><h2>11</h2><p>十一月</p></li>
<li><h2>12</h2><p>十二月</p></li>
</ul>
<p class="text">
</p>
</p>
</body>Die Darstellung ist wie folgt:
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man mit JS einen einfachen Almanach erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!