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 = 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&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>