标签 html5 下的文章

HTML5七夕情人节表白网页制作【css3爱心表白背景特效】HTML+CSS+JavaScript 520情人节代码制作

2024-08-08

以下是一个使用HTML和CSS制作的简单的520情人节表白网页示例，包含一个CSS3动画的爱心背景：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>520表白网页</title>
<style>
  @keyframes heart-burst {
    0% {
      transform: scale(0.8);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2);
      opacity: 0;
    }
  }
  body, html {
    height: 100%;
    margin: 0;
    background: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .heart {
    width: 100px;
    height: 100px;
    background: #ff0000;
    position: relative;
    animation: heart-burst 5s infinite;
  }
  .heart::before,
  .heart::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 20px #ff0000;
  }
  .heart::before {
    left: -50px;
    top: 0;
    border-radius: 50% 0 0 0;
  }
  .heart::after {
    left: 0;
    top: -50px;
    border-radius: 0 0 0 50%;
  }
</style>
</head>
<body>
<div class="heart"></div>
<h1>我爱你！</h1>
</body>
</html>

这段代码创建了一个心形的背景，利用CSS3动画在屏幕中心弹力形成。同时，在心形的上方加上了“我爱你！”的表白话语。这个示例简单易懂，适合新手学习HTML和CSS的基础。

- 阅读更多 -

HTML5 和 CSS 响应式 Web 设计

System

2024-08-08

所有,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>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #92a8d1;
            padding: 10px;
            color: white;
            text-align: center;
        }
        .nav {
            float: left;
            width: 20%;
            background: #87ceeb;
            padding: 15px 0;
            text-align: center;
        }
        .nav a {
            color: inherit;
            text-decoration: none;
            display: block;
            padding: 5px;
        }
        .nav a:hover {
            background-color: #778899;
        }
        .content {
            float: right;
            width: 80%;
            padding: 15px;
        }
        @media screen and (max-width: 799px) {
            .nav, .content {
                float: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>响应式布局示例</h1>
    </div>
    <div class="nav">
        <a href="#">主页</a>
        <a href="#">关于我们</a>
        <a href="#">产品</a>
        <a href="#">联系方式</a>
    </div>
    <div class="content">
        <h2>内容</h2>
        <p>这里是内容区域，可以根据屏幕大小自适应调整。</p>
    </div>
</body>
</html>

这个示例展示了如何使用CSS媒体查询（Media Queries）来创建一个基本的响应式布局。当屏幕宽度小于799像素时，导航栏和内容区域不再浮动，并且每个区域占满整个屏幕宽度。这样就可以在不同大小的设备上提供更好的用户体验。

- 阅读更多 -

vue使用自定义指令实现长按事件（适用于h5，pc）

System

2024-08-08

所有,vue.js

在Vue中，可以通过自定义指令来实现长按事件。以下是一个简单的自定义指令示例，它可以在H5和PC端工作：




// 注册一个全局自定义指令 `v-longpress`
Vue.directive('longpress', {
  bind: function (el, binding, vNode) {
    // 确保提供的表达式是函数
    if (typeof binding.value !== 'function') {
      // 获取组件名称
      const compName = vNode.context.name;
      let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be`;
      if (compName) { warn += `Found in component '${compName}'`; }
      console.warn(warn);
    }
    // 定义变量
    let pressTimer = null;
    // 创建计时器（ 1秒后执行函数 ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return;
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          // 执行函数
          handler(e);
        }, 1000);
      }
    }
    // 取消计时器
    let cancel = () => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer);
        pressTimer = null;
      }
    }
    // 运行函数
    const handler = (e) => {
      binding.value(e);
    }
    // 添加事件监听器
    el.addEventListener('mousedown', start);
    el.addEventListener('touchstart', start);
    // 取消计时器
    el.addEventListener('click', cancel);
    el.addEventListener('mouseout', cancel);
    el.addEventListener('touchend', cancel);
    el.addEventListener('touchcancel', cancel);
  }
});

在你的Vue组件中，可以这样使用这个自定义指令：




<template>
  <div v-longpress="longPressHandler">长按我</div>
</template>
 
<script>
export default {
  methods: {
    longPressHandler() {
      // 处理长按事件
      console.log('长按事件触发了！');
    }
  }
}
</script>

这个自定义指令v-longpress可以绑定一个函数，在长按事件发生时执行这个函数。它通过监听mousedown和touchstart事件来开始计时，如果在1秒内发生了click或者其他鼠标事件，则取消计时器；如果1秒钟内没有其他事件发生，则执行绑定的函数。

- 阅读更多 -

HTML5 标题如何实现不换行

System

2024-08-07

所有,html5

在HTML5中，要实现标题不换行，可以使用CSS样式white-space: nowrap;。这个样式规则可以防止文本自动换行，即使在空间不足的情况下。

下面是一个简单的例子，演示如何应用这个样式：




<!DOCTYPE html>
<html>
<head>
<style>
.no-wrap {
  white-space: nowrap;
}
</style>
</head>
<body>
 
<h1 class="no-wrap">这是不换行的标题文本</h1>
 
</body>
</html>

在这个例子中，<h1>标签中的文本将不会换行，即使在视口（viewport）或其父元素的宽度不足以容纳全部文本的情况下。通过为<h1>标签添加class="no-wrap"，我们应用了一个CSS类.no-wrap，该类通过设置white-space: nowrap;规则来实现不换行的效果。

- 阅读更多 -

HTML5入门到入土

System

2024-08-07

所有,html5

HTML5是HTML的最新标准，它在原有的基础上增加了很多新特性，比如画布（Canvas）、视频（Video）和音频（Audio）的支持。

以下是一个简单的HTML5页面示例，包含了视频和画布元素：




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 示例</title>
</head>
<body>
    <h1>欢迎来到HTML5的世界</h1>
    
    <!-- 视频元素 -->
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
    
    <!-- 画布元素 -->
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
        您的浏览器不支持Canvas。
    </canvas>
    
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 150, 75);
    </script>
</body>
</html>

在这个示例中，我们使用了HTML5的<video>标签来嵌入一个视频，使用了<canvas>标签来创建一个绘图区域。这只是HTML5能力的一小部分，HTML5还有很多其他的新特性和提升，如本地存储、离线应用、新的表单输入类型、地理位置、多线程等。

- 阅读更多 -

uniapp h5端获取用户的地理位置（高德地图）

System

2024-08-07

所有,html5

在uniapp中使用高德地图获取用户位置，你需要按照以下步骤操作：

在项目中引入高德地图的JavaScript API。
使用uniapp的uni.getLocation API获取用户的当前位置。
使用高德地图的服务将获取到的原始位置数据转换为高德地图上的坐标。

以下是实现这些步骤的示例代码：

首先，在index.html中引入高德地图的JavaScript API：




<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_KEY"></script>

替换YOUR_AMAP_KEY为你的高德地图API Key。

然后，在uniapp的页面脚本中使用以下代码获取用户位置并使用高德地图进行显示：




export default {
  methods: {
    getLocation() {
      // 使用uniapp的API获取位置
      uni.getLocation({
        type: 'wgs84',
        success: (res) => {
          // 将获取到的位置转为高德地图的坐标
          this.initMap(res.latitude, res.longitude);
        },
        fail: () => {
          console.error('获取位置失败');
        }
      });
    },
    initMap(lat, lon) {
      // 使用高德地图API初始化地图
      let map = new AMap.Map('map-container', {
        zoom: 16, // 缩放级别
        center: [lon, lat] // 中心点坐标
      });
 
      // 将原始坐标转为高德坐标
      let convertor = new AMap.Convertor();
      let wgsCoord = [lon, lat];
      convertor.translate(wgsCoord, 2, (status, result) => {
        if (result.info === 'ok') {
          // 设置高德地图中心点为转换后的坐标
          map.setCenter(result.locations[0]);
        }
      });
    }
  },
  mounted() {
    this.getLocation();
  }
}

在页面的template部分，添加一个用于显示地图的容器：




<template>
  <view>
    <view id="map-container" style="width: 100%; height: 300px;"></view>
  </view>
</template>

确保你的页面容器有足够的宽度和高度，以便正确显示地图。

注意：

替换YOUR_AMAP_KEY为你的高德地图API Key。
确保你的uniapp项目配置中已经添加了相应的权限，允许访问用户的位置信息。
在真机调试或打包发布时，确保你的高德地图API Key已经绑定了对应的应用和包名。

- 阅读更多 -

HTML5 拖放Drag和drop用法以及事件介绍

System

2024-08-07

所有,html5




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
    #drop_zone {
        width: 300px;
        height: 300px;
        border: 2px dashed #aaa;
        margin: 20px;
        padding: 20px;
        text-align: center;
        font-size: 24px;
        color: #aaa;
    }
    #draggables img {
        width: 100px;
        cursor: move;
    }
</style>
</head>
<body>
 
<div id="drop_zone">Drop Here</div>
 
<div id="draggables">
    <img src="image1.jpg" alt="Image 1" draggable="true">
    <img src="image2.jpg" alt="Image 2" draggable="true">
    <img src="image3.jpg" alt="Image 3" draggable="true">
</div>
 
<script>
    // 获取可拖动元素和放置区域
    var draggables = document.querySelectorAll('#draggables img');
    var dropZone = document.getElementById('drop_zone');
 
    // 监听拖动开始
    draggables.forEach(function(img) {
        img.addEventListener('dragstart', function(event) {
            event.dataTransfer.setData('text/plain', img.src);
        });
    });
 
    // 监听拖动结束
    dropZone.addEventListener('dragover', function(event) {
        event.preventDefault(); // 阻止默认行为
        event.dataTransfer.dropEffect = 'copy'; // 设置可视效果
    });
 
    // 监听放置
    dropZone.addEventListener('drop', function(event) {
        event.preventDefault(); // 阻止默认行为
        var imageSrc = event.dataTransfer.getData('text/plain');
        this.innerHTML = '<img src="' + imageSrc + '" alt="Dropped Image">';
    });
</script>
 
</body>
</html>

这段代码演示了如何使用HTML5的拖放API。首先，我们设置了一个放置区域，并为可拖动的图片设置了draggable="true"属性。然后，我们使用dragstart事件来设置要传输的数据（在这个例子中是图片的源路径）。在放置区域上，我们监听dragover事件来更改默认行为并设置可视效果，监听drop事件来获取数据并更新放置区域的内容。这个例子简单直观地展示了如何在Web应用中实现拖放功能。

- 阅读更多 -

IOS HTML5添加图标到主屏幕

System

2024-08-07

所有,html5

在iOS中，要通过HTML5将一个图标添加到主屏幕，你需要使用apple-touch-icon的link元素在网页的head中指定图标，并且确保网站是在iOS设备上通过Safari访问。

以下是一个简单的HTML示例，展示了如何添加一个apple-touch-icon：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add to Home Screen</title>
    <!-- 添加图标到主屏幕 -->
    <link rel="apple-touch-icon" href="icon.png">
    <!-- 可选: 添加一个图标的多种尺寸 -->
    <link rel="apple-touch-icon" sizes="72x72" href="icon-72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="icon-114.png">
    <link rel="apple-touch-icon" sizes="144x144" href="icon-144.png">
    <!-- 其他的head内容 -->
</head>
<body>
    <p>将此页面添加到主屏幕</p>
    <!-- 页面内容 -->
</body>
</html>

在这个例子中，icon.png、icon-72.png、icon-114.png和icon-144.png应该是你的服务器上的实际图像文件。当用户尝试添加你的网页到主屏幕时，Safari会自动检测这些图标链接，并允许用户选择一个最佳的图标尺寸。

请注意，用户必须实际尝试将网页添加到主屏幕；网站上的一个按钮或提示不会自动触发这个功能。这是iOS提供的一个特性，用户必须手动决定是否将网页添加到主屏幕。

- 阅读更多 -

uniapp添加操作日志（uniapp、日志、文件、html5+）

System

2024-08-07

所有,html5

在uniapp中添加操作日志通常涉及到文件写入。以下是一个简单的示例，展示了如何在uniapp中记录操作日志到文件：




export default {
  methods: {
    // 记录日志函数
    logAction(message) {
      const logEntry = `${new Date().toISOString()}: ${message}\n`;
      // 在uni-app环境下，可以使用plus.io的API来写文件
      plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
        // 创建或打开日志文件
        fs.root.getFile("action_log.txt", { create: true }, function(fileEntry) {
          fileEntry.createWriter(function(writer) {
            writer.onwrite = function() {
              console.log('日志写入成功');
            };
            writer.onerror = function(e) {
              console.log('日志写入失败: ' + e.message);
            };
            // 追加日志内容
            writer.seek(writer.length);
            writer.write(logEntry);
          }, function(e) {
            console.log('创建写入器失败: ' + e.message);
          });
        }, function(e) {
          console.log('获取文件失败: ' + e.message);
        });
      }, function(e) {
        console.log('请求文件系统失败: ' + e.message);
      });
    }
  }
}

在上述代码中，logAction方法负责将日志信息追加到文件。请注意，这段代码需要在真机上运行，因为plus.io API是HTML5+ API的一部分，只有在支持HTML5+的环境下（如uniapp打包成App时）才能正常工作。在使用之前，请确保已经在manifest配置文件中开启了对应的权限。

- 阅读更多 -

HTML5技术实现的小钢琴

System

2024-08-07

所有,html5

HTML5 本身并不提供直接创建小钢琴的接口，但可以使用 <audio> 标签来播放音乐，并结合 JavaScript 代码来实现简单的钢琴控制。以下是一个简单的 HTML5 小钢琴实现示例：




<!DOCTYPE html>
<html>
<head>
<title>HTML5 Guitar Tuner</title>
<script>
// 初始化音频上下文
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
// 音符对应的音频文件路径
var notes = {
  'A': 'sounds/A3.mp3',
  'B': 'sounds/B3.mp3',
  'C': 'sounds/C3.mp3',
  // ... 其他音符
};
 
// 根据按键创建音频节点并连接到音频上下文
function playNote(note) {
  var audio = new Audio(notes[note]);
  var source = audioCtx.createMediaElementSource(audio);
  source.connect(audioCtx.destination);
  audio.play();
}
 
// 用户交互函数
function keyPress(note) {
  playNote(note);
  // 可以添加更多的视觉反馈，如改变键的颜色等
}
</script>
<style>
/* 键的样式 */
.key {
  /* 省略样式代码 */
}
</style>
</head>
<body>
<div id="keyboard">
  <div class="key" onclick="keyPress('A')">A</div>
  <div class="key" onclick="keyPress('B')">B</div>
  <div class="key" onclick="keyPress('C')">C</div>
  <!-- 更多键 -->
</div>
</body>
</html>

在这个例子中，我们使用了 <audio> 标签和 AudioContext 来播放音频。通过为每个键分配一个点击事件处理函数 keyPress，当用户点击一个键时，相应的音乐会被播放。这个简单的实现没有包括复杂的音高识别或调音功能，仅适用于播放预存的音频文件。

请注意，为了使这段代码工作，你需要有对应音频文件，并且它们的路径需要正确填写在 notes 对象中。此外，音频文件需要是浏览器支持的格式，并且要确保服务器正确配置了CORS以允许跨域加载。

- 阅读更多 -