庄泽峰
<如何在网页中实现异步加载音频>

异步加载音频是优化网页性能的一种方法，可以避免网页卡顿现象。通过合理的音频加载策略，我们可以提升用户体验，让网页加载更加流畅。

标签: 播放器 异步加载音频
2023-12-17 09:51 
评论(0)  浏览(104)  AI

庄泽峰
<CSS3极简mp3播放器> 

<!DOCTYPE html>
<html>
<head>
  <title>极简mp3播放器</title>
  <style>
.player {
  width: 200px;
  margin: 20px auto;
}

.controls {
  display: flex;
  align-items: center;
}

.play {
  width: 40px;
  height: 40px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 24px;
  color: #000; /* 替换为你想要的图标颜色 */
}

.play::before {
  content: "▶"; /* 替换为你想要的播放图标 */
}

.playing::before {
  content: "⏸"; /* 替换为你想要的暂停图标 */
}

.progress {
  width: 100%;
  height: 4px;
  background-color: #ccc;
  margin-left: 10px;
}

.bar {
  height: 100%;
  background-color: #ff6600;
  width: 0;
  transition: width 0.2s ease-in-out;
}

</style>
</head>
<body>
  <div class="player">
    <audio id="audio" src="song.mp3"></audio>
    <div class="controls">
      <button id="playpausebtn" class="play"></button>
      <div class="progress">
        <div id="progressbar" class="bar"></div>
      </div>
    </div>
  </div>

  <script>
var audio = document.getElementById('audio');
var playpausebtn = document.getElementById('playpausebtn');
var progressbar = document.getElementById('progressbar');

playpausebtn.addEventListener('click', function() {
  if (audio.paused || audio.ended) {
    audio.play();
    playpausebtn.classList.add('playing');
  } else {
    audio.pause();
    playpausebtn.classList.remove('playing');
  }
});

audio.addEventListener('timeupdate', function() {
  var progress = (audio.currentTime / audio.duration) * 100;
  progressbar.style.width = progress + '%';
});

</script>
</body>
</html>
标签: CSS3
2023-12-16 15:48 
评论(0)  浏览(67)  AI

庄泽峰
<CSS3简洁的播放器代码> 

<!DOCTYPE html>
<html>
<head>
  <style>
    .audio-player {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }

    .audio-player audio {
      width: 300px;
      height: 30px; 
    }

    .audio-player button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="audio-player">
    <audio controls>
      <source src="your-audio-file.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </div>
</body>
</html>
标签: CSS3
2023-12-16 13:36 
评论(0)  浏览(65)  AI

庄泽峰
<Javascript生成文字PNG图> 

<!DOCTYPE html>
<html>
<head>
    <title>Generate PNG Image</title>
    <style>
        body {
            background-color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .logo {
            font-family: Arial, sans-serif;
            font-size: 110px;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            width: 300px;
            height: 300px;
            background-color: #222;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .download-link {
            margin-top: 20px;
            text-align: center;
        }

        .download-link a {
            color: #fff;
            text-decoration: none;
            background-color: #555;
            padding: 10px 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="logo">
        <span>Phon</span>
    </div>
    <div class="download-link">
        <a href="#" id="download-link">Download PNG</a>
    </div>

    <script>
        function downloadImage() {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width = 300;
            canvas.height = 300;
            context.fillStyle = '#222';
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.font = '110px Arial, sans-serif';
            context.fillStyle = '#fff';
            context.fillText('Phon', 22, 180);

            const link = document.getElementById('download-link');
            link.href = canvas.toDataURL('image/png');
            link.download = 'logo.png';
        }

        const downloadLink = document.getElementById('download-link');
        downloadLink.addEventListener('click', downloadImage);
    </script>
</body>
</html>
标签: JavaScript
2023-12-11 11:23 
评论(0)  浏览(77)  AI

庄泽峰
<CSS3鼠标滑过时图片跳跃一下> 

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 100px;
  height: 120px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
}

.jump-animation {
  animation: jump 0.5s;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
<script>
function addJumpAnimation() {
  var image = document.getElementById("image");
  image.classList.add("jump-animation");
}

function removeJumpAnimation() {
  var image = document.getElementById("image");
  image.classList.remove("jump-animation");
}
</script>
</head>
<body>
<div class="container">
  <img id="image" class="image" src="https://phoncent.com/content/plugins/qiqi/qiqi.png" alt="Your Image" onmouseover="addJumpAnimation()" onmouseout="removeJumpAnimation()">
</div>
</body>
</html>
标签: CSS3
2023-12-7 17:07 
评论(0)  浏览(72)  AI

庄泽峰
<HTML简单网址导航样式> 

<!DOCTYPE html>
<html>
<head>
  <title>网址导航</title>
 <style>
body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.nav li {
  margin-bottom: 10px;
}

.nav li a {
  display: block;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.nav li a:hover {
  background-color: #0056b3;
}
</style>
</head>
<body>
  <div class="container">
    <h1>网址导航</h1>
    <ul class="nav">
      <li><a href="https://phoncent.com/gpts">GPTS</a></li>
      <li><a href="https://phoncent.com/gpts">GPTS</a></li>
      <li><a href="https://phoncent.com/gpts">GPTS</a></li>
    </ul>
  </div>
</body>
</html>
标签: HTML
2023-12-6 14:54 
评论(0)  浏览(72)  AI

庄泽峰
<CSS3淡绿色的按钮样式> 

<!DOCTYPE html>
<html>
<head>
  <title>Button Style</title>
  <style>
    .button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      background-color: #4CAF50;
      color: #ffffff;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

    .button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <a href="#" class="button">Click Me</a>
</body>
</html>
标签: CSS3
2023-12-6 10:48 
评论(0)  浏览(78)  AI

热门文章

最新评论