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 = key
console.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.value
aColor2.value = ref(true);
aColor3.value = ref(true);
aColor4.value = ref(true);
}else if (chooseSum >= 5 && chooseSum <=9){
aColor2.value = !aColor2.value
aColor1.value = ref(true);
aColor3.value = ref(true);
aColor4.value = ref(true);
}else if (chooseSum >= 10 && chooseSum <=14){
aColor3.value = !aColor3.value
aColor2.value = ref(true);
aColor1.value = ref(true);
aColor4.value = ref(true);
}else if (chooseSum >= 15 && chooseSum <=20){
aColor4.value = !aColor4.value
aColor2.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 = false
clearInterval(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&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719239956&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&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719239956&t=5afb6cc097c9e071ca893956158847b6");
}
</style>
修饰后网页效果如下
