project_begger

镜花照无眠

已于 2024-03-03 21:12:00 修改

阅读量56

点赞数

分类专栏： Web 文章标签： javascript 前端开发语言

于 2023-07-29 18:03:23 首次发布

本文链接：https://blog.csdn.net/weixin_45693567/article/details/131998180

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在线要饭全球乞讨

在这里插入图片描述

<!DOCTYPE html>
<html>
   <head>
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">
      </script>
      <script>
         function functionAlert(msg, myYes) {
            var confirmBox = $("#confirm");
            confirmBox.find(".message").text(msg);
            confirmBox.find(".yes").unbind().click(function() {
               confirmBox.hide();
            });
            confirmBox.find(".yes").click(myYes);
            confirmBox.show();
         }
      </script>
      <style>
         #confirm {
            display: none;
            background-color: #FFFFFF;
            border: 1px solid #aaa;
            position: fixed;
            width: 250px;
            left: 50%;
            margin-left: -100px;
            padding: 6px 8px 8px;
            box-sizing: border-box;
            text-align: center;
         }
         #confirm button {
            background-color: #48E5DA;
            display: inline-block;
            border-radius: 5px;
            border: 1px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 80px;
            cursor: pointer;
         }
         #confirm .message {
            text-align: left;
         }
      </style>
   </head>
   <body>
      <audio id="audio" controls loop autoplay preload hidden>
         <source src="src/music.mp3" type="audio/ogg">
         <source src="src/music.mp3" type="audio/mpeg">
      </audio>
      <center>
         <div style="background-color:;">
      	<p style="font-size: xx-large;">在线乞讨 · 全球要饭</p>
      	</div>
      	<marquee style="background-color:lightblue;font-size: xx-large;">穷的吃土了...</marquee> <br /> 
      	<div style="background-color:orange;">
      	</br><img src ="src\tx.png" width="80" height="80"/>
      	<p style="font-size: xx-large;">大哥哥大姐们啊! 你们都是有钱的人呐~</br>谁有那多余的零钱?给我这流浪的人啊...</p>
      	</div>
      	<img src ="src\zhutu.jpg" width="400" height="400"/><br /> 
      	<div id="confirm">
         <div class="message">在线乞讨码，记得每天投喂 谢啦!!☆⌒(*＾-゜)v</div>
         <img src ="src\20230729160302.jpg" width="200" height="200"/>
		<button class="yes">OK</button>
      </div>
      <input type="button" value="打赏" onclick="functionAlert();" style="font-size: xx-large;color: green;"/>
      <h2 style="background-color:orange;font-size: xx-large;">别觉得一块钱不值得打赏<br />一块钱对我来说就是巨款</h2>
  	</center>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                function audioAutoPlay() {
                    var audio = document.getElementById('audio');
                    audio.play();
                    document.addEventListener("WeixinJSBridgeReady", function () {
                        audio.play();
                    }, false);
                }
                audioAutoPlay();
            });
        </script>
        <script>
            document.onmousedown = function (event) {
                toPlay();
            };
            function toPlay(){
                console.log('开始播放');
                var myAuto = document.getElementById('audio');
                myAuto.play();
            }
        </script>
   </body>
</html>

lightly

效果
~~https://f7a170c6-preview.lightly.teamcode.com/HTMLProject/index.html?server=preview&dcsId=f7a170c6&token=uurBLaFESdGmOj_xK8sIJg~~

退登后链接失效，重新开启可得新链接
在这里插入图片描述

在线生成圆头像 https://www.butterpig.top/imgcircle

录音转文字助手
在这里插入图片描述

电脑上看太大了，大小在手机上看合适
传送门：h5 project_Begger

镜花照无眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
project_begger

效果 https://f7a170c6-preview.lightly.teamcode.com/HTMLProject/index.html?在线生成圆头像 https://www.butterpig.top/imgcircle。
复制链接

扫一扫