HTML原生JS制作爱心表白代码是一种表达心意的方式,它可以让你向心仪的人表达爱意,让爱情更加浪漫和甜蜜。
以下是我们将要用到的HTML和JS代码,包含了一个爱心图案、输入框和按钮:
<div class="content"> <div id="heart" class="heart"></div> <input type="text" id="input" placeholder="请输入你的表白话语"/> <button onclick="showlove()">表白</button> </div>
这段代码中,我们使用了一个div容器,放置了一个爱心图案、一个输入框和一个按钮,并为按钮添加了一个onclick事件,当点击按钮时会执行showlove()函数。
接下来,我们需要编写一个showlove()函数,该函数可以从输入框中获取表白文字,并将其显示在爱心图案中:
function showlove() { var content = document.getElementById('input').value; if (content != '') { var heart = document.getElementById('heart'); heart.innerHTML = content; } }
这段函数中,我们首先使用了document.getElementById()方法获取了输入框中的内容,并将其存储在content变量中。然后,我们进一步将爱心图案的HTML内容替换为content变量的值,这样就能让爱心表白更加生动和真实。最后,我们增加了一个判断,如果输入框内容为空,则不予处理。
最后,我们需要为爱心图案添加一些CSS样式,以使其更漂亮和醒目:
.content { position: relative; width: 300px; height: 400px; margin: 0 auto; text-align: center; } .heart { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; transform: translate(-50%,-50%); background-color: #ff0033; color: white; font-size: 30px; text-align: center; line-height: 120px; Box-shadow: 0px 2px 10px rgba(0,0.2); border-radius: 50%; }
这些CSS样式中,我们为爱心图案添加了一些基本样式,包括了宽度和高度、文字颜色和大小以及外边框阴影等效果。
通过这些HTML原生JS制作爱心表白代码,我们可以轻松地向自己喜欢的人表达心意,让爱情更加升华和美好。