标签 html5 下的文章

2024-08-13

以下是一个简单的HTML和CSS代码示例，展示如何使用HTML5和CSS3创建一个3D呈现的商品信息卡片：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Product Card</title>
<style>
  .product-card {
    width: 200px;
    height: 260px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    perspective: 1000px;
  }
 
  .product-card .face {
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
  }
 
  .product-card .face.back {
    transform: rotateY(180deg);
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
  }
 
  .product-card .face.front {
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }
 
  .product-card .face.front img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
 
  .product-card .face.front .info {
    padding: 10px;
  }
 
  .product-card:hover .face {
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
 
<div class="product-card">
  <div class="face front">
    <img src="product-image.jpg" alt="Product Image">
    <div class="info">
      <p>Product Name</p>
      <p>$99.99</p>
    </div>
  </div>
  <div class="face back">
    Description of the product goes here.
  </div>
</div>
 
</body>
</html>

这个示例使用了CSS3的perspective和transform属性来创建3D效果，并使用:hover伪类来触发卡片翻转的动画。这个简单的3D卡片可以作为学习如何制作类似效果的起点。

- 阅读更多 -

JS特效第148弹：html5 css3圆形进度条倒计时页面跳转代码

System

2024-08-13

所有,css3

以下是一个简化的HTML和JavaScript代码示例，用于创建一个圆形进度条并在倒计时结束时跳转到指定页面。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆形进度条倒计时</title>
<style>
  .circle-timer {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(#4db8ff 0%, #f9f900 50%, #ff3c5c 100%);
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-weight: bold;
    color: white;
  }
</style>
</head>
<body>
<div id="timer" class="circle-timer">10</div>
 
<script>
function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  var interval = setInterval(function () {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
 
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
 
    display.textContent = minutes + ":" + seconds;
 
    if (--timer < 0) {
      clearInterval(interval);
      window.location.href = "https://www.example.com"; // 指定跳转的URL
    }
  }, 1000);
}
 
window.onload = function () {
  var timeLeft = 10 * 60,
    display = document.querySelector('#timer');
  startTimer(timeLeft, display);
};
</script>
</body>
</html>

这段代码实现了一个简单的圆形进度条，通过conic-gradient创建颜色渐变，并在倒计时结束时使用window.location.href跳转到指定的页面。你可以根据需要调整倒计时时间和目标页面的URL。

- 阅读更多 -

HTML5 CSS3 提高

System

2024-08-13

所有,css3

HTML5和CSS3是现代网页设计和开发的核心技术。以下是一些提高HTML5和CSS3使用技巧的方法：

学习HTML5的新特性：例如新的语义标签、表单控件、Canvas和SVG绘图、视频和音频支持等。
使用CSS3的特效和变换：比如rgba颜色、@font-face字体定义、box-shadow、border-radius、transform和animation等。
响应式设计：使用媒体查询和相应的布局技术，以适应不同屏幕尺寸。
语义化HTML：使用合适的HTML标签来表示内容的结构和意义。
优化CSS：使用CSS预处理器（如Sass、LESS）、CSS Architect（如BEM）方法来组织和维护样式表。
使用CSS3的Flexbox和Grid布局：简化复杂的布局设计。
优化图片：使用CSS3特效和优化技术，如Base64编码小图片、懒加载等。
代码组织：将CSS和JavaScript文件分离，并通过外部链接引入HTML文件。
性能优化：减少HTTP请求、压缩CSS和JavaScript文件、使用CDN等。
访问性改进：确保你的HTML标签具有良好的语义，同时为视觉障碍者提供良好的支持。

以下是一个简单的响应式导航栏的HTML和CSS示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  .navbar li {
    float: left;
  }
  .navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .navbar li a:hover {
    background-color: #111;
  }
  @media screen and (max-width: 600px){
    .navbar li {
      float: none;
    }
  }
</style>
</head>
<body>
 
<ul class="navbar">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
 
</body>
</html>

这个示例展示了如何创建一个基本的响应式导航栏，并且使用了HTML5语义化标签和CSS3媒体查询来实现在不同屏幕尺寸下的布局优化。

- 阅读更多 -

HTML5 CSS3 经典案例：无插件拖拽上传图片（支持预览与批量）

System

2024-08-13

所有,css3

以下是实现HTML5和CSS3拖拽上传图片功能的核心JavaScript代码，它支持图片预览和批量上传。




// 初始化文件输入框
document.getElementById('file-input').addEventListener('change', function(e) {
    var files = this.files;
    for (var i=0; i<files.length; i++) {
        var file = files[i];
        // 检查文件类型
        if (!file.type.match('image.*')) {
            continue;
        }
        // 创建图片预览
        var img = document.createElement('img');
        img.classList.add('preview');
        img.file = file;
        // 添加拖拽效果
        img.addEventListener('dragstart', dragStart, false);
        img.addEventListener('dragend', dragEnd, false);
        // 添加图片到预览区域
        document.getElementById('preview').appendChild(img);
        // 读取文件并显示
        var reader = new FileReader();
        reader.onload = (function(aImg) {
            return function(e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
});
 
// 拖拽开始事件
function dragStart(e) {
    this.style.opacity = '0.5';
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', null);
    e.dataTransfer.setImageData(this.src, 0, 0);
    e.dataTransfer.setData('img-file', this.file);
}
 
// 拖拽结束事件
function dragEnd(e) {
    this.style.opacity = '1';
}
 
// 拖拽进入目标区事件
function dragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
}
 
// 拖拽覆盖目标区事件
function dragOver(e) {
    e.stopPropagation();
    e.preventDefault();
}
 
// 拖拽放置事件
function drop(e) {
    e.stopPropagation();
    e.preventDefault();
 
    var img = document.createElement('img');
    img.classList.add('preview');
    img.file = e.dataTransfer.getData('img-file');
    img.addEventListener('dragstart', dragStart, false);
    img.addEventListener('dragend', dragEnd, false);
 
    document.getElementById('preview').appendChild(img);
    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(img.file);
}
 
// 设置拖拽事件监听
document.getElementById('preview').addEventListener('dragenter', dragEnter, false);
document.getElementById('preview').addEventListener('dragover', dragOver, false);
document.getEleme

System

2024-08-13

所有,css3

以下是一个简单的HTML和CSS代码示例，用于创建一个横向二级导航菜单：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横向二级导航菜单</title>
<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
 
  li {
    float: left;
  }
 
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
 
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
 
  .dropdown-content a:hover {background-color: #f1f1f1;}
 
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
</head>
<body>
 
<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接1</a>
      <a href="#">链接2</a>
      <a href="#">链接3</a>
    </div>
  </li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

这段代码提供了一个简单的横向二级导航菜单的实现，使用了HTML结构和CSS样式。当鼠标悬停在带有下拉内容的菜单项上时，会显示下拉菜单。这个示例可以作为学习如何创建导航菜单的起点，并可以根据具体需求进行扩展和修改。

System

2024-08-13

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom HTML5 Video Player</title>
    <!-- Tailwind CSS -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="mx-auto max-w-lg bg-white rounded-lg shadow overflow-hidden">
        <video id="video" class="w-full" controls>
            <source src="your-video-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="flex items-center justify-between px-2 py-2 bg-gray-100">
            <!-- Play/Pause Button -->
            <button id="playPause" class="text-blue-500" onclick="togglePlayPause()">
                Play/Pause
            </button>
            <!-- Progress Bar -->
            <div class="w-1/4">
                <input id="seek" type="range" min="0" max="100" value="0" onchange="seekTo()">
            </div>
            <!-- Timer -->
            <div id="timer" class="text-gray-600">00:00 / 00:00</div>
        </div>
    </div>
 
    <script>
        function togglePlayPause() {
            var video = document.getElementById('video');
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
 
        function seekTo() {
            var video = document.getElementById('video');
            var seekTo = (event.target.value / 100) * video.duration;
            video.currentTime = seekTo;
        }
 
        // Update the seek slider and timer
        function updateProgress() {
            var video = document.getElementById('video');
            var progress = (video.currentTime / video.duration) * 100;
            document.getElementById('seek').value = progress;
 
            // Calculate the time left and time total
            var minutes = Math.floor(video.currentTime / 60);
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            var seconds = Math.floor(video.currentTime % 60);
            if (seconds < 10) {
                seconds = '0' + seconds;
            }
            var totalMinutes = Math.floor(video.duration / 60);
            if (totalMinutes < 10) {
                totalMinutes = '0' + totalMinutes;
            }

2024-08-13

要实现H5中接口返回的富文本内容变成语音朗读，可以使用HTML5的Web Speech API中的speechSynthesis功能。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rich Text to Speech</title>
</head>
<body>
<div id="content">这里是由接口返回的富文本内容</div>
<button onclick="readContent()">播放</button>
 
<script>
function readContent() {
    const content = document.getElementById('content').textContent;
    const speech = new SpeechSynthesisUtterance(content);
    window.speechSynthesis.speak(speech);
}
</script>
</body>
</html>

在这个例子中，我们首先定义了一个div元素来存放富文本内容，然后有一个按钮用于触发内容的语音播放。当用户点击按钮时，readContent函数被调用，它创建了一个SpeechSynthesisUtterance对象，这个对象包含了需要朗读的文本内容。然后，使用speechSynthesis.speak()方法将这段文本转换成语音并播放。

- 阅读更多 -

h5 js监听手机切到后台和切回

System

2024-08-13

所有,javascript

在移动端Web页面中，可以通过监听visibilitychange事件来判断页面是切到后台(document.hidden为true)还是切回前台(document.hidden为false)。

以下是实现页面切到后台和切回前台时的事件监听的示例代码：




document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    console.log('页面切到后台');
    // 在这里执行页面切到后台时的逻辑
  } else {
    console.log('页面切回前台');
    // 在这里执行页面切回前台时的逻辑
  }
});

这段代码会在用户切换到其他应用或者浏览器的标签页时触发，并通过document.hidden的值判断当前页面是可见还是隐藏。在相应的条件分支中，你可以执行需要的操作，比如暂停动画、暂停游戏、或者重新加载数据等。

- 阅读更多 -

vue+html5+css制作日历代码，工作日配置

System

2024-08-13

所有,vue.js

以下是一个使用Vue.js创建简单日历的示例代码，其中包括工作日的配置：




<!DOCTYPE html>
<html>
<head>
  <title>Vue Simple Calendar</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <style>
    .calendar { border: 1px solid #ddd; border-collapse: collapse; width: 100%; margin-bottom: 20px; }
    .calendar th, .calendar td { border: 1px solid #ddd; padding: 5px; text-align: center; }
    .calendar thead { background-color: #f2f2f2; }
    .calendar tbody tr:nth-child(odd) { background-color: #f9f9f9; }
    .calendar tbody tr:nth-child(even) { background-color: #fdfdfd; }
    .weekdays { color: #666; }
  </style>
</head>
<body>
  <div id="app">
    <table class="calendar">
      <thead>
        <tr>
          <th>Sun</th>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="week in calendar">
          <td v-for="day in week">
            {{ day.date }}
            <span v-if="day.workday" class="workday">Workday</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
 
  <script>
    new Vue({
      el: '#app',
      data: {
        calendar: [],
        workdays: [1, 3, 5] // 工作日配置，1=星期一，3=星期三，以此类推
      },
      created() {
        this.buildCalendar();
      },
      methods: {
        buildCalendar() {
          let currentDate = new Date();
          let firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
          let dayOfWeek = firstDayOfMonth.getDay();
          let daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
          let calendar = [];
 
          // 填充上月的日期
          for (let i = 0; i < dayOfWeek; i++) {
            calendar[0] = calendar[0] || [];
            calendar[0].push({
              date: '',
              workday: false
            });
          }
 
          // 填充本月的日期
          for (let i = 1; i <= daysInMonth; i++) {
            let day = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
            let workday = this.workdays.includes(day.getDay());
 
            calendar[Math.ceil((i + dayOfWeek - 1) / 7)] = calendar[Math.ceil((i + dayOfWeek - 1) / 7)] || [];
            calendar[Math.ceil((i + dayOfWeek - 1) / 7)].push({
              date: i,

- 阅读更多 -

【vue】移动端H5+腾讯地图，实现地图选取坐标点获取位置信息

System

2024-08-13

所有,vue.js

在Vue项目中使用腾讯地图进行选取坐标点并获取位置信息，可以通过以下步骤实现：

引入腾讯地图API。
创建地图实例。
添加点击事件获取坐标。
使用坐标转位置信息的API。

以下是具体实现的代码示例：

首先，在public/index.html中引入腾讯地图的API：




<script src="https://map.qq.com/api/js?v=2.exp&key=您的API密钥"></script>

然后，在Vue组件中创建地图并实现选点功能：




<template>
  <div id="map" style="width: 100%; height: 300px;"></div>
</template>
 
<script>
export default {
  name: 'MapComponent',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new qq.maps.Map(document.getElementById('map'), {
        center: new qq.maps.LatLng(39.916527, 116.397128), // 设定中心点坐标
        zoom: 13 // 设定地图显示的缩放级别
      });
 
      qq.maps.event.addListener(map, 'click', (event) => {
        const lat = event.latLng.getLat();
        const lng = event.latLng.getLng();
        const coord = new qq.maps.LatLng(lat, lng);
 
        // 使用坐标转位置信息的服务
        const geocoder = new qq.maps.Geocoder();
        geocoder.getAddress(coord);
 
        qq.maps.event.addListener(geocoder, 'complete', function(res) {
          console.log(res.detail); // 获取到的位置信息
        });
 
        // 清除之前的标记
        map.clearOverlays();
 
        // 添加标记
        const marker = new qq.maps.Marker({
          position: coord,
          map: map
        });
      });
    }
  }
};
</script>

在上述代码中，请将new qq.maps.LatLng(39.916527, 116.397128)中的坐标设置为默认显示地图的中心点，并将您的API密钥替换为您从腾讯地图平台获取的API密钥。

用户点击地图后，会通过click事件获取点击的坐标，然后使用腾讯地图的Geocoder服务将坐标转换为位置信息，并在控制台输出。同时，在地图上会添加一个标记表示选取的坐标点。

- 阅读更多 -