jsvascript籃球夢

時間 2019-12-06

標籤 jsvascript 籃球简体版

原文原文鏈接

首先讓咱們先欣賞一下效果圖:

html文本：

<div class="box">
        <img id="imgshow" src="lanqiu/1.jpg" alt="">
        <input type="button" value="下一張" id="btnNext">
            第<span id="zeyu">1</span>張
        <input type="button" value="上一張" id="btnLaxt">
    </div>

css樣式：

body{
        margin:0;
        background:url(zeyu.jpg);
        background-size: 100%;
    }

    .box{
        width:320px;
        height:520px;
        margin:100px auto;
    }
    img{
        width:320px;
        height:480px;

    }

    input{
        width:100px;
        height: 40px;
        margin-left:20px;
    }
    
    span{
        color: #f00;
        font-size: 25px;
    }

JS:

var index=1;
    
    document.getElementById("btnNext").onclick=function(){
            if(index<19){
                index++;
            }
        document.getElementById("zeyu").innerHTML=index;
        document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
    }
    
    document.getElementById("btnLaxt").onclick=function(){
            if(index>1){
                index--;
            }
        document.getElementById("zeyu").innerHTML=index;
        document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
    }

源碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>籃球圖集</title>
    <style>
        body{
            margin:0;
            background:url(zeyu.jpg);
            background-size: 100%;
        }

        .box{
            width:320px;
            height:520px;
            margin:100px auto;
        }
        img{
            width:320px;
            height:480px;

        }

        input{
            width:100px;
            height: 40px;
            margin-left:20px;
        }
        
        span{
            color: #f00;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img id="imgshow" src="lanqiu/1.jpg" alt="">
        <input type="button" value="下一張" id="btnNext">
            第<span id="zeyu">1</span>張
        <input type="button" value="上一張" id="btnLaxt">
    </div>

    <script>
        var index=1;
        
        document.getElementById("btnNext").onclick=function(){
                if(index<19){
                    index++;
                }
            document.getElementById("zeyu").innerHTML=index;
            document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
        }
        
        document.getElementById("btnLaxt").onclick=function(){
                if(index>1){
                    index--;
                }
            document.getElementById("zeyu").innerHTML=index;
            document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
        }
    
    
    </script>
</body>
</html>

持續更新，歡迎你們指教！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。