前一段时间小脑抽 想在博客首页搞一个输出 崩坏星穹铁道的名词（（
所以写了一个JavaScript 的打字机
JavaScript版本
实时效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dmy-dzj {
color: #d65858;
}
.dmy-dzj {
box-sizing: border-box;
padding: 1rem;
font-size: 1.2rem;
}
/* 光标 */
.dmy-dzj::after {
content: '|';
animation: writing .6s infinite;
}
/* 光标动画 */
@keyframes writing {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div>
<p class="dmy-dzj promote-sub-title line-one">
人类从不掩饰掌控星空的欲望
</p>
</div>
<script>
const oneLiners = [
"人类从不掩饰掌控星空的欲望",
"月亮代表我的心",
"星辰大海，永不止步",
"梦想是远方的星光，照亮前行的路",
];
const writeSpeed = 160;
const delSpeed = 100;
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
const text = document.querySelector('.dmy-dzj');
let randomOneLiner = '';
let idx = 0;
function chooseRandomOneLiner() {
randomOneLiner = oneLiners[Math.floor(Math.random() * oneLiners.length)];
}
async function typingEffect() {
chooseRandomOneLiner();
text.innerHTML = '';
while (idx < randomOneLiner.length) {
text.innerHTML += randomOneLiner[idx++];
await delay(writeSpeed);
}
await delay(1000);
while (idx >= 0) {
text.innerHTML = randomOneLiner.substring(0, idx--);
await delay(delSpeed);
}
idx = 0;
await delay(1000);
typingEffect();
}
typingEffect();
</script>
</body>
</html>emm最近学了Vue想到用Vue复刻一个打字机效果
Vue版本
当前首页使用的就是这个
实时效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Typing Effect</title>
<style>
/* 打字机文本内容 */
.dmy-dzj {
color: #fff;
/* mix-blend-mode: difference; */
}
/* 打字机文本内容 */
.dmy-dzj {
box-sizing: border-box;
/* max-width: 700px; */
padding: 1rem;
font-size: 1.2rem;
}
/* 光标 */
/* 在文本内容的最后通过添加行内元素以达到光标跟随文字的输入移动的效果 */
.dmy-dzj::after {
content: '|';
animation: writing .6s infinite;
}
/* 光标动画 */
@keyframes writing {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body style="background: pink;">
<div id="app">
<p class="dmy-dzj">{{ displayedText }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
oneLiners: [
"假设思想总是先于语言，则没有词句能定义这份喜悦。",
"我来押注、我来博弈、我来赢取。 我任命运拨转轮盘，孤注一掷。遍历死地而后生。",
"星辰大海，永不止步",
"梦想是远方的星光，照亮前行的路",
"所谓的不可能之事，只是尚未到来之事。",
],
displayedText: '',
currentPhraseIndex: 0,
idx: 0,
writeSpeed: 160,
delSpeed: 100,
writeTimer: null,
delTimer: null,
};
},
mounted() {
this.startWriting();
},
methods: {
startWriting() {
this.writeTimer = setInterval(this.writing, this.writeSpeed);
},
writing() {
const currentPhrase = this.oneLiners[this.currentPhraseIndex];
this.displayedText += currentPhrase[this.idx++];
if (this.idx >= currentPhrase.length) {
clearInterval(this.writeTimer);
setTimeout(() => {
this.delTimer = setInterval(this.deleting, this.delSpeed);
}, 2000);
}
},
deleting() {
const currentPhrase = this.oneLiners[this.currentPhraseIndex];
this.displayedText = currentPhrase.substring(0, this.idx--);
if (this.idx < 0) {
clearInterval(this.delTimer);
this.idx = 0;
this.currentPhraseIndex = (this.currentPhraseIndex + 1) % this.oneLiners.length;
setTimeout(() => {
this.startWriting();
}, 1000);
}
}
}
});
</script>
</body>
</html>两个大同小异（（（