标签 html5 下的文章

【Vue H5项目实战】从0到1的肯德基点餐系统—— 提交订单设计(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + MongoDB)

2024-09-06

<template>
  <div class="order-submit">
    <!-- 订单提交表单 -->
    <form @submit.prevent="submitOrder">
      <!-- 其他表单内容 -->
      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '提交中...' : '提交订单' }}
      </button>
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isSubmitting = ref(false);

    // 模拟订单提交函数
    async function submitOrder() {
      isSubmitting.value = true;

      try {
        // 这里应该是与后端API的交互逻辑
        // 例如使用axios发送请求
        // const response = await axios.post('/api/orders', orderData);
        // 假设response.data是后端返回的数据
        const response = { data: { success: true, orderId: '12345' } };

        if (response.data.success) {
          // 订单提交成功的处理逻辑
          console.log('订单提交成功，订单号：', response.data.orderId);
          // 清空购物车、显示成功提示等
        } else {
          // 处理失败的情况
          console.error('订单提交失败：', response.data.error);
        }
      } catch (error) {
        // 处理异常情况
        console.error('订单提交发生错误：', error);
      } finally {
        isSubmitting.value = false;
      }
    }

    return {
      isSubmitting,
      submitOrder,
    };
  },
});
</script>

<style scoped>
.order-submit form {
  /* 表单样式 */
}

.order-submit button[type="submit"] {
  /* 按钮样式 */
}
</style>

这个代码实例展示了如何在Vue 3.2和TypeScript中实现一个订单提交功能。它使用了Vite作为构建工具，并提供了一个简单的模拟订单提交函数。在实际应用中，需要替换模拟的API调用和响应处理逻辑，以与后端API正确交互。

- 阅读更多 -

HTML5 WebSocket：实时通信的新篇章

System

2024-08-27

所有,html5

// 创建一个新的WebSocket实例
var ws = new WebSocket('ws://www.example.com/socketserver');

// 当WebSocket的readyState变为OPEN时，表示连接已建立，可以发送信息
ws.onopen = function(event) {
    console.log('WebSocket 连接已打开');
    // 发送一个初始化消息给服务器
    ws.send('初始化连接');
};

// 当服务器发送信息过来时，会触发onmessage事件
ws.onmessage = function(event) {
    console.log('收到消息: ' + event.data);
};

// 当WebSocket的连接关闭时，会触发onclose事件
ws.onclose = function(event) {
    console.log('WebSocket 连接已关闭');
};

// 当WebSocket通信发生错误时，会触发onerror事件
ws.onerror = function(event) {
    console.error('WebSocket 通信发生错误');
};

// 当你需要关闭WebSocket连接时，可以调用close方法
// ws.close();

这段代码演示了如何创建一个WebSocket连接，并为连接、接收消息、关闭连接以及通信错误定义了处理函数。这是实现WebSocket实时通信的基本用法。

- 阅读更多 -

用HTML5 + JavaScript绘制花、树

System

2024-08-27

所有,html5

在HTML5中，可以使用<canvas>元素来绘制图形。以下是使用JavaScript在<canvas>元素中绘制一个简单花卉图案的示例代码：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="250" height="250" style="border:1px solid #000000;"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制花卉
function drawFlower(centerX, centerY, radius, petals, color) {
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    for (var i = 0; i < petals; i++) {
        var radians = (i / petals) * 2 * Math.PI;
        var newX = centerX + Math.cos(radians) * radius;
        var newY = centerY + Math.sin(radians) * radius;
        ctx.lineTo(newX, newY);
    }
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
}

// 调用函数绘制花卉
drawFlower(125, 125, 50, 5, 'pink');
</script>

</body>
</html>

这段代码定义了一个drawFlower函数，它接受中心点坐标centerX, centerY，花瓣半径radius，花瓣数量petals，以及颜色color作为参数，并绘制出一个五角星形的花卉。你可以根据需要调整参数来绘制不同大小和形状的花卉。

- 阅读更多 -

H5页面向小程序发消息

System

2024-08-26

所有,小程序

在H5页面向小程序发送消息，通常是通过微信提供的wx.miniProgram.postMessage方法实现的。以下是实现这一功能的基本步骤和示例代码：

在H5页面中，监听适当的事件（如按钮点击），并在事件处理函数中调用wx.miniProgram.postMessage方法。
在小程序的页面中，监听onMessage事件以接收来自H5页面的消息。

H5页面发送消息的代码示例：

// 当某个事件发生时，比如按钮点击
document.getElementById('your-button').addEventListener('click', function() {
    // 判断当前环境是否为微信小程序
    if (typeof wx !== 'undefined' && typeof wx.miniProgram !== 'undefined') {
        // 向小程序发送数据
        wx.miniProgram.postMessage({
            data: {
                key: 'value' // 需要发送的数据
            },
            success: function(res) {
                console.log('发送成功', res);
            },
            fail: function(err) {
                console.log('发送失败', err);
            }
        });
    } else {
        // 非小程序环境的处理逻辑
    }
});

小程序页面接收消息的代码示例：

Page({
    onLoad: function(options) {
        // 监听H5页面发送的消息
        wx.onMessage(message => {
            console.log('接收到H5页面的消息:', message.data);
            // 处理接收到的数据
        });
    }
});

确保H5页面在微信环境中运行，并且小程序已经打开。当H5页面中的事件被触发时，数据会通过wx.miniProgram.postMessage发送给小程序，小程序的页面通过wx.onMessage监听函数接收这些消息。

- 阅读更多 -

安卓WebView(H5)调用原生相机及相册

System

2024-08-26

所有,html5

在Android中，你可以通过WebView的addJavascriptInterface方法将一个Java对象绑定到WebView的JavaScript环境中。然后在H5页面中调用这个对象的方法，从而触发相机或相册的Intent。

以下是实现这一功能的示例代码：

Java对象绑定到WebView的代码：

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void openCamera() {
        Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        if (takePictureIntent.resolveActivity(mContext.getPackageManager()) != null) {
            startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE);
        }
    }

    @JavascriptInterface
    public void openGallery() {
        Intent intent = new Intent(Intent.ACTION_PICK);
        intent.setType("image/*");
        startActivityForResult(intent, REQUEST_IMAGE_PICK);
    }
}

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

在H5页面中调用：

function openCamera() {
    Android.openCamera();
}

function openGallery() {
    Android.openGallery();
}

确保在AndroidManifest.xml中添加了相应的权限：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

以上代码中REQUEST_IMAGE_CAPTURE和REQUEST_IMAGE_PICK是你用于识别Activity结果的回调代码，需要在Activity中重写onActivityResult方法来处理拍照或者从相册中选择图片后的回传。

- 阅读更多 -

Web前端开发 HTML5案例之图片遮罩效果

System

2024-08-26

所有,html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Masking Effect</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #2e2e2e;
        }
        .container {
            position: relative;
            width: 800px;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container img {
            position: absolute;
            width: 100%;
            height: 100%;
            mask-image: linear-gradient(45deg, #000 60%, transparent 60%), linear-gradient(135deg, #000 60%, transparent 60%);
            mask-size: 200%, 200%;
            mask-repeat: no-repeat;
            mask-position: -100px -100px, 100px 100px;
        }
        .container .masked {
            position: absolute;
            width: 100%;
            height: 100%;
            mix-blend-mode: multiply;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="image.jpg" alt="Original Image">
        <img src="mask.png" alt="Mask" class="masked">
    </div>
</body>
</html>

这个代码实例展示了如何使用CSS的mask属性和mix-blend-mode属性创建一个简单的图片遮罩效果。.container是一个相对定位的容器，其中包含了两个img元素。第一个img元素是原始图片，使用CSS的mask属性进行遮罩处理。第二个img元素是遮罩图片，通过class="masked"与原始图片一起进行遮罩。

- 阅读更多 -

Fabric.js: 动态和可交互的HTML5 Canvas库

System

2024-08-26

所有,html5

Fabric.js是一个用于HTML5 canvas元素的javascript库，它可以让你创建、控制和操作canvas对象。Fabric.js提供了一些基本对象，如矩形、圆形、文本等，还可以添加自定义的对象。

以下是一些Fabric.js的常用示例：

创建一个矩形：

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});
canvas.add(rect);

创建一个圆形：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
canvas.add(circle);

添加文本：

var canvas = new fabric.Canvas('c');
var text = new fabric.Text('Hello World', {
  left: 100,
  top: 100,
  fontSize: 20
});
canvas.add(text);

添加图片：

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('my_image.png', function(img) {
  img.set({ left: 100, top: 100, width: 200, height: 200 });
  canvas.add(img);
});

设置对象的交互性：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
circle.hasControls = true;
circle.hasBorders = true;
canvas.add(circle);

设置对象的选择边框：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
circle.hasControls = true;
circle.hasBorders = true;
canvas.add(circle);
canvas.setActiveObject(circle);

移动对象：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
canvas.add(circle);
circle.set({ left: 200, top: 200 });
canvas.renderAll();

缩放对象：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
canvas.add(circle);
circle.set({ scaleX: 2, scaleY: 2 });
canvas.renderAll();

旋转对象：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
canvas.add(circle);
circle.set({ angle: 45 });
canvas.renderAll();

删除对象：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 1

- 阅读更多 -

html5网页-浏览器中实现高德地图定位功能

System

2024-08-26

所有,html5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高德地图API位置定位示例</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德API_KEY"></script>
    <script type="text/javascript">
        var map, geolocation;
        //加载地图，调用浏览器定位服务
        map = new AMap.Map('container', {
            resizeEnable: true
        });
        map.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, //是否使用高精度定位，默认:true
                timeout: 10000           //超过10秒后停止定位，默认：5s
            });
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
        //解析定位结果
        function onComplete(data) {
            var str = ['定位成功'];
            str.push('经度：' + data.position.getLng());
            str.push('纬度：' + data.position.getLat());
            if (data.accuracy) {
                str.push('精度：' + data.accuracy + ' 米');
            }
            //如为IP定位结果则无经纬度
            if (data.position.getLng() && data.position.getLat()) {
                map.setCenter(data.position); //设定地图中心点
            } else {
                str.push('IP定位成功');
            }
        }
        //返回定位出错信息
        function onError(data) {
            document.getElementById('tip').innerHTML = '定位失败';
        }
    </script>
</head>
<body>
<div id="container" style="height:500px;width:500px;"></div>
<div id="tip"></div>
</body>
</html>

在这段代码中，我们首先引入了高德地图API，并在head标签内包含了地图初始化和定位的JavaScript代码。在body标签内，我们有一个id为container的div，这是地图将要渲染的容器。onError函数用于在定位失败时显示错误信息，而onComplete函数则用于解析定位数据，并在定位成功时将地图中心设置为定位所得的位置。这个示例展示了如何在网页中集成高德地图API并实现定位功能。

- 阅读更多 -

HTML5 服务器发送事件(Server-Sent Events)

System

2024-08-26

所有,html5

Server-Sent Events（SSE）允许网页获得来自服务器的更新。与传统的HTTP请求-响应会话不同，SSE是单向的，只允许服务器向客户端发送数据。SSE使用Content-Type为"text/event-stream"的HTTP协议。

以下是一个简单的HTML和JavaScript示例，展示了如何使用SSE：

<!DOCTYPE html>
<html>
<head>
    <title>Server-Sent Events Example</title>
</head>
<body>
    <div id="message"></div>
    <script>
        if(typeof(EventSource) !== "undefined") {
            var source = new EventSource("sse.php");
            source.onmessage = function(event) {
                document.getElementById("message").innerHTML += event.data + "<br>";
            };
        } else {
            document.getElementById("message").innerHTML = "Sorry, your browser does not support server-sent events...";
        }
    </script>
</body>
</html>

以下是服务器端的PHP示例代码，假设服务器端支持SSE：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();

在这个例子中，浏览器打开一个到服务器的SSE连接，然后服务器源源不断地发送时间更新。这个过程是持久的，直到连接关闭。这种方式可以用来实现实时更新的应用，比如实时新闻，实时股票价格等。

- 阅读更多 -

前端H5+CSS3回到顶部功能

System

2024-08-26

所有,css3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5+CSS3 回到顶部示例</title>
<style>
  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    cursor: pointer;
    z-index: 9999;
  }
  .back-to-top:hover {
    opacity: 0.8;
  }
</style>
</head>
<body>
<!-- 页面内容 -->

<div class="back-to-top">回到顶部</div>

<script>
  // 获取页面中的“回到顶部”按钮
  const btn = document.querySelector('.back-to-top');

  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 当页面向下滚动超过500px时显示按钮，否则隐藏按钮
    if (window.pageYOffset > 500) {
      btn.style.display = 'block';
    } else {
      btn.style.display = 'none';
    }
  });

  // 点击按钮回到顶部的功能
  btn.addEventListener('click', function() {
    // 平滑滚动到页面顶部
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
</script>
</body>
</html>

这段代码实现了一个简单的回到顶部按钮，当页面向下滚动超过500px时显示这个按钮，点击按钮会平滑滚动至页面顶部。CSS部分定义了按钮的样式和位置，JavaScript部分则监听了滚动事件并处理了按钮的显示和点击事件。

- 阅读更多 -