vue相关的2个综合案例，网页打字练习

for循环的应用

/* 1. 用for循环控制台打印0到100 */
for (var i = 0; i <= 100; i++) {console.log(i)
}
/* 2. 用for循环控制台打印100到0 */
for (var i = 100; i >= 0; i--) {console.log(i)
}

网页打字练习案例练习

<template><div class="main"><div class="outer"><div class="score">当前分数: {{ score }}</div><div class="timer">剩余时间: {{ time }}秒</div></div><div><kbd v-for="(key, index) in currentKeys" :key="index">{{ key.toUpperCase() }}</kbd></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
const score = ref(0);
const time = ref(60);
const gameOver = ref(false);
const currentKeys = ref([]);
const words = ['hello', 'world', 'vue', 'js', 'java', 'python', 'javascript','function', 'const', 'var', 'let', 'ref', 'computed', 'watch', 'v-for', 'v-if', 'v-on','react', 'style', 'html', 'npm', 'run', 'dev', 'vim', 'C++', 'C#', '@','template', 'script', 'event', 'reactive', '114514', '520', 'bigdata', 'hadoop', 'linux','network', 'computer', 'class', 'dom', 'yarn', 'spark', 'scala', 'rust', 'golang', 'value','expression', 'statement', 'boolean', 'string', 'nan', 'undefined', 'number', 'object', 'arrary', 'typeof', 'Math', 'english', 'random', 'push', 'pop', 'map', 'filter', 'foreach','while', 'return', 'framework', 'vonneuman', 'turing', 'backend', 'frontend', 'web', '&','~', '!', '(', ')', '{', '}', '/', '?','<','>','console','log','timeout','window','document','css','vite','install','mustache','button','div','v-bind','v-show','v-else','import','mounted','export','from','node'
];const getRandomKey = () => {const randomWord = words[Math.floor(Math.random() * words.length)];currentKeys.value = randomWord.split('');
};const handleKeyPress = (event) => {if (gameOver.value) {return;}if (event.key.toLowerCase() === currentKeys.value[0].toLowerCase()) {currentKeys.value.shift();if (currentKeys.value.length === 0) {score.value++;getRandomKey();}}
};const startTimer = () => {const timer = setInterval(() => {time.value--;if (time.value === 0) {clearInterval(timer);gameOver.value = true;}}, 1000);
};onMounted(() => {getRandomKey();startTimer();window.addEventListener('keydown', handleKeyPress);
});
</script><style scoped>
.main {width: 1000px;height: 800px;
}.outer {display: flex;justify-content: space-between;align-items: center;height: 300px;font-size: 48px;margin-bottom: 60px;color: #000;/* Default text color for light mode */
}kbd {display: inline-block;padding: 0.8em 1.6em;margin-bottom: 30px;margin-left: 15px;font-size: 2em;font-family: Arial Black, sans-serif;font-weight: bold;line-height: 1.4;color: #242729;text-shadow: 0 1px white;background: linear-gradient(to top, #ddd, #eee 8%, #fff 18%, #e3e3e3);border: 1px solid #ccc;border-radius: 3px;box-shadow:0 0 0 1px #fff inset,0 1px 0 #ddd,0 2px 0 #bbb,0 2px 10px rgba(0, 0, 0, 0.2),0 10px 20px rgba(0, 0, 0, 0.2);/* Add a larger shadow to make it look more 3D */
}/* Styles for dark mode */
@media (prefers-color-scheme: dark) {.outer {color: #fff;}kbd {background-color: #555;border-color: #888;}
}
</style>

效果如下：

当敲对一个单词后就会消失一个，直到屏幕的单词都打完，会加一分，然后更新单词，再次练习。倒计时60秒，快去挑战自己的手速吧。

在这里插入图片描述

网页修饰

代码如下：

<template>
<div id="firstTop"><div id="piao"><img src="src\components\text.html\yh.png" class="moveRight"></div></div>
<body>   
<div class="background"><!-- 左侧侧边栏内容 --><div id="b1"><div class="topLeftAndRight"></div></div><!-- 中间内容填充部分  --><div id="b2"><div id="hang1"><iframe :src="externalHtmlUrl"></iframe></div><div id="hang15"></div><div class="hang2"><div id="contain"><div id="leftDoor"></div><div id="rightDoor"></div></div> <div id="left"></div><div id="right"></div></div><div id="hang3"><div id="jieguo"><div class="outer">当前分数：{{ score }}</div><div class="timer">剩余时间: {{ time }}秒</div> </div><div :class="{'time': atime}"><img src="src\components\text.html\time.png" ></div><div class="neirong"><div :class="{'color1': aColor1}"><span v-for="(key, index) in currentKeys" :key="index">{{ key.toUpperCase() }}</span></div><div :class="{'color2': aColor2}"><span v-for="(key, index) in currentKeys2" :key="index">{{ key.toUpperCase() }}</span></div><div :class="{'color3': aColor3}"><span v-for="(key, index) in currentKeys3" :key="index">{{ key.toUpperCase() }}</span></div><div :class="{'color4': aColor4}"><span v-for="(key, index) in currentKeys4" :key="index">{{ key.toUpperCase() }}</span></div></div><div class="overAgainGame"><button @click="overAgin">{{ start }}</button></div></div></div><!-- 右边栏的内容 --><div id="b3"><div class="topLeftAndRight"></div></div>
</div>
</body>
</template><script>export default {data () {return {externalHtmlUrl: './src/components/text.html/cs.html' // 外部HTML文件的链接地址}}}
</script>
<script setup>
import { ref, onMounted } from 'vue';const score = ref(0);const time = ref(60);const gameOver = ref(false);const start = ref("开始游戏")const currentKeys = ref([]);const currentKeys2 = ref([]);const currentKeys3 = ref([]);const currentKeys4 = ref([]);const words = ['hello', 'world', 'vue', 'js', 'java', 'python', 'javascript','function', 'const', 'var', 'let', 'ref', 'computed', 'watch', 'v-for', 'v-if', 'v-on','react', 'style', 'html', 'npm', 'run', 'dev', 'vim', 'C++', 'C#', '@',];const getRandomKey = () => {const randomWord = words[Math.floor(Math.random() * words.length)];currentKeys.value = randomWord.split(',');};const getRandomKey2 = () => {const randomWord = words[Math.floor(Math.random() * words.length)];currentKeys2.value = randomWord.split(',');};const getRandomKey3 = () => {const randomWord = words[Math.floor(Math.random() * words.length)];currentKeys3.value = randomWord.split(',');};const getRandomKey4 = () => {const randomWord = words[Math.floor(Math.random() * words.length)];currentKeys4.value = randomWord.split(',');};const handleKeyPress = (event) => {const key = event.key;const wordPress = ref([])wordPress.value = keyconsole.log(key)// 如果是删除键，则删除词汇的最后一个字符if (key === 'Backspace') {inputWord = inputWord.slice(0, -1);} else if (key === ' ') { // 如果是空格，则输出整个词汇并清空inputWord = '';} else if (key === 'Shift'){inputWord.replace('Shift', '')}else {inputWord += key; // 否则，将按键字符添加到词汇中if (inputWord.length > 0) {console.log('Input word:', inputWord);if (gameOver.value) {return;}if (inputWord.toLowerCase() === currentKeys.value[0].toLowerCase() || inputWord.toLowerCase() === currentKeys2.value[0].toLowerCase() || inputWord.toLowerCase() === currentKeys3.value[0].toLowerCase()|| inputWord.toLowerCase() === currentKeys4.value[0].toLowerCase()) {currentKeys.value.pop();if (currentKeys.value.length === 0) {score.value++;inputWord = '';getRandomKey();getRandomKey2();getRandomKey3();getRandomKey4();}}}aColor1.value = ref(false);aColor2.value = ref(false);aColor3.value = ref(false);aColor4.value = ref(false);}}const aColor1 = ref(false);const aColor2 = ref(false);const aColor3 = ref(false);const aColor4 = ref(false);const sumList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]function toChangeColor() {const items = ref([]);let loopIndex = 0;const intervalDuration = 3000; // 每次循环的间隔时间（毫秒）const maxItems = 19; // 循环的最大次数for (let i = 0; i <= maxItems; i++) {setTimeout(() => {var chooseSum = sumList[Math.floor(Math.random() * maxItems)]console.log(chooseSum)if (chooseSum >= 0 && chooseSum <=4) {aColor1.value = !aColor1.valueaColor2.value = ref(true);aColor3.value = ref(true);aColor4.value = ref(true);}else if (chooseSum >= 5 && chooseSum <=9){aColor2.value = !aColor2.valueaColor1.value = ref(true);aColor3.value = ref(true);aColor4.value = ref(true);}else if (chooseSum >= 10 && chooseSum <=14){aColor3.value = !aColor3.valueaColor2.value = ref(true);aColor1.value = ref(true);aColor4.value = ref(true);}else if (chooseSum >= 15 && chooseSum <=20){aColor4.value = !aColor4.valueaColor2.value = ref(true);aColor3.value = ref(true);aColor1.value = ref(true);}else {aColor1.value = ref(true);aColor2.value = ref(true);aColor3.value = ref(true);aColor4.value = ref(true);}items.value.push(`Item ${loopIndex++}`);}, i * intervalDuration);}}const atime = ref(false)const startTimer = () => {const timer = setInterval(() => {time.value--;start.value = '重新开始'if (time.value === 0) {atime.value = falseclearInterval(timer);gameOver.value = true;clearInterval(toChangeColor)aColor1.value = ref(false);aColor2.value = ref(false);aColor3.value = ref(false);aColor4.value = ref(false);start.value = '开始游戏'}else{atime.value = true}}, 1000);};let inputWord = '';function overAgin(){window.location.reload();timePass ()if (time === 0) {aColor1.value = ref(false);aColor2.value = ref(false);aColor3.value = ref(false);aColor4.value = ref(false);}}onMounted(() => {getRandomKey();getRandomKey2();getRandomKey3();getRandomKey4();startTimer();toChangeColor();window.addEventListener('keydown', handleKeyPress);});</script><style scoped>
body{margin: 0;padding: 0;
}
.background{display: flex;}
#firstTop{width: 1420px;height: 100px;background-color: aqua;background-image: url("https://img.pptjia.com/image/20181121/9e19f6fef989b1db9c1aa40417860c49.png");background-size: cover;background-repeat: no-repeat;}
#moveRight{width: 150px; /* 设置图片宽度 */height: 80px;animation: moveRight 2s infinite; /* 应用动画 */
}
#piao{margin-left: 0px;animation: moveRight 2s infinite; /* 应用动画 */
}
@keyframes moveRight {0% {margin-left: -1200px; /* 动画开始时位置 */}100% {margin-left: 1300px; /* 动画结束时位置，这里是向右移动100px */}
}
/* 写左侧栏的样式 */
#b1{width: 300px;height: 1600px;border: 1px black;background-color: aqua;background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201505%2F15%2F20150515203203_AihvS.thumb.400_0.gif&amp;refer=http%3A%2F%2Fc-ssl.duitang.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1719239956&amp;t=5afb6cc097c9e071ca893956158847b6");
}
.topLeftAndRight{background-image: url("https://img.pptjia.com/image/20181121/9e19f6fef989b1db9c1aa40417860c49.png");width: 300px;height: 100px;background-size: cover;float: left;
}
#b2{width: 820px;
height: 1600px;
border: 1px black;
background-color: white;}/* 中间上边栏 */
#top{background-image: url("./src/assets/yun1.jpg");background-repeat: no-repeat;background-size: cover;width: 820px;height: 400px;}
#logo{width: 500px;height: 240px;padding-top: 120px;margin-left: 160px;background-image: url("./src/assets/logo.png");background-repeat: no-repeat;background-position: center;}#hang1{width: 800px;height: 500px;border: 0px;
}
iframe {border: 0;width: 100%; /* takes precedence over the width set with the HTML width attribute */height: 100%;
}#hang15{width: 820px;height: 160px;background-color: blue;margin-top: 30px;background-image: url("./src/assets/tou1.png");background-size: 820px 160px;}
#contain {width: 410px;height: 310px;position: absolute;background-image: url("./src/assets/gz1.png");background-size: 410px 310px;perspective: 800px;transform-style: preserve-3d;margin-left: 410px;margin-top: 155px;transform: translateY(-50%) translateX(-50%);cursor: pointer;}#leftDoor {position: absolute;width: 50%;height: 100%;top: 0;left: 0;transition: .5s;background-image: url("./src/assets/hqq2.png");background-size: cover;backface-visibility: visible;transform-origin: left;/* 需要注意3D动画的 transform-orign 的改变 */}#rightDoor {position: absolute;width: 50%;height: 100%;right: 0;top: 0;transition: .5s;background-image: url("./src/assets/hqq3.png");background-size: cover;backface-visibility: visible;transform-origin: right;}#contain:hover #leftDoor {transform: rotateY(-120deg);}#contain:hover #rightDoor {transform: rotateY(120deg);}#leftDoor::before,#rightDoor::after {content: '';display: block;position: absolute;width: 10px;height: 10px;border-radius: 50%;border: 1px slategrey solid;top: 50%;transform: translateY(-50%);/* 当内部无元素时，两个伪元素指的是同一个 */}#leftDoor::before {right: 20px;}#rightDoor::after {left: 20px;}
#left{width: 212px;height: 310px;background-color: aqua;background-image: url("./src/assets/hqq1.png");background-size: 210px 310px;background-repeat: no-repeat;
}
#right{width: 210px;height: 310px;background-color: aqua;margin-left: 610px;margin-top: -312px;background-image: url("./src/assets/hqq4.png");background-size: 212px 310px;background-repeat: no-repeat;
}
#hang3{width: 820px;height: 600px;background-color: bisque;
}
#jieguo{width: 820px;height: 60px;background-color: aqua;}
.time{width: 80px;height: 80px;animation: moveRight2 60s infinite; /* 应用动画 */
}@keyframes moveRight2 {0% {margin-left: 790px; /* 动画开始时位置 */}100% {margin-left: -60px; /* 动画结束时位置，这里是向右移动100px */}
}/* 单词的样式 */span {display: inline-block;padding: 1.8em 2.6em;margin-bottom: 30px;margin-left: 15px;font-size: 15px;font-family: Arial Black, sans-serif;font-weight: 0px;line-height: 1.2;color: rgb(36, 41, 39);/* background: linear-gradient(to top, #ddd, #eee 8%, #fff 18%, #e3e3e3); */border-radius: 3px;box-shadow:0 2px 10px rgba(0, 0, 0, 0.2),0 10px 20px rgba(0, 0, 0, 0.2);/* Add a larger shadow to make it look more 3D */}.neirong{display: flex;margin-left: -6px;margin-top: 100px;height: 500px;
}/* 开始游戏按钮的样式 */
.overAgainGame{margin-top: -200px;
}button {--bg: #e74c3c;--text-color: #fff;position: relative;width: 200px;height: 80px;border: none;background: var(--bg);color: var(--text-color);padding: 1em;font-size: 30px;font-weight: bold;text-transform: uppercase;transition: 0.2s;border-radius: 5px;opacity: 0.8;letter-spacing: 1px;box-shadow: #c0392b 0px 7px 2px, #000 0px 8px 5px;padding-top: 20px;margin-top: -220px;}button:hover {opacity: 1;}button:active {top: 4px;box-shadow: #c0392b 0px 3px 2px,#000 0px 3px 5px;} /* 覆盖物 */.color1{width: 500px;float: left;margin-left: 10px;background-image:url("https://gd-hbimg.huaban.com/f7edc6d1befd31a5ff3facac33fda064c710b73342fff-V45epE_fw658"); /* 红色背景 */transition: background-color 0s ease; /* 背景色变化的过渡效果 */background-repeat: no-repeat;background-size: 100%;}  .color2 {width: 500px;float: left;margin-left: 10px;background-image:url("https://gd-hbimg.huaban.com/f7edc6d1befd31a5ff3facac33fda064c710b73342fff-V45epE_fw658"); /* 红色背景 */transition: background-color 0s ease; /* 背景色变化的过渡效果 */background-repeat: no-repeat;background-size: 100%;}.bg-blink-enter-from,.bg-blink-leave-to {background-color: transparent; /* 初始/结束时的背景色 */}.bg-blink-enter-active,.bg-blink-leave-active {transition: background-color 0s ease; /* 过渡效果 */}.color3{width: 500px;float: left;margin-left: 10px;background-image:url("https://gd-hbimg.huaban.com/f7edc6d1befd31a5ff3facac33fda064c710b73342fff-V45epE_fw658"); /* 红色背景 */transition: background-color 0s ease; /* 背景色变化的过渡效果 */background-repeat: no-repeat;background-size: 100%;}.color4{width: 500px;float: left;margin-left: 10px;background-image:url("https://gd-hbimg.huaban.com/f7edc6d1befd31a5ff3facac33fda064c710b73342fff-V45epE_fw658"); /* 红色背景 */transition: background-color 0s ease; /* 背景色变化的过渡效果 */background-repeat: no-repeat;background-size: 100%;}/* 右边栏 */
#b3{width: 300px;
height: 1600px;
border: 1px black;
background-color: red;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201505%2F15%2F20150515203203_AihvS.thumb.400_0.gif&amp;refer=http%3A%2F%2Fc-ssl.duitang.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1719239956&amp;t=5afb6cc097c9e071ca893956158847b6");
}</style>