刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙。
步骤如下:
1、编写HTML代码:
创建一个弹幕显示墙,以及两个按钮,分别为“发送”和“清屏”,并在文本框中设置placeholder为“说点什么吧?”以提示用户在此输入弹幕信息。
<body> <div class="con"> <div id="screen"> <div class="dm_show"> <!-- <div>text message</div> --> </div> </div> <div class="edit"> <p> <input placeholder="说点什么吧?" class="content" type="text" /> </p> <p> <input type="button" class="send" value="发送" /> <input type="button" class="clear" value="清屏" /> </p> </div> </div> </body>
2、设置各标签的CSS样式:
<style> .con { background-color: floralwhite; padding: 40px 80px 80px; } #screen { background-color: #fff; width: 100%; height: 380px; border: 1px solid rgb(229, 229, 229); font-size: 14px; } .content { border: 1px solid rgb(204, 204, 204); border-radius: 3px; width: 320px; height: 35px; font-size: 14px; margin-top: 30px; } .send { border: 1px solid rgb(230, 80, 30); color: rgb(230, 80, 0); border-radius: 3px; text-align: center; padding: 0; height: 35px; line-height: 35px; font-size: 14px; width: 159px; background-color: white; } .clear { border: 1px solid; color: darkgray; border-radius: 3px; text-align: center; padding: 0; height: 35px; line-height: 35px; font-size: 14px; width: 159px; background-color: white; } .edit { margin: 20px; text-align: center; } .text { position: absolute; } *{ margin: 0; padding: 0; } .dm_show{ margin: 30px; } </style>
CSS代码完成后效果如下:
完成后的效果如下:
3、编写JavaScript代码,添加按钮点击事件
标签:
js,弹幕墙
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“javascript实现弹幕墙效果”评论...
更新动态
2024年05月15日
2024年05月15日
- 崩坏星穹铁道2.2动作派挑战怎么解锁 动作派隐藏挑战攻略
- 刘以达.2012-希望之旅[香港][WAV整轨]
- 张国荣.2015-NEW精选XRCD【华星】【WAV+CUE】
- 松田圣子SeikoMatsuda《SEIKOJAZZ3》2024[24bit-WAV+CUE]
- 老任极其重视NS2保密工作 疑似为其代号又建了个代号
- 世嘉舅妈透露任天堂新项目代号 或为《塞尔达传说:荒野之息》新机增强版
- EA计划游戏内置广告 博主整活《使命召唤》“幽灵之死”插播广告
- 群星《柏林之声3》[WAV+CUE][654M]
- 张学友《4合一珍藏集》[FLAC][1.4G]
- 刘亮鹭《此情可待+江湖情+江湖笑》3CD合集[WAV+CUE][1.3G]
- 麦田守望者.1997-麦田守望者【红星生产社】【WAV+CUE】
- 陈蕾.2024-念【华纳】【FLAC分轨】
- 与非门.2010-10乐园【中唱】【WAV+CUE】
- 崩坏星穹铁道2.2枪火的试炼怎么解锁 枪火试炼隐藏挑战攻略
- 崩坏星穹铁道2.2时间的试炼怎么解锁 时间试炼隐藏挑战攻略