用javascript程序来实现以前做的coffee网页

本文介绍了如何使用JavaScript简化页面元素的生成过程。通过一个for循环和document.write()方法,可以高效地创建包含图片、标题和详细信息的div块,替代了传统的方法中需要对每个div单独定义的方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  经过前两天对Javascript的初步了解,今天课堂上王老师带着我们帮以前的coffee介绍页面用script做出来,相比以前每段div都要进行大量的修饰定义,Javascrpt可以通过一个for语句循环来解决,非常方便。但是刚开始还是没能做出来,问题在document.write()的输出格式不对。document.write()的输出跟以前的输出差不多,里面的输出的图片,标题,段落可以用定义的数组里的元素来代替,比如var coffees=[
{
img:'.....',
title:'......',
detail:'....... '

},

                      {
img:'.....',
title:'......',
detail:'....... '

},  ..............]

for (var i = 0; i < coffees.length; i++) {
document.write('<div class="wrapper"><img src="'+coffees[i].img+'"><h3>'+coffees[i].title+'</h3><p>'+coffees[i].detail+'</p></div>')
}

  +coffees[i].img+等于第i个段落里引用的图片地址+号表示连接符



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值