前端笔试测试题-三色块(利用js jquery vue实现自动播放)

zhenryx

已于 2024-08-16 21:21:25 修改

阅读量169

点赞数 2

文章标签： javascript 前端 html

于 2024-08-15 20:01:17 首次发布

本文链接：https://blog.csdn.net/m0_63324578/article/details/141174986

版权

1.功能介绍

(1)使用 HTML/CSS完成页面布局

(2)分别使用原生Js/jQuery/vue 完成轮播功能

2.评分标准

(1)页面布局

首页
1)水平垂直居中(10)
2)每个入口鼠标 hover动画(10)

功能页
整体布局(10)
3)右上方返回首页按钮(10)
4)外层框水平垂直居中(5)
5)名称垂直居中，左侧有一定边距，hover时显示箭头(5)

3.页面功能(50)

右侧方框轮播(20)

鼠标 hover 左侧名字停止轮播(10)

鼠标移开左侧名字继续轮播(10)

代码逻辑(10)

global.css文件我放在后面了

首页:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
    <SCript>
        function gotoPage(url) {
    window.location.href = url;
    }
    </SCript>
</head>

<body>
    <div class="mock">
        <button class="mock1" onclick="gotoPage('JS.html')"><span>原生JS</span></button>
        <button class="mock2" onclick="gotoPage('JQuery.html')">JQuery</button>
        <button class="mock3" onclick="gotoPage('Vue.html')">Vue</button >
    </div>
</body>
<style>
    .mock {
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .mock1,
    .mock2,
    .mock3 {
        width: 100px;
        height: 50px;
        border-radius: 5px;
        margin: 10px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        transition: all .5s;

    }
    .mock1 {
        background-color: rgb(232, 199, 53);
    }
    .mock2 {
        background-color: rgb(114, 159, 247);
    }

    .mock3 {
        background-color: rgb(127, 193, 136);
    }
    .mock1:hover,.mock2:hover,.mock3:hover {
    width: 105px;
    height: 55px;
}
</style>

</html>

功能页

1.利用vue实现

<template>
    <div class="box">
        <div class="leftMenu">
            <ul>
                <li v-for="(item, index) in menuList" :key="index" @mouseenter="stopUpdate(index)" @mouseleave="updateContent()">{{ item.name }} </li>
            </ul>
        </div>
        <div class="content">
            <span>{{ currenContent.name }}</span>
            <div class="footer"><span  class="num" v-for="(item, index) in menuList" :key="index" @mouseenter="stopUpdate(index)" @mouseleave="updateContent()" :class="{'active':currentIndex===index}">{{ item.id }}</span></div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
let timer:any;
let currentIndex=ref(0)
let spanColor=ref('blue')
const menuList = [
    { id: 1, name: 'sam' },
    { id: 2, name: 'monika' },
    { id: 3, name: 'lucy' },
    { id: 4, name: 'xx' },
]
let currenContent=ref(menuList[currentIndex.value])
const autoIndex=()=>{
    currentIndex.value=(currentIndex.value + 1)%menuList.length
}
const updateContent=()=>{
    timer=setInterval(()=>{
        autoIndex()
        currenContent.value=menuList[currentIndex.value]
    },1000)
}
const stopUpdate=(index:number)=>{
    //调用 clearInterval 停止轮播
    clearInterval(timer);
    currentIndex.value=index
    currenContent.value=menuList[currentIndex.value]
}
const changbk=()=>{

}
updateContent()
</script>

</style>

2.利用js实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS</title>
  <link rel="stylesheet" href="global.css">
</head>

<body>
  <div id="app">
    <h1 style="font-size: 20px;">原生 JS 实现方法</h1>
    <div class="slideShow">
      <div class="asideMenu">
        <ul type="none" id="menuList">
          <li>Sam<span class="arrow">></span></li>
          <li>Monika<span class="arrow">></span></li>
          <li>Jack<span class="arrow">></span></li>
          <li>Rose<span class="arrow">></span></li>
        </ul>
      </div>
      <div class="content">
        <span id="slideshowName"></span>
      </div>
    </div>
    <button class="back" onclick="toHome()">
      <span class="leftA"><</span><span class="msg">返回首页</span>
    </button>
  </div>
</body>

<script>
    let currentIndex=0;
    let timer
    const arrows = document.querySelectorAll('.arrow');
    const menuItems=document.getElementsByTagName('li');
    const slideshowNameElement=document.getElementById('slideshowName')
    arrows.forEach(arrow => arrow.style.display = 'none');
    function renderMenuList(){
    for(let i=0;i<menuItems.length;i++){
    menuItems[i].addEventListener('mouseenter',function(){
        stopslideshow(i)
        arrows[i].style.display = 'inline';
    })
    menuItems[i].addEventListener('mouseleave',function(){
        beginSlideShow()
        arrows[i].style.display = 'none';
    })
 }
}
function updateIndex(){
    currentIndex=(currentIndex+1)%menuItems.length
}
function beginSlideShow(){
    timer=setInterval(() => {
        updateIndex()
        slideshowNameElement.innerHTML=menuItems[currentIndex].innerHTML
    }, 1000);
}
function stopslideshow(index){
    clearInterval(timer)
    currentIndex=index
    slideshowNameElement.innerHTML=menuItems[currentIndex].innerHTML
}
renderMenuList()
beginSlideShow()
</script>

<style>

.arrow {
    display: none;
  }
</style>

</html>

//global.css
  * {
    padding: 0px;
    margin: 0px;
    border: none;
  }

.back {
    color: white;
    background-color: rgb(127, 193, 136);
    border-radius: 10px 0px 0px 10px;
    height: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: fixed;
    right: 0px;
    top: 50px;
  }

.leftA {
    margin: 0px 10px;
  }

.msg {
    display: none;
  }

.back:hover {
    width: 100px;
  }

.back:hover .msg {
    display: block;
  }

.slideShow,
.asideMenu,
.content {
    border: 1px solid rgb(157, 155, 155);
  }

.asideMenu,
.content {
    margin: 30px;
  }

.slideShow {
    width: 800px;
    height: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.asideMenu {
    width: 200px;
    height: 400px;
    position: relative;
  }

.asideMenu ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
  }

.asideMenu li {
    display: block;
    height: 30px;
    width: 200px;
    margin: 40px 0px;
    position: relative;
    transition: all 0.3s;
  }

.asideMenu li>span {
    position: absolute;
    left: 100px
  }

.asideMenu li:hover {
    font-size: 20px;
    font-weight: bold;

  }

.asideMenu li::after {
    content: "";
    height: 1px;
    width: 125px;
    background-color: #8b8987;
    display: block;
    position: absolute;
    bottom: -15px;
  }

.content {
    width: 500px;
    height: 400px;
    position: relative;
  }

.content span {
    font-size: 100px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }