在网页DIV中设置一首诗词要求有诗的标题和作者,在标题上绑定双击事件,每一次双击标题时标题放大4px,在双击3次后解除绑定;在诗词第一行上使用one()函数绑定单击事件,单击时设置整个诗词正文字号设为24PX;在诗词
时间: 2023-12-03 10:47:34 浏览: 84
js单击事件和双击事件并存绑定
中每隔一行设置一个背景色,颜色可以自选。以下是HTML和JavaScript代码实现该功能:
```html
<div id="poem">
<h2 id="title">静夜思</h2>
<p id="author">李白</p>
<p>床前明月光,疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>
<p>明月几时有?把酒问青天。</p>
<p>不知天上宫阙,今夕是何年。</p>
</div>
```
```javascript
$(document).ready(function() {
var count = 0;
// 双击标题放大4px,双击3次后解除绑定
$('#title').dblclick(function() {
$(this).css('font-size', '+=4px');
count++;
if (count == 3) {
$(this).off('dblclick');
}
});
// 单击第一行设置整个诗词正文字号为24px
$('#poem p:first-child').one('click', function() {
$('#poem p').css('font-size', '24px');
});
// 每隔一行设置背景色
$('#poem p:nth-child(even)').css('background-color', '#f5f5f5');
$('#poem p:nth-child(odd)').css('background-color', '#e9e9e9');
});
```
注意,这里使用了jQuery库中的一些方法,需要先在HTML文档中引入jQuery库。
阅读全文