HTMLcssjavascript 实现新年红包

Posted 2021-03-12 Sunshine

上图！

html代码：

 1         <div class="wrapper shake" id="wrapper">
 2             <div id="header-box">
 3             </div>
 4             <div id="box" class="box">
 5                 <div id="content-box">
 6                     <img id="img" src="./img/bqb/3.jpg" />
 7                 </div>
 8                 <div id="confim"></div>
 9                 <div id="refuse"></div>
10             </div>
11         </div>

css代码：

 1 * {
 2     margin: 0;
 3     padding: 0;
 4     user-select: none;
 5     /* 文本不能被选择 */
 6 }
 7 
 8 body {
 9     background-image: url(./img/BG.jpg);
10     background-size: cover;
11     overflow: hidden;
12 }
13 
14 .wrapper {
15     width: 350px;
16     height: 470px;
17     position: absolute;
18     top: 50%;
19     left: 50%;
20     margin-top: -250px;
21     margin-left: -175px;
22     background-image: url(./img/red_above.png);
23     background-size: cover;
24 }
25 
26 .shake {
27     animation: shaking .3s infinite;
28 }
29 
30 @keyframes shaking {
31     0% {
32         transform: rotateZ(-6deg);
33     }
34 
35     50% {
36         transform: rotateZ(6deg);
37     }
38 
39     100% {
40         transform: rotateZ(-6deg);
41     }
42 }
43 
44 #header-box {
45     color: antiquewhite;
46     font-size: 16px;
47     width: 230px;
48     margin: 40px auto 0;
49 }
50 
51 #content-box {
52     width: 180px;
53     height: 180px;
54     text-align: center;
55     margin: 50px auto 0;
56     overflow: hidden;
57 }
58 
59 #content-box img {
60     width: 180px;
61     height: 180px;
62 }
63 
64 #confim {
65     width: 120px;
66     height: 40px;
67     background-image: url(./img/send_money.png);
68     background-size: cover;
69     position: absolute;
70     bottom: 30px;
71     left: 50px;
72 }
73 
74 #refuse {
75     width: 130px;
76     height: 38px;
77     background-image: url(./img/refuse.png);
78     background-size: cover;
79     position: absolute;
80     bottom: 34px;
81     left: 180px;
82 }
83 
84 .box {
85     opacity: 0;
86     display: none;
87 
88 }
89 
90 
91 .box-show {
92     opacity: 1;
93     display: block;
94 
95 }

javascript代码：

 1             var data = ["./img/bqb/1.jpg", "./img/bqb/2.jpg", "./img/bqb/4.jpg", "./img/bqb/5.jpg", "./img/bqb/6.gif"];
 2             // 点击反转逻辑
 3             var box = document.getElementById("box");
 4             var wrapper = document.getElementById("wrapper");
 5             var confim = document.getElementById("confim");
 6             var refuse = document.getElementById("refuse");
 7             var img = document.getElementById("img");
 8             wrapper.onclick = function() {
 9                 wrapper.onclick = null;
10                 // return;
11                 wrapper.className = "wrapper";
12                 wrapper.style.backgroundImage = "url(./img/red-action.gif)";
13                 setTimeout(renderWord, 600);
14             };
15             // 文字动态出现逻辑
16             var title = document.getElementById("header-box");
17             var str =
18                 "银花万簇迎金鼠，火树千株展玉龙。今朝天好地好，紫气东来大吉祥；今朝国安民安，丰衣足食合家欢。鼠年到了，愿您新春新气象，祝您人好家团圆。";
19 
20             function renderWord() {
21                 var index = 0;
22                 var t = setInterval(function() {
23                     index++;
24                     title.innerhtml = str.slice(0, index);
25                     if (index == str.length) {
26                         clearInterval(t);
27                         box.className = "box-show";
28                     }
29                 }, 10);
30             }
31 
32             //绑定事件
33             var state = 1;
34             refuse.onclick = function() {
35                 if (state == 1) {
36                     img.src = data.shift();
37                     if (data.length == 0) {
38                         state = 2;
39                         refuse.onmouseenter = function() {
40                             refuse.style.top = Math.random() * 500 + "px";
41                             refuse.style.left = Math.random() * 500 + "px";
42                         }
43                         refuse.style.top = Math.random() * 500 + "px";
44                         refuse.style.left = Math.random() * 500 + "px";
45                     }
46                 } else if (state == 2) {
47                     refuse.parentElement.removeChild(refuse);
48                 }
49             };
50             confim.onclick = function() {
51                 img.src = "./img/bqb/ewm.png";
52                 state = 3;
53 
54             }

 

 

 

欢迎━(*｀∀´*)ノ━ｨ!  大家留言讨论哦！