js表白代码

主要使用了js的函数调用,对于小白来讲,可以在桌面新建一个文本文档,再将下面的代码复制粘贴后保存,将后缀名txt改成html双击运行即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LOVE YOU</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" >
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js" ></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="container">
    <div class="row col-md-3"></div>
    <div class="row col-md-6" >
        <div class="row question">
            <div class="col-md-6 col-xs-12">
                <p style="line-height: 50px;font-size: 10px;">“小姐姐,我观察你很久了”</p>
                <p style="line-height: 50px;font-size: 20px;">做我女朋友好不好?</p>
            </div>
            <div class="col-md-6 col-xs-12">
                <img src="https://i.jpg.dog/img/a85bca3bdf386249b7ee74ca40518c93.png" alt="" style="height: 200px;">
            </div>
        </div>
        <div class="row question" style="margin-top: 20px;">
            <div class="col-md-6 col-xs-6" style="text-align: center;">
                <button type="button" class="btn btn-success" style="width: 80%" id="no">好</button>
            </div>
            <div class="col-md-6 col-xs-6" style="text-align: center;">
                <button type="button" class="btn btn-danger" style="width: 80%" id="ok">不好</button>
            </div>
        </div>
        <div class="col-md-12 col-xs-12 hide" id="success">
            <img src="https://i.jpg.dog/img/769db7762db8753d91143c4c8c394e76.gif" alt="" style="width: 100%;">
        </div>
    </div>

    <div class="row col-md-3"></div>

</div>
<script>
    var i=1;
    var ok=false;
    $(document).ready(function(){
        $("#no").click(function(){
            alert("真的吗?你答应了?");
            alert("给我发消息吧,爱你");
            $(".question").addClass('hide');
            $("#success").removeClass('hide');
            ok=true;
        });
        $("#ok").click(function(){
            switch(i){
                case 1:
                    alert("工资上交");
                    break;
                case 2:
                    alert("家务全包");
                    break;
                case 3:
                    alert("房产证写你的名字");
                    break;
				case 4:
                    alert("保大");
                    break;
                case 5:
                    alert("我妈会游泳");
                    break;
                case 6:
                    alert("不跟你吵架,会撒娇 会卖萌");
                    break;
                default:
                    alert("答应我吧");
            }
            i++;
        });
    });
</script>
</body>
</html>

出现乱码的话,按以下步骤操作
在这里插入图片描述
编码格式需要设置为相同的utf-8,改为utf-8后保存
在这里插入图片描述

要实现一个含有背景音乐的JS表白代码,我们可以借助HTML5的audio标签来播放音乐。首先,我们需要一个按钮触发表白动作,这里我们可以使用一个简单的按钮元素。当按钮被点击时,我们将触发一个JavaScript函数,该函数将展示一个表白页面,并播放背景音乐。在HTML文件中,我们可以这样写: ```html <!DOCTYPE html> <html> <head> <title>JS表白代码</title> <style> #confession { display: none; text-align: center; font-size: 24px; padding-top: 200px; color: red; } </style> </head> <body> <button onclick="showConfession()">表白</button> <div id="confession"> <p>我喜欢你,你愿意和我在一起吗?</p> <audio src="background_music.mp3" autoplay loop></audio> </div> <script> function showConfession() { document.getElementById("confession").style.display = "block"; } </script> </body> </html> ``` 在上面的代码中,我们使用了一个CSS样式来隐藏了id为"confession"的div元素,该元素包含了一个表白的信息,同时通过`display: none;`来隐藏。 当按钮被点击时,`showConfession()`函数被触发,该函数将显示表白页面,通过`document.getElementById("confession").style.display = "block";`将id为"confession"的div元素显示出来。 在表白页面中,我们使用了`<audio>`标签来嵌入背景音乐,通过设置`autoplay`和`loop`属性,音乐将自动播放并循环播放。 你只需将背景音乐文件"background_music.mp3"替换为自己喜欢的音乐文件即可。 希望以上的代码能够帮助你实现一个带有背景音乐的JS表白页面!
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Modify_QmQ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值