标签 html5 下的文章

【h5长按事件】H5页面监听长按和点击事件

2024-08-11

所有,typescript

在H5页面中，可以使用JavaScript监听contextmenu和mousedown事件来分别处理长按和点击事件。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长按和点击事件</title>
<script>
window.onload = function() {
    var longPressTimer;
    var element = document.getElementById('myElement');
 
    element.addEventListener('contextmenu', function(e) {
        e.preventDefault();
        longPressTimer = setTimeout(function() {
            alert('长按事件触发');
        }, 1000); // 设置长按的时间为1000毫秒
    });
 
    element.addEventListener('mouseup', function(e) {
        e.preventDefault();
        clearTimeout(longPressTimer);
        if (e.which == 1) { // 判断是否是鼠标左键点击
            alert('点击事件触发');
        }
    });
};
</script>
</head>
<body>
<div id="myElement" style="width: 200px; height: 100px; background-color: #00FF00;">长按或点击这里</div>
</body>
</html>

在这个示例中，我们为目标元素添加了contextmenu和mouseup事件监听器。当用户长按时，会触发contextmenu事件，并设置一个定时器。如果在设定的时间内用户释放鼠标按钮，则会触发mouseup事件，并清除定时器。如果用户按住鼠标之后并没有释放鼠标按钮，则会执行长按的逻辑。如果是鼠标左键点击（which属性等于1），则会执行点击的逻辑。

h5 视频全屏-横屏实现，遇到问题以及解决方案

2024-08-11

在H5中实现视频全屏或横屏，可以通过监听视频元素的resize事件来检测方向变化，并适当调整样式以实现全屏或横屏。以下是一个简单的示例代码：

HTML:




<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

CSS:




#myVideo {
  width: 100%;
  height: auto;
}
 
/* 横屏样式 */
.landscape {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

JavaScript:




const video = document.getElementById('myVideo');
 
function checkOrientation() {
  if (window.innerWidth > window.innerHeight) {
    video.classList.add('landscape');
  } else {
    video.classList.remove('landscape');
  }
}
 
// 初始检查
checkOrientation();
 
// 监听方向变化
window.addEventListener('resize', checkOrientation);

这段代码会在用户旋转设备时，检测窗口的宽高比例，并根据比例给视频元素添加或移除一个.landscape类。当类存在时，视频会以横屏全屏的方式显示，否则保持正常的纵屏模式。

【html/html5/css/css3知识点】

2024-08-11

HTML5 引入了一些新的语义元素，例如 <header>, <nav>, <section>, <article>, <aside> 和 <footer>，它们有助于改善代码的可读性和可维护性。

CSS3 引入了许多新特性，例如边框、阴影、圆角、渐变、变换等，以及选择器的增强，这些使得页面的样式更加丰富多样。

下面是一个简单的HTML和CSS3的示例代码，展示如何使用HTML5元素和CSS3特性：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 and HTML5 Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border-radius: 10px; /* 圆角 */
    box-shadow: 5px 5px 10px #888; /* 阴影 */
    transition: transform 0.3s ease; /* 变换动画 */
  }
  .box:hover {
    transform: rotate(360deg); /* 鼠标悬停时旋转 */
  }
</style>
</head>
<body>
<header>
  <h1>Welcome to My Website</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<section>
  <div class="box"></div>
</section>
<footer>
  <p>Copyright &copy; 2023 My Website</p>
</footer>
</body>
</html>

这个示例中，我们使用了HTML5的<header>, <nav>, <section>, 和 <footer>元素，以及CSS3的border-radius属性来制作圆角，box-shadow属性来添加盒子阴影，以及transition属性和:hover伪类来实现鼠标悬停时的变换动画效果。

HTML5+CSS3+JS小实例：倒计时动画特效

2024-08-11




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时动画特效</title>
<style>
  .countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-family: Arial, sans-serif;
    color: #333;
    margin: 20px;
  }
  .digit {
    line-height: 1;
    font-size: 2em;
    margin: 0 2px;
  }
</style>
</head>
<body>
<div id="countdown" class="countdown">
  00:00:10
</div>
<script>
function countdown() {
  var endTime = new Date().getTime() + 10 * 1000,
      elements = document.getElementById('countdown').querySelectorAll('.digit'),
      tick = function() {
        var currentTime = new Date().getTime(),
            remaining = endTime - currentTime,
            hours = Math.floor(remaining / (1000 * 60 * 60)),
            minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60)),
            seconds = Math.floor((remaining % (1000 * 60)) / 1000),
            milliseconds = Math.floor((remaining % 1000) / 100);
 
        elements[0].textContent = hours < 10 ? '0' + hours : hours;
        elements[1].textContent = minutes < 10 ? '0' + minutes : minutes;
        elements[2].textContent = seconds < 10 ? '0' + seconds : seconds;
        elements[3].textContent = milliseconds < 10 ? '0' + milliseconds : milliseconds;
 
        if (remaining < 0) {
          clearInterval(interval);
          elements[0].textContent = '00';
          elements[1].textContent = '00';
          elements[2].textContent = '00';
          elements[3].textContent = '00';
        }
      };
 
  tick();
  var interval = setInterval(tick, 100);
}
 
countdown();
</script>
</body>
</html>

这段代码实现了一个简单的倒计时动画特效。它使用了HTML、CSS和JavaScript。在页面中，它创建了一个ID为countdown的div元素，并通过CSS给它设置了样式。JavaScript脚本定义了countdown函数，它使用了setInterval方法来每100毫秒更新一次计时器的显示。当计时结束时，计时器会被清零。这个实例提供了一个简单的倒计时动画示例，并且可以通过调整endTime的值来改变倒计时的时间。

html5和css3实现3d正方体旋转

2024-08-11

以下是使用HTML5和CSS3实现3D正方体旋转的示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
body {
  perspective: 1000px; /* 创建3D效果 */
}
 
.cube {
  width: 100px;
  height: 100px;
  margin-top: 50px;
  margin-left: 50px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 5s infinite; /* 应用旋转动画 */
}
 
.cube div {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 0.5); /* 红色 */
  opacity: 0.5;
}
 
/* 定义每一个面的位置 */
.cube .front  { transform: translateZ(50px); }
.cube .back   { transform: rotateY(180deg) translateZ(50px); }
.cube .right  { transform: rotateY(90deg) translateZ(50px); }
.cube .left   { transform: rotateY(-90deg) translateZ(50px); }
.cube .top    { transform: rotateX(90deg) translateZ(50px); }
.cube .bottom { transform: rotateX(-90deg) translateZ(50px); }
 
/* 定义旋转动画 */
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
</style>
</head>
<body>
 
<div class="cube">
  <div class="front"></div>
  <div class="back"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="top"></div>
  <div class="bottom"></div>
</div>
 
</body>
</html>

这段代码定义了一个类名为.cube的3D正方体，通过CSS3的transform-style: preserve-3d;属性保持3D效果，并应用了名为rotate的动画使正方体不断旋转。每个面使用不同的颜色和透明度，以便于区分观察。

HTML5 CSS3 精美案例：实现VCD包装盒个性幻灯片

2024-08-11

以下是实现一个VCD包装盒个性幻灯片的HTML和CSS代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VCD包装盒个性幻灯片</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    color: #fff;
    font-family: Arial, sans-serif;
  }
  .vcd-box {
    width: 200px;
    height: 200px;
    background: url('vcd-box.jpg') no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: 0 0 10px #000;
  }
  .vcd-box::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #fff;
    box-shadow: inset 0 0 10px #000;
  }
  .vcd-box::after {
    content: 'VCD\A Collection';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    border-top: 1px solid #fff;
    padding: 5px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
</style>
</head>
<body>
<div class="vcd-box"></div>
</body>
</html>

这段代码创建了一个简单的VCD包装盒子，使用伪元素::before和::after为盒子添加了阴影和文本装饰。背景图片和背景色设置为实现不同的视觉效果。这个示例展示了如何使用伪元素来增强基本HTML元素的视觉效果，同时保持代码的简洁性。

HTML5 CSS3 精美案例：实现VCD包装盒个性幻灯片

2024-08-11

以下是一个简单的HTML和CSS代码示例，用于创建一个VCD包装盒个性幻灯片的效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VCD包装盒个性幻灯片</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    color: white;
    font-family: Arial, sans-serif;
  }
 
  .vcd-box {
    width: 200px;
    height: 260px;
    background: url('vcd-box.jpg') no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: 0 0 10px #000;
  }
 
  .vcd-box::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 50px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
  }
 
  .vcd-box::after {
    content: 'VCD\A 乐趣无穷';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
    text-shadow: 0 0 10px #000;
  }
 
  .vcd-box:hover::before {
    animation: glow 1s infinite alternate;
  }
 
  @keyframes glow {
    from {
      box-shadow: 0 0 10px #00f;
    }
    to {
      box-shadow: 0 0 20px #0f0;
    }
  }
</style>
</head>
<body>
<div class="vcd-box"></div>
</body>
</html>

这段代码展示了如何使用CSS伪元素::before和::after来创建一个具有阴影和文本的VCD包装盒，并使用::before伪元素上的动画使其发光。当鼠标悬停在幻灯片上时，伪元素的动画效果开始。这个示例简单易懂，并且可以根据需要进行拓展和定制。

HTML5/CSS3粒子效果进度条超炫酷进度条动画源码

2024-08-11

以下是一个使用HTML5和CSS3创建的炫酷粒子进度条效果的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粒子进度条</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #particles-canvas {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  #progress-bar {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  #progress-bar-inner {
    width: 100%;
    height: 10px;
    background: #2ecc71;
    border-radius: 5px;
    position: relative;
  }
  #progress-bar-fill {
    width: 0;
    height: 100%;
    background: #3498db;
    border-radius: 5px;
    position: absolute;
  }
</style>
</head>
<body>
 
<div id="progress-bar">
  <div id="progress-bar-inner">
    <div id="progress-bar-fill"></div>
  </div>
</div>
 
<canvas id="particles-canvas"></canvas>
 
<script>
  // 粒子效果和进度条逻辑代码（省略）
</script>
 
</body>
</html>

这个示例提供了进度条的基本HTML结构和CSS样式，并包含了必要的<canvas>元素来渲染粒子。具体的粒子效果和进度条逻辑需要通过JavaScript实现，这部分代码在实际应用中需要单独编写。

2024-08-11

在HTML5和CSS3中，border属性是用来设置元素边框样式的。

HTML5示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>Border Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 2px solid black; /* 设置边框 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS3示例代码：




.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border: 2px solid black; /* 设置边框 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 5px 5px 10px grey; /* 盒子阴影 */
}

在这个例子中，.box类定义了一个100x100像素的方形盒子，有2像素宽的黑色边框，以及圆角和盒子阴影的样式。这些都是使用CSS3的特性实现的。