玩转HTML（002）

最新推荐文章于 2023-01-17 23:35:51 发布

大笨钟47

最新推荐文章于 2023-01-17 23:35:51 发布

阅读量135

点赞数

分类专栏： HTML（学习）

本文链接：https://blog.csdn.net/qq_45033722/article/details/103543342

版权

HTML（学习）专栏收录该内容

4 篇文章 0 订阅

订阅专栏

关于网页动态替换（简单）

今天小编尝试着写了一个关于网页动态修改图片的代码，略微麻烦，但是确实很简单。

首先，我想要做的是就是点击网页中的修改按钮，然后下放的图片就会按照某个顺序及逆行自动的替换（相当于一个死循环），不过，我觉得死循环太浪费内存空间了。

所以我在 script 内部定义了一个全局变量，用来表示点击得次数，小编总共放上去了 4 张土拍你，所以小编通过点击次数对于 4 得余数当作索引，进行相应得图片得选择和替换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环学习</title>
    <style>
        button{
            background-color: cornflowerblue;
            font-style: oblique;
            font-family: 宋体;
            font-size: 20px;

        }
        div{
            background-image: url("../image/美女3.jpg");
            border: double 5px blueviolet;
            width: 500px;
            height: 500px;
            background-position: center;
        }
        span{
            font-size: 30px;
            color: cadetblue;
            font-family: Bahnschrift;
        }
    </style>
</head>
<body>
<span>点击按钮，更换图片</span>
<button id="btn">修改</button>
<div id="div">

</div>
<script>
    var a=0;
    var c=['git.jpg','孙悟空.jpg','美女.jpeg','美女2.jpeg', '美女3.jpg'];
   var btn = document.getElementById('btn');
   var div = document.getElementById('div')
   btn.onmouseenter = function () {
       btn.style.backgroundColor = 'aquamarine';
       btn.style.fontSize = '30px';
   }
   btn.onmouseleave = function () {
       btn.style.backgroundColor = 'cornflowerblue';
       btn.style.fontSize = '20px';
   }
   btn.onclick = function () {
    var b;
    b = a % 4;
    a++;
    var d = 'url("../image/ ")';
    var e;
    e = d.replace(' ', c[b]);
    div.style.backgroundImage = e;
   }
</script>
</body>
</html>

在这里插入图片描述

大笨钟47

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
玩转HTML（002）

关于网页动态替换（简单）今天小编尝试着写了一个关于网页动态修改图片的代码，略微麻烦，但是确实很简单。首先，我想要做的是就是点击网页中的修改按钮，然后下放的图片就会按照某个顺序及逆行自动的替换（相当于一个死循环），不过，我觉得死循环太浪费内存空间了。所以我在 script 内部定义了一个全局变量，用来表示点击得次数，小编总共放上去了 4 张土拍你，所以小编通过点...
复制链接

扫一扫