两个图标交互按钮代码

两个图标交互按钮代码
 

下面是一个创建两个图标按钮的示例代码。这两个按钮分别代表“播放”和“暂停”,并且它们的图标会相应地变化。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交互式图标按钮</title>
<style>
/* CSS部分将放在这里 */
</style>
</head>
<body>

<!-- 播放按钮 -->
<button id="playBtn" onclick="togglePlay()">
    <img id="playIcon" src="path/to/play_icon.png" alt="Play">
</button>

<!-- 暂停按钮 -->
<button id="pauseBtn" onclick="togglePlay()">
    <img id="pauseIcon" src="path/to/pause_icon.png" alt="Pause">
</button>

<script>
// JavaScript部分将放在这里
</script>

</body>
</html>

CSS样式

#playBtn, #pauseBtn {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    margin: 5px;
}

#playIcon, #pauseIcon {
    width: 20px;
    height: 20px;
}

JavaScript交互逻辑

// 初始化状态变量
let isPlaying = false;

function togglePlay() {
    // 切换播放状态
    isPlaying = !isPlaying;
    
    // 根据当前状态切换图标
    if (isPlaying) {
        document.getElementById('playIcon').src = "path/to/pause_icon.png";
        document.getElementById('pauseBtn').style.display = "block";
        document.getElementById('playBtn').style.display = "none";
    } else {
        document.getElementById('pauseIcon').src = "path/to/play_icon.png";
        document.getElementById('pauseBtn').style.display = "none";
        document.getElementById('playBtn').style.display = "block";
    }
}

// 初始化按钮状态
document.getElementById('playBtn').style.display = "block";
document.getElementById('pauseBtn').style.display = "none";

在这个示例中,我们有两个按钮,分别用于播放和暂停。点击任意一个按钮都会调用togglePlay函数,该函数会切换当前的播放状态,并根据状态更新按钮的图标和显示状态。确保将"path/to/play_icon.png""path/to/pause_icon.png"替换为你实际的图标文件路径。

温馨提示:本文最后更新于2024-05-12 21:20:15,某些文章具有时效性,若有错误或已失效,请在下方留言
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容