LOVE POWER html與javaScript

時間  2019-11-11
標籤 love power html javascript 欄目 HTML 简体版
原文   原文鏈接

1.純HTML與javaScript編寫的表白動態圖

　　1.對於世界而言，你是一我的；可是對於某我的，你是他的整個世界。
　　2.不要爲那些不肯在你身上花費時間的人而浪費你的時間。
　　3.我愛你，不是由於你是一個怎樣的人，而是由於我喜歡與你在一塊兒時的感受。
　　4 沒有人值得你流淚，值得讓你這麼作的人不會讓你哭泣。
　　5.世上最遙遠的距離,不是生與死的距離,不是天各一方,而是我就站在你面前,你殊不知道我愛你。
　　6 .我愛你....爲了你的幸福，我願意放棄一切---包括你。
　　7. 愛情令人忘記時間，時間也令人忘記愛情。
　　8.曾經相遇，總賽過從未碰頭。
　　9.開始的時侯，咱們就知道，總會有終結。
　　10. 愛一我的很難，放棄本身心愛的人更難。
　　11. 你曾經不被人所愛，你纔會珍惜未來那個愛你的人。
　　12.孤單不是與生俱來，而是由你愛尚上我的的那一刻開始。
　　13.就當我是首偶爾飄過你耳畔的詩,不貫穿你的生命，卻給你一輩子祝福; 就當我是場昨日淋漓的雨，不給你永遠卻給你瞬間美麗。
　　14.愛你的人若是沒有按你所但願的方式愛你,那並不表明他們沒有全心全意地愛你.
　　15.在遇到夢好的愛情是你透過一個男人看到世界，壞的愛情是你爲了一我的捨棄整個世界
效果以下圖所示:

love

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>來自易某的寄語</title>
<link type="text/css" rel="stylesheet" href="renxi/default.css">
<script type="text/javascript" src="renxi/jquery.min.js"></script>
<script type="text/javascript" src="renxi/jscex.min.js"></script>
<script type="text/javascript" src="renxi/jscex-parser.js"></script>
<script type="text/javascript" src="renxi/jscex-jit.js"></script>
<script type="text/javascript" src="renxi/jscex-builderbase.min.js"></script>
<script type="text/javascript" src="renxi/jscex-async.min.js"></script>
<script type="text/javascript" src="renxi/jscex-async-powerpack.min.js"></script>
<script type="text/javascript" src="renxi/functions.js" charset="utf-8"></script>
<script type="text/javascript" src="renxi/love.js" charset="utf-8"></script>
<style type="text/css"> <!-- .STYLE1 { color: #666666 } --> </style>
</head>
<body>
    <h1 align="center">易生的友情提示:請點擊心形</h1>
<audio autoplay="autopaly">
  <source src="Two Steps From Hell - Victory.mp3" type="audio/mp3" />
</audio>
<div id="main">
  <div id="error">本頁面採用HTML5編輯，目前您的瀏覽器沒法顯示，請換成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)瀏覽器，或者其餘遊覽器的最新版本。</div>
  <div id="wrap">
    <div id="text">
      <div id="code"> <font color="#FF0000" size="5"> --十年寒窗苦，一朝成名耀，金榜題名日，蟾宮折桂時。<span class="say"></span><br>
        <span class="say"> --用汗水織就實力，用毅力成就夢想，用拼搏鑄就輝煌。</span><br>
        <span class="say"> --用拼搏的汗水灌注無悔的高三路。考前不怕，考後不悔</span><br>
        <span class="say"></span>--三年苦讀磨一劍，氣定神閒戰猶酣。勢如破竹搗黃龍， 千帆競發齊凱旋。<br>
        <span class="say">--在最美的年齡碰見最美的大家 </span><br>
        <span class="say">--高考加油-- </span><br>
        <span class="say"><span class="space"></span> -- 易生--</span> </font>
          <span class="say"> </span><br>
        </p>
      </div>
    </div>
    <div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00"> 認識你</font> <span class="STYLE1">已是</span>
      <div id="clock"></div>
    </div>
    <canvas id="canvas" width="1100" height="680"></canvas>
  </div>
</div>
<script>
    </script>
<script> (function(){ var canvas = $('#canvas'); if (!canvas[0].getContext) { $("#error").show(); return false; } var width = canvas.width(); var height = canvas.height(); canvas.attr("width", width); canvas.attr("height", height); var opts = { seed: { x: width / 2 - 20, color: "rgb(190, 26, 37)", scale: 2 }, branch: [ [535, 680, 570, 250, 500, 200, 30, 100, [ [540, 500, 455, 417, 340, 400, 13, 100, [ [450, 435, 434, 430, 394, 395, 2, 40] ]], [550, 445, 600, 356, 680, 345, 12, 100, [ [578, 400, 648, 409, 661, 426, 3, 80] ]], [539, 281, 537, 248, 534, 217, 3, 40], [546, 397, 413, 247, 328, 244, 9, 80, [ [427, 286, 383, 253, 371, 205, 2, 40], [498, 345, 435, 315, 395, 330, 4, 60] ]], [546, 357, 608, 252, 678, 221, 6, 100, [ [590, 293, 646, 277, 648, 271, 2, 80] ]] ]] ], bloom: { num: 700, width: 1080, height: 650, }, footer: { width: 1200, height: 5, speed: 10, } } var tree = new Tree(canvas[0], width, height, opts); var seed = tree.seed; var foot = tree.footer; var hold = 1; canvas.click(function(e) { var offset = canvas.offset(), x, y; x = e.pageX - offset.left; y = e.pageY - offset.top; if (seed.hover(x, y)) { hold = 0; canvas.unbind("click"); canvas.unbind("mousemove"); canvas.removeClass('hand'); } }).mousemove(function(e){ var offset = canvas.offset(), x, y; x = e.pageX - offset.left; y = e.pageY - offset.top; canvas.toggleClass('hand', seed.hover(x, y)); }); var seedAnimate = eval(Jscex.compile("async", function () { seed.draw(); while (hold) { $await(Jscex.Async.sleep(10)); } while (seed.canScale()) { seed.scale(0.95); $await(Jscex.Async.sleep(10)); } while (seed.canMove()) { seed.move(0, 2); foot.draw(); $await(Jscex.Async.sleep(10)); } })); var growAnimate = eval(Jscex.compile("async", function () { do { tree.grow(); $await(Jscex.Async.sleep(10)); } while (tree.canGrow()); })); var flowAnimate = eval(Jscex.compile("async", function () { do { tree.flower(2); $await(Jscex.Async.sleep(10)); } while (tree.canFlower()); })); var moveAnimate = eval(Jscex.compile("async", function () { tree.snapshot("p1", 240, 0, 610, 680); while (tree.move("p1", 500, 0)) { foot.draw(); $await(Jscex.Async.sleep(10)); } foot.draw(); tree.snapshot("p2", 500, 0, 610, 680); // 會有閃爍不得意這樣作, (＞﹏＜)
 canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")"); canvas.css("background", "#ffe"); $await(Jscex.Async.sleep(300)); canvas.css("background", "none"); })); var jumpAnimate = eval(Jscex.compile("async", function () { var ctx = tree.ctx; while (true) { tree.ctx.clearRect(0, 0, width, height); tree.jump(); foot.draw(); $await(Jscex.Async.sleep(25)); } })); var textAnimate = eval(Jscex.compile("async", function () { var together = new Date(); together.setFullYear(2013,9 , 1); //時間年月日
 together.setHours(16); //小時 
 together.setMinutes(53); //分鐘
 together.setSeconds(0); //秒前一位
 together.setMilliseconds(2); //秒第二位
 $("#code").show().typewriter(); $("#clock-box").fadeIn(500); while (true) { timeElapse(together); $await(Jscex.Async.sleep(1000)); } })); var runAsync = eval(Jscex.compile("async", function () { $await(seedAnimate()); $await(growAnimate()); $await(flowAnimate()); $await(moveAnimate()); textAnimate().start(); $await(jumpAnimate()); })); runAsync().start(); })(); </script>


</body>
</html>

CSS樣式：

body{margin:0;padding:0;background:#ffe;font-size:14px;font-family:'微軟雅黑','宋體',sans-serif;color:#231F20;overflow:auto} a {color:#000;font-size:14px;} #main{width:100%;} #wrap{position:relative;margin:0 auto;width:1100px;height:680px;margin-top:10px;} #text{width:400px;height:425px;left:60px;top:80px;position:absolute;} #code{display:none;font-size:16px;} #clock-box {position:absolute;left:60px;top:550px;font-size:28px;display:none;} #clock-box a {font-size:28px;text-decoration:none;} #clock{margin-left:48px;} #clock .digit {font-size:64px;} #canvas{margin:0 auto;width:1100px;height:680px;} #error{margin:0 auto;text-align:center;margin-top:60px;display:none;} .hand{cursor:pointer;} .say{margin-left:5px;} .space{margin-right:150px;}

 

 

javaScript代碼 love.js

(function(window){ function random(min, max) { return min + Math.floor(Math.random() * (max - min + 1)); } function bezier(cp, t) { var p1 = cp[0].mul((1 - t) * (1 - t)); var p2 = cp[1].mul(2 * t * (1 - t)); var p3 = cp[2].mul(t * t); return p1.add(p2).add(p3); } function inheart(x, y, r) { // x^2+(y-(x^2)^(1/3))^2 = 1
        // http://www.wolframalpha.com/input/?i=x%5E2%2B%28y-%28x%5E2%29%5E%281%2F3%29%29%5E2+%3D+1
        var z = ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) - (x / r) * (x / r) * (y / r) * (y / r) * (y / r); return z < 0; } Point = function(x, y) { this.x = x || 0; this.y = y || 0; } Point.prototype = { clone: function() { return new Point(this.x, this.y); }, add: function(o) { p = this.clone(); p.x += o.x; p.y += o.y; return p; }, sub: function(o) { p = this.clone(); p.x -= o.x; p.y -= o.y; return p; }, div: function(n) { p = this.clone(); p.x /= n;
            p.y /= n;
            return p; }, mul: function(n) { p = this.clone(); p.x *= n; p.y *= n; return p; } } Heart = function() { // x = 16 sin^3 t
        // y = 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t
        // http://www.wolframalpha.com/input/?i=x+%3D+16+sin%5E3+t%2C+y+%3D+(13+cos+t+-+5+cos+2t+-+2+cos+3t+-+cos+4t)
        var points = [], x, y, t; for (var i = 10; i < 30; i += 0.2) { t = i / Math.PI; x = 16 * Math.pow(Math.sin(t), 3); y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); points.push(new Point(x, y)); } this.points = points; this.length = points.length; } Heart.prototype = { get: function(i, scale) { return this.points[i].mul(scale || 1); } } Seed = function(tree, point, scale, color) { this.tree = tree; var scale = scale || 1
        var color = color || '#FF0000'; this.heart = { point : point, scale : scale, color : color, figure : new Heart(), } this.cirle = { point : point, scale : scale, color : color, radius : 5, } } Seed.prototype = { draw: function() { this.drawHeart(); this.drawText(); }, addPosition: function(x, y) { this.cirle.point = this.cirle.point.add(new Point(x, y)); }, canMove: function() { return this.cirle.point.y < (this.tree.height + 20); }, move: function(x, y) { this.clear(); this.drawCirle(); this.addPosition(x, y); }, canScale: function() { return this.heart.scale > 0.2; }, setHeartScale: function(scale) { this.heart.scale *= scale; }, scale: function(scale) { this.clear(); this.drawCirle(); this.drawHeart(); this.setHeartScale(scale); }, drawHeart: function() { var ctx = this.tree.ctx, heart = this.heart; var point = heart.point, color = heart.color, scale = heart.scale; ctx.save(); ctx.fillStyle = color; ctx.translate(point.x, point.y); ctx.beginPath(); ctx.moveTo(0, 0); for (var i = 0; i < heart.figure.length; i++) { var p = heart.figure.get(i, scale); ctx.lineTo(p.x, -p.y); } ctx.closePath(); ctx.fill(); ctx.restore(); }, drawCirle: function() { var ctx = this.tree.ctx, cirle = this.cirle; var point = cirle.point, color = cirle.color, scale = cirle.scale, radius = cirle.radius; ctx.save(); ctx.fillStyle = color; ctx.translate(point.x, point.y); ctx.scale(scale, scale); ctx.beginPath(); ctx.moveTo(0, 0); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.closePath(); ctx.fill(); ctx.restore(); }, drawText: function() { var ctx = this.tree.ctx, heart = this.heart; var point = heart.point, color = heart.color, scale = heart.scale; ctx.save(); ctx.strokeStyle = color; ctx.fillStyle = color; ctx.translate(point.x, point.y); ctx.scale(scale, scale); ctx.moveTo(0, 0); ctx.lineTo(15, 15); ctx.lineTo(60, 15); ctx.stroke(); ctx.moveTo(0, 0); ctx.scale(0.75, 0.75); ctx.font = "12px 微軟雅黑,Verdana"; // 字號腫麼沒有用? (ˉ(∞)ˉ)
            ctx.fillText("Come Baby", 23, 10); ctx.restore(); }, clear: function() { var ctx = this.tree.ctx, cirle = this.cirle; var point = cirle.point, scale = cirle.scale, radius = 26; var w = h = (radius * scale); ctx.clearRect(point.x - w, point.y - h, 4 * w, 4 * h); }, hover: function(x, y) { var ctx = this.tree.ctx; var pixel = ctx.getImageData(x, y, 1, 1); return pixel.data[3] == 255 } } Footer = function(tree, width, height, speed) { this.tree = tree; this.point = new Point(tree.seed.heart.point.x, tree.height - height / 2); this.width = width; this.height = height; this.speed = speed || 2; this.length = 0; } Footer.prototype = { draw: function() { var ctx = this.tree.ctx, point = this.point; var len = this.length / 2; ctx.save(); ctx.strokeStyle = 'rgb(35, 31, 32)'; ctx.lineWidth = this.height; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.translate(point.x, point.y); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(len, 0); ctx.lineTo(-len, 0); ctx.stroke(); ctx.restore(); if (this.length < this.width) { this.length += this.speed; } } } Tree = function(canvas, width, height, opt) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.width = width; this.height = height; this.opt = opt || {}; this.record = {}; this.initSeed(); this.initFooter(); this.initBranch(); this.initBloom(); } Tree.prototype = { initSeed: function() { var seed = this.opt.seed || {}; var x = seed.x || this.width / 2; var y = seed.y || this.height / 2; var point = new Point(x, y); var color = seed.color || '#FF0000'; var scale = seed.scale || 1; this.seed = new Seed(this, point, scale, color); }, initFooter: function() { var footer = this.opt.footer || {}; var width = footer.width || this.width; var height = footer.height || 5; var speed = footer.speed || 2; this.footer = new Footer(this, width, height, speed); }, initBranch: function() { var branchs = this.opt.branch || [] this.branchs = []; this.addBranchs(branchs); }, initBloom: function() { var bloom = this.opt.bloom || {}; var cache = [], num = bloom.num || 500, width = bloom.width || this.width, height = bloom.height || this.height, figure = this.seed.heart.figure; var r = 240, x, y; for (var i = 0; i < num; i++) { cache.push(this.createBloom(width, height, r, figure)); } this.blooms = []; this.bloomsCache = cache; }, toDataURL: function(type) { return this.canvas.toDataURL(type); }, draw: function(k) { var s = this, ctx = s.ctx; var rec = s.record[k]; if (!rec) { return ; } var point = rec.point, image = rec.image; ctx.save(); ctx.putImageData(image, point.x, point.y); ctx.restore(); }, addBranch: function(branch) { this.branchs.push(branch); }, addBranchs: function(branchs){ var s = this, b, p1, p2, p3, r, l, c; for (var i = 0; i < branchs.length; i++) { b = branchs[i]; p1 = new Point(b[0], b[1]); p2 = new Point(b[2], b[3]); p3 = new Point(b[4], b[5]); r = b[6]; l = b[7]; c = b[8] s.addBranch(new Branch(s, p1, p2, p3, r, l, c)); } }, removeBranch: function(branch) { var branchs = this.branchs; for (var i = 0; i < branchs.length; i++) { if (branchs[i] === branch) { branchs.splice(i, 1); } } }, canGrow: function() { return !!this.branchs.length; }, grow: function() { var branchs = this.branchs; for (var i = 0; i < branchs.length; i++) { var branch = branchs[i]; if (branch) { branch.grow(); } } }, addBloom: function (bloom) { this.blooms.push(bloom); }, removeBloom: function (bloom) { var blooms = this.blooms; for (var i = 0; i < blooms.length; i++) { if (blooms[i] === bloom) { blooms.splice(i, 1); } } }, createBloom: function(width, height, radius, figure, color, alpha, angle, scale, place, speed) { var x, y; while (true) { x = random(20, width - 20); y = random(20, height - 20); if (inheart(x - width / 2, height - (height - 40) / 2 - y, radius)) { return new Bloom(this, new Point(x, y), figure, color, alpha, angle, scale, place, speed); } } }, canFlower: function() { return !!this.blooms.length; }, flower: function(num) { var s = this, blooms = s.bloomsCache.splice(0, num); for (var i = 0; i < blooms.length; i++) { s.addBloom(blooms[i]); } blooms = s.blooms; for (var j = 0; j < blooms.length; j++) { blooms[j].flower(); } }, snapshot: function(k, x, y, width, height) { var ctx = this.ctx; var image = ctx.getImageData(x, y, width, height); this.record[k] = { image: image, point: new Point(x, y), width: width, height: height } }, setSpeed: function(k, speed) { this.record[k || "move"].speed = speed; }, move: function(k, x, y) { var s = this, ctx = s.ctx; var rec = s.record[k || "move"]; var point = rec.point, image = rec.image, speed = rec.speed || 10, width = rec.width, height = rec.height; i = point.x + speed < x ? point.x + speed : x; j = point.y + speed < y ? point.y + speed : y; ctx.save(); ctx.clearRect(point.x, point.y, width, height); ctx.putImageData(image, i, j); ctx.restore(); rec.point = new Point(i, j); rec.speed = speed * 0.95; if (rec.speed < 2) { rec.speed = 2; } return i < x || j < y; }, jump: function() { var s = this, blooms = s.blooms; if (blooms.length) { for (var i = 0; i < blooms.length; i++) { blooms[i].jump(); } } if ((blooms.length && blooms.length < 3) || !blooms.length) { var bloom = this.opt.bloom || {}, width = bloom.width || this.width, height = bloom.height || this.height, figure = this.seed.heart.figure; var r = 240, x, y; for (var i = 0; i < random(1,2); i++) { blooms.push(this.createBloom(width / 2 + width, height, r, figure, null, 1, null, 1, new Point(random(-100,600), 720), random(200,300))); } } } } Branch = function(tree, point1, point2, point3, radius, length, branchs) { this.tree = tree; this.point1 = point1; this.point2 = point2; this.point3 = point3; this.radius = radius; this.length = length || 100; this.len = 0; this.t = 1 / (this.length - 1); this.branchs = branchs || []; } Branch.prototype = { grow: function() { var s = this, p; if (s.len <= s.length) { p = bezier([s.point1, s.point2, s.point3], s.len * s.t); s.draw(p); s.len += 1; s.radius *= 0.97; } else { s.tree.removeBranch(s); s.tree.addBranchs(s.branchs); } }, draw: function(p) { var s = this; var ctx = s.tree.ctx; ctx.save(); ctx.beginPath(); ctx.fillStyle = 'rgb(35, 31, 32)'; ctx.shadowColor = 'rgb(35, 31, 32)'; ctx.shadowBlur = 2; ctx.moveTo(p.x, p.y); ctx.arc(p.x, p.y, s.radius, 0, 2 * Math.PI); ctx.closePath(); ctx.fill(); ctx.restore(); } } Bloom = function(tree, point, figure, color, alpha, angle, scale, place, speed) { this.tree = tree; this.point = point; this.color = color || 'rgb(255,' + random(0, 255) + ',' + random(0, 255) + ')'; this.alpha = alpha || random(0.3, 1); this.angle = angle || random(0, 360); this.scale = scale || 0.1; this.place = place; this.speed = speed; this.figure = figure; } Bloom.prototype = { setFigure: function(figure) { this.figure = figure; }, flower: function() { var s = this; s.draw(); s.scale += 0.1; if (s.scale > 1) { s.tree.removeBloom(s); } }, draw: function() { var s = this, ctx = s.tree.ctx, figure = s.figure; ctx.save(); ctx.fillStyle = s.color; ctx.globalAlpha = s.alpha; ctx.translate(s.point.x, s.point.y); ctx.scale(s.scale, s.scale); ctx.rotate(s.angle); ctx.beginPath(); ctx.moveTo(0, 0); for (var i = 0; i < figure.length; i++) { var p = figure.get(i); ctx.lineTo(p.x, -p.y); } ctx.closePath(); ctx.fill(); ctx.restore(); }, jump: function() { var s = this, height = s.tree.height; if (s.point.x < -20 || s.point.y > height + 20) { s.tree.removeBloom(s); } else { s.draw(); s.point = s.place.sub(s.point).div(s.speed).add(s.point); s.angle += 0.05; s.speed -= 1; } } } window.random = random; window.bezier = bezier; window.Point = Point; window.Tree = Tree; })(window);

 

javaScript 代碼 function.html

/* * http://love.hackerzhou.me */

// variables
var $win = $(window); var clientWidth = $win.width(); var clientHeight = $win.height(); $(window).resize(function() { var newWidth = $win.width(); var newHeight = $win.height(); if (newWidth != clientWidth && newHeight != clientHeight) { location.replace(location); } }); (function($) { $.fn.typewriter = function() { this.each(function() { var $ele = $(this), str = $ele.html(), progress = 0; $ele.html(''); var timer = setInterval(function() { var current = str.substr(progress, 1); if (current == '<') { progress = str.indexOf('>', progress) + 1; } else { progress++; } $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : '')); if (progress >= str.length) { clearInterval(timer); } }, 75); }); return this; }; })(jQuery); function timeElapse(date){ var current = Date(); var seconds = (Date.parse(current) - Date.parse(date)) / 1000; var days = Math.floor(seconds / (3600 * 24)); seconds = seconds % (3600 * 24); var hours = Math.floor(seconds / 3600); if (hours < 10) { hours = "0" + hours; } seconds = seconds % 3600; var minutes = Math.floor(seconds / 60); if (minutes < 10) { minutes = "0" + minutes; } seconds = seconds % 60; if (seconds < 10) { seconds = "0" + seconds; } var result = "第 <span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span> 小時 <span class=\"digit\">" + minutes + "</span> 分鐘 <span class=\"digit\">" + seconds + "</span> 秒"; $("#clock").html(result); }

 

 本案例還導入別的前段框架:

 

 

源碼/修改

源碼打包下載地址（CSDN）： javascript

源碼打包下載地址（Github）：php

有人說不會在github上下載，很簡單的，打開這個網站，中間右邊有個「clone and download」, 點擊」DownLoad zip」,就能把源碼一次性下載下來，github下載比較慢，若是隻須要單個，只須要把其中一個裏的文件所有下載下來就行。 若是是從github上下載的話，源碼裏有源碼裏的config.yaml和index.php都無用，是新浪自行產生的文件，能夠刪除css

若是還想在頁面裏播放音樂，直接在body標籤中加入下面這句就行， src是音樂的位置，要作表白的話，音樂最近本身剪切一下，感受直接用音樂的高潮部分好一些： <audio id="bgmMusic" src="./當我唱起這首歌.mp3" preload="auto" type="audio/mp3" autoplay="" loop="" src="></audio>html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程