JS 创建相册替换相册

最新推荐文章于 2023-04-27 15:03:39 发布

心如止静

最新推荐文章于 2023-04-27 15:03:39 发布

阅读量557

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qhx556/article/details/8810633

本文介绍了一个使用HTML、JavaScript和CSS实现的简单图片相册应用。该应用能够动态创建包含图片的表格布局，并提供了替换相册的功能。通过数组存储图片路径，利用DOM操作完成图片展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="替换图片.aspx.cs" Inherits="WebLocation.替换图片" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    Image
    {
        width:100px;
        height:100px;
        }
    </style>
    <script type="text/javascript">
        function createimgs() {
            var array = ['1.jpg',
            '2.jpg',
            '3.jpg',
            '4.jpg',
            '5.jpg',
            '6.jpg',
            '7.jpg',
            '8.jpg',
            '9.jpg',
            '10.jpg',
            '11.jpg',
            '12.jpg',
            '13.jpg',
            '14.jpg',
            '15.jpg'
            ];
            //alert(array.length);
            var tablenode = document.createElement('table');
            var tbody = document.createElement('tbody');
            tablenode.setAttribute('width', '600px');
            tablenode.setAttribute('height', '400px');
            tablenode.setAttribute('border', '2px');
            var count = 0;
            for (var i = 0; i < 3; i++) {
                var trnode = document.createElement('tr');
                for (var j = 0; j < 5; j++) {
                    var tdnode = document.createElement('td');
                    var imgnode = document.createElement('img');
                    imgnode.setAttribute('src', 'scenery/' + array[count]);
                    //                    imgnode.setAttribute('width', '100px');
                    //                    imgnode.setAttribute('height', '100px');
                    tdnode.appendChild(imgnode);
                    trnode.appendChild(tdnode);
                    count++;
                }
                tbody.appendChild(trnode);
            }
            tablenode.appendChild(tbody);
            document.body.appendChild(tablenode);
        }

//        function Replaceimgs() {
//            var pnode = document.createElement('table');
//            获取要替换的table节点

//            var oldnode = document.getElementsByTagName('table')[1][3];
//            var a=<img src="images/02.jpg" />;
//            oldnode.parentNode.replaceChild(a, oldnode); //通用的

    </script>
</head>
<body>
   <input id="Button1" type="button" value="创建相册" onclick="createimgs();" />
   <input id="Button2" type="button" value="替换相册" onclick="Replaceimgs();" />
</body>
</html>