HTML、CSS和JavaScript编写的吹泡泡的网页代码和注释： - 码农知识堂

HTML、CSS和JavaScript编写的吹泡泡的网页代码和注释：
以下是使用HTML、CSS和JavaScript编写的吹泡泡的网页代码和注释：
```
DOCTYPE html>
<html>
<head>
	<title>Bubble Blowertitle>
	<style>
		body {
			background-color: #f2f2f2;
		}
		#bubble {
			position: absolute;
			background-color: #ffffff;
			border-radius: 50%;
			box-shadow: 0px 0px 20px #ffffff;
			animation: bubble 3s ease-out;
			animation-fill-mode: forwards;
		}
		@keyframes bubble {
			0% {
				width: 0px;
				height: 0px;
				opacity: 1;
			}
			50% {
				width: 100px;
				height: 100px;
				opacity: 0.5;
			}
			100% {
				width: 200px;
				height: 200px;
				opacity: 0;
			}
		}
	style>
head>
<body>
	<h1>Bubble Blowerh1>
	<button onclick="blowBubble()">Blow Bubblebutton>
	<div id="bubble">div>
	<script>
		function blowBubble() {
			// 创建一个div元素作为泡泡
			var bubble = document.createElement("div");
			// 给泡泡设置id
			bubble.setAttribute("id", "bubble");
			// 将泡泡添加到body中
			document.body.appendChild(bubble);
			// 设置泡泡的位置为鼠标点击的位置
			bubble.style.left = event.clientX - 100 + "px";
			bubble.style.top = event.clientY - 100 + "px";
		}
	script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
```
注释：
1. ：声明文档类型为HTML5。
2. ：HTML文档的根元素。
3. ：文档头部，用于包含文档的元数据。
4. </code>：文档的标题，显示在浏览器的标签页上。</li><li><code><style></code>：用于定义文档的样式。</li><li><code>body</code>：文档的主体部分。</li><li><code>background-color</code>：设置背景颜色为灰色。</li><li><code>#bubble</code>：选择id为bubble的元素。</li><li><code>position</code>：设置元素的定位方式为绝对定位。</li><li><code>background-color</code>：设置元素的背景颜色为白色。</li><li><code>border-radius</code>：设置元素的圆角半径为50%。</li><li><code>box-shadow</code>：设置元素的阴影效果。</li><li><code>animation</code>：设置元素的动画效果，使用名为bubble的动画，持续时间为3秒，缓动方式为ease-out。</li><li><code>animation-fill-mode</code>：设置动画结束后元素的状态，保持在最后一帧的状态。</li><li><code>@keyframes bubble</code>：定义名为bubble的动画。</li><li><code>0%</code>：动画开始时元素的状态。</li><li><code>50%</code>：动画进行到50%时元素的状态。</li><li><code>100%</code>：动画结束时元素的状态。</li><li><code>width</code>：设置元素的宽度。</li><li><code>height</code>：设置元素的高度。</li><li><code>opacity</code>：设置元素的透明度。</li><li><code><h1></code>：定义文档的一级标题。</li><li><code><button></code>：定义一个按钮。</li><li><code>onclick</code>：设置按钮的点击事件。</li><li><code>blowBubble()</code>：定义一个名为blowBubble的函数，用于创建泡泡。</li><li><code>document.createElement("div")</code>：创建一个div元素。</li><li><code>setAttribute("id", "bubble")</code>：给元素设置id属性为bubble。</li><li><code>appendChild(bubble)</code>：将元素添加到文档中。</li><li><code>event.clientX</code>：获取鼠标点击的x坐标。</li><li><code>event.clientY</code>：获取鼠标点击的y坐标。</li><li><code>style.left</code>：设置元素的左边距。</li><li><code>style.top</code>：设置元素的上边距。</li></ol> <h3><a name="t0"></a><a id="_99"></a>进阶优化版本</h3> <pre data-index="1" class="set-code-hide prettyprint"><code class="prism language-go has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html> <head> <title>Bubble Blower</title> <style> * { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; overflow: hidden; background-color: #3a3434; } #bubble { position: absolute; /* background-color: #ffffff; */ border-radius: 50%; box-shadow: 0px 0px 20px #ffffff; animation: bubble 3s ease-out; animation-fill-mode: forwards; } @keyframes bubble { 0% { width: 0px; height: 0px; opacity: 1; filter: hue-rotate(0); } 50% { width: 100px; height: 100px; opacity: 0.5; } 100% { width: 200px; height: 200px; opacity: 0; filter: hue-rotate(360deg); } } </style> </head> <body> <h1>Bubble Blower</h1>   <script> let bodyEle = document.body bodyEle.addEventListener("click", blowBubble) function blowBubble(event) { // 创建一个div元素作为泡泡 var bubble = document.createElement("div"); // 给泡泡设置id bubble.setAttribute("id", "bubble"); // 将泡泡添加到body中 document.body.appendChild(bubble); // 设置泡泡的位置为鼠标点击的位置 bubble.style.left = event.clientX + "px"; bubble.style.top = event.clientY + "px"; bubble.style.backgroundColor=`rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})` setTimeout(() => { bubble.remove() }, 3000) } let lastExecutedTime = 0; function blowBubbleJieLiu(event){ let currentTime = Date.now(); let timeSinceLastExecution = currentTime - lastExecutedTime; console.log(currentTime , lastExecutedTime); if (timeSinceLastExecution >= 50) { blowBubble(event) lastExecutedTime=currentTime }else{ console.log("不行"); return } } bodyEle.addEventListener("mousedown", blowBubble) bodyEle.addEventListener("mousemove", blowBubbleJieLiu) // 随机 setInterval(() => { // 创建一个div元素作为泡泡 let bubble = document.createElement("div"); // 给泡泡设置id bubble.setAttribute("id", "bubble"); // 将泡泡添加到body中 document.body.appendChild(bubble); // 设置泡泡的位置为鼠标点击的位置 w = Math.floor(Math.random()*window.innerWidth) h = Math.floor(Math.random()*window.innerHeight) bubble.style.left = w + "px"; bubble.style.top = h + "px"; setTimeout(() => { bubble.remove() }, 3000) }, 1500) </script> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li><li style="color: rgb(153, 153, 153);">94</li><li style="color: rgb(153, 153, 153);">95</li><li style="color: rgb(153, 153, 153);">96</li><li style="color: rgb(153, 153, 153);">97</li><li style="color: rgb(153, 153, 153);">98</li><li style="color: rgb(153, 153, 153);">99</li><li style="color: rgb(153, 153, 153);">100</li><li style="color: rgb(153, 153, 153);">101</li><li style="color: rgb(153, 153, 153);">102</li><li style="color: rgb(153, 153, 153);">103</li><li style="color: rgb(153, 153, 153);">104</li><li style="color: rgb(153, 153, 153);">105</li><li style="color: rgb(153, 153, 153);">106</li><li style="color: rgb(153, 153, 153);">107</li><li style="color: rgb(153, 153, 153);">108</li><li style="color: rgb(153, 153, 153);">109</li><li style="color: rgb(153, 153, 153);">110</li><li style="color: rgb(153, 153, 153);">111</li><li style="color: rgb(153, 153, 153);">112</li><li style="color: rgb(153, 153, 153);">113</li><li style="color: rgb(153, 153, 153);">114</li><li style="color: rgb(153, 153, 153);">115</li><li style="color: rgb(153, 153, 153);">116</li><li style="color: rgb(153, 153, 153);">117</li><li style="color: rgb(153, 153, 153);">118</li><li style="color: rgb(153, 153, 153);">119</li><li style="color: rgb(153, 153, 153);">120</li><li style="color: rgb(153, 153, 153);">121</li><li style="color: rgb(153, 153, 153);">122</li><li style="color: rgb(153, 153, 153);">123</li><li style="color: rgb(153, 153, 153);">124</li><li style="color: rgb(153, 153, 153);">125</li><li style="color: rgb(153, 153, 153);">126</li><li style="color: rgb(153, 153, 153);">127</li><li style="color: rgb(153, 153, 153);">128</li><li style="color: rgb(153, 153, 153);">129</li><li style="color: rgb(153, 153, 153);">130</li></ul></pre> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1120719">NodeJs实战-待办列表(3)-前端页面填充待办数据</a> <a href="/Article/Index/849667">台湾地区信用卡客户贷款违约预测</a> <a href="/Article/Index/1044478">二叉树进阶oj题</a> <a href="/Article/Index/822693">React-hooks【四】父组件通过ref获取子组件实例</a> <a href="/Article/Index/1280249">树、二叉树概念(+堆的实现)</a> <a href="/Article/Index/952772">手写一个博客平台 ~ 第七天</a> <a href="/Article/Index/1854327">用户投稿|Cursor——软件开发行业新变革</a> <a href="/Article/Index/785666">Java网络编程</a> <a href="/Article/Index/1700430">Rust 异步 trait 的实现困难</a> <a href="/Article/Index/1298056">达梦数据库如何收集统计信息？</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weiyi47/article/details/133894554 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>