html原生JS制作爱心表白代码

HTML原生JS制作爱心表白代码是一种表达心意的方式，它可以让你向心仪的人表达爱意，让爱情更加浪漫和甜蜜。

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制作爱心表白代码，我们可以轻松地向自己喜欢的人表达心意，让爱情更加升华和美好。

html原生JS制作爱心表白代码

相关文章