用javascript根据图片做效果_javascript 图片效果-CSDN博客

本文链接：https://blog.csdn.net/qq_38722696/article/details/109519374

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   *{
        margin: auto;
        padding: 0;
        text-align: center;
    }

h2{
    display: inline-block;
    margin: 10px;
}
button{
    cursor: pointer;
}

</style>
<body>
    <h2>搜狐</h2> 
    <button>改变层内容</button>
    <br>
    <input type="text" value="春">
    <input type="text" value="夏">
    <input type="text" value="秋">
    <input type="text" value="冬">
    <br>
    <button>显示Input内容</button>
    <button>显示season内容</button>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
    var h=document.querySelector("h2")
    var btn=document.querySelectorAll('button')
    var p1=document.querySelectorAll('p')
    var text1=document.querySelectorAll('input')
    var li=document.querySelectorAll('li')
    btn[0].onclick=function(){
        h.innerHTML="新浪"
}
    btn[1].onclick=function(){
        li[0].innerHTML=p1[0].innerHTML
        li[1].innerHTML=text1[0].value
        li[2].innerHTML=text1[1].value
        li[3].innerHTML=text1[2].value
        li[4].innerHTML=text1[3].value
        li[5].innerHTML=p1[1].innerHTML
        li[6].innerHTML=p1[2].innerHTML
}
btn[2].onclick=function(){
    li[0].innerHTML=''
    li[1].innerHTML=text1[0].value
    li[2].innerHTML=text1[1].value
    li[3].innerHTML=text1[2].value
    li[4].innerHTML=text1[3].value
    li[5].innerHTML=''
    li[6].innerHTML=''
}
    </script>
  
</body>
</html>