JavaScript古诗十首翻页

最新推荐文章于 2024-03-12 15:26:15 发布

东子Yang

最新推荐文章于 2024-03-12 15:26:15 发布

阅读量517

点赞数 1

本文链接：https://blog.csdn.net/weixin_43347473/article/details/89303373

版权

JavaScript古诗十首翻页

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>翻页程序</title>
        <style>
            .STYLE1{
                font-size: xx-large;
            }
            body{
                background-color: #FFCC00;
            }
        </style>
        <script language="JavaScript">
            var chapter =new Array(10);
            var p=0;
            for(i=0;i<chapter.length;i++){
                chapter[i]=i;
            }
            function Link(str) {
                switch(str){
                    case 1:
                        document.getElementById("p").src="chapter/1.txt";
                        p=0;
                        break;
                    case 2:
                        if(p!=0){
                            p--;
                        }
                        else{
                            alert("当前已经是第一篇了");
                            break;
                        }
                        document.getElementById("p").src="chapter/"+(chapter[p]+1)+".txt";
                        document.pic.src="chapter/"+(chapter[p]+1)+".jpg";
                        break;
                    case 3:
                        if(p<chapter.length-1){
                            p++;
                        }
                        else{
                            alert("已经到了最后一篇");
                            break;
                        }
                        document.getElementById("p").src="chapter/"+(chapter[p]+1)+".txt";
                        document.pic.src="chapter/"+(chapter[p]+1)+".jpg";
                        break;
                    case 4:
                        document.getElementById("p").src="chapter/"+(chapter.length)+".txt";
                        document.pic.src="chapter/"+(chapter.length)+".jpg";
                        p=9;
                        break;
                }
            }




        </script>
    </head>
    <body>
    <div>
        <table width="760" border="0" cellpadding="0" cellspacing="0"align="center">
            <tr>
                <td colspan="4" align="center"><span class="STYLE1">古诗十首</span></td>
            </tr>
            <tr>
                <td height="310" colspan="4" valign="top">
                    <div align="center" id="wz">
                        <iframe src="chapter/1.txt"id="p" name="p" height="300"width="400">

                        </iframe>
                    </div>

                </td>
                <td height="310" colspan="4" valign="top">
                    <div>
                        <img name="pic"src="chapter/1.jpg" width="300" height="300">
                    </div>

                </td>
            </tr>
            <tr>
                <td>
                    <div align="center" "Link(1)">第一篇</div>
                </td>
                <td>
                    <div align="center" "Link(2)">上一篇</div>
                </td>
                <td>
                    <div align="center" "Link(3)">下一篇</div>
                </td>
                <td>
                    <div align="center" "Link(4)">最后一篇</div>
                </td>


            </tr>
        </table>
    </div>
    </body>
</html>

发发发
在当前目录下创建chapter，把图片和.txt文件放进去
在这里插入图片描述

东子Yang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript古诗十首翻页

JavaScript古诗十首翻页<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>翻页程序</title> <style> .STYLE1{ ...
复制链接

扫一扫