我用js写了一个，除夕烟花秀和春节随机祝福语

最新推荐文章于 2023-01-07 16:34:33 发布

m0_67392811

最新推荐文章于 2023-01-07 16:34:33 发布

阅读量263

点赞数

分类专栏：前端 html 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_67392811/article/details/123220718

版权

项目截图

进入后的界面

图片.png

点击按钮

图片.png

点击之后的动画

烟花结束后的界面

代码实现

涉及的技术：HTML5多媒体，CSS定位，动画，js面向对象，Jquery动画、事件

首先来看HTML代码

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2022</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/index.js"></script>

</head>

<body>
    <!--这个是点击按钮的盒子，算是烟花筒 -->
    <div class="he">
        <!--这个是点击按钮，点击以后就开始做一些处理 -->
        <button id="fire"></button>
    </div>
    <!--这个是烟花哦-->
    <div class="box">
    </div>
    <!--这个是烟花结束后，出现在上面的2022图片
    <div class="title"></div>
    <!--这个就是随机生成祝福语的大盒子啦-->
    <div class="greetings">
        <!--可以通过这个div来动态的呈现祝福语，默认第一个是虎虎生威-->
        <div class="yu"><span id="blessing">虎虎生威</span></div>
        <!--这个是点击按钮，点击后停下快闪的祝福语-->
        <button id="btn">查看我的祝福</button>
    </div>

    <audio src="./meiti/chuxi.mp3"></audio>

最低0.47元/天解锁文章

m0_67392811

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我用js写了一个，除夕烟花秀和春节随机祝福语

项目截图进入后的界面点击按钮点击之后的动画烟花结束后的界面代码实现涉及的技术：HTML5多媒体，CSS定位，动画，js面向对象，Jquery动画、事件首先来看HTML代码<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫