JS를 사용하여 간단한 책력을 만드는 방법에 대한 자세한 설명
- 怪我咯원래의
- 2017-06-29 10:41:442173검색
이 글은 js로 간단한 연감을 만드는 방법을 주로 소개하는데, js, css, html 각 부분의 구현 아이디어와 구현 스킬이 필요하신 분들은 참고하시면 됩니다
이 글의 예시를 통해 방법을 알려드립니다. js로 간단한 연감을 만드는 것입니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
오늘은 js를 사용하여 연감을 만드는 방법을 배웠습니다. 또한 탭 제작과 조금 다른 내용을 검토했습니다. 모든 js 마스터가 나에게 조언을 해줄 수 있기를 바랍니다.
innerHtml 사용
이제 top.innerHTML="..." 메소드를 사용하여 이 ID의 위치에 HTML 코드를 작성합니다.
예를 들어 top.innerHTML=""를 사용하면 상단의 해당 위치에 버튼이 표시됩니다!
프로그램 구현 아이디어:
1. 하단에 p가 있다는 점을 제외하면 탭과 유사합니다.
2. innerHTML 사용
1 정의: arr[0,1, 2,3 ]
② 사용: arr[0]
4.
문자열 연결② 문제: 연결의 우선순위는 ()
로 해결됩니다. 구현 소스 코드:JavaScript:
코드는 다음과 같습니다.
<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:
코드는 다음과 같습니다.<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: 코드는 다음과 같습니다.
<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>효과 사진은 다음과 같습니다.
위 내용은 JS를 사용하여 간단한 책력을 만드는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.