1 Star 0 Fork 0

张卓立 / 给帅哥的生日礼物

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 3.67 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
张卓立 提交于 2021-12-05 13:11 . update index.html.
<!--
* @Author: your name
* @Date: 2021-04-14 13:39:56
* @LastEditTime: 2021-04-16 10:10:49
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \TweenMax蓝色梦幻海洋网页特效\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>给帅哥的生日礼物</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style0.css" />
</head>
<body>
<!-- 荧光S -->
<div class="container">
<!-- 打字 -->
<div class="typing">
<!-- 字幕 -->
<h2 class="header-sub-title" id="word"></h2>
<h2 class="header-sub-title blink">|</h2>
</div>
<audio controls autoplay><source src="mp3/生日快乐_(钢琴版)-纯音乐-77028155.mp3" /></audio>
<!--<audio controls autoplay><source src="mp3/生日快乐_(钢琴版)-纯音乐-77028155.mp3" /></audio>-->
<!-- 相册 -->
<div class="box">
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/index.js"></script>
<script>
/* 兼容H5 手机端 */
if (
navigator.userAgent.match(
/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
)
) {
var box = document.querySelectorAll(".box")[0];
console.log(box, "移动端");
box.style.left = "42%";
}
// --------------------打印字 S--------------------------
const words = [
"祝哥哥生日快乐~",
"天天快乐,不止生日~",
"越来越帅,前途似海,来日方长~",
"~",
"~",
"~",
];
let PPP = 0;
let timer;
// speed in ms
let deleteDelay = 3000;
let typeSpeed = 100;
let delSpeed = 50;
/* 开始编写文字 */
function typingEffect() {
console.log(i, "iiii");
console.log(words[PPP], "words[i]");
let word = words[PPP].split("");
var loopTyping = function () {
if (word.length > 0) {
document.getElementById("word").innerHTML += word.shift();
} else {
delay(function () {
deletingEffect(); // do stuff
}, deleteDelay); // end delay
// deletingEffect();
return false;
}
timer = setTimeout(loopTyping, typeSpeed);
};
loopTyping();
}
function deletingEffect() {
let word = words[PPP].split("");
var loopDeleting = function () {
if (word.length > 0) {
word.pop();
document.getElementById("word").innerHTML = word.join("");
} else {
if (words.length > PPP + 1) {
PPP++;
} else {
PPP = 0;
}
typingEffect();
return false;
}
timer = setTimeout(loopDeleting, delSpeed);
};
loopDeleting();
}
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
typingEffect();
// --------------------打印字 E--------------------------
</script>
</body>
</html>
1
https://gitee.com/lpafd/gift.git
git@gitee.com:lpafd/gift.git
lpafd
gift
给帅哥的生日礼物
master

搜索帮助

14c37bed 8189591 565d56ea 8189591