Tech Blog

vue 简单实现购物车：商品基础信息最终的 html 文件 + 商品计数器的组件处理，实现了购物车；

2024-08-11




<template>
  <div id="app">
    <h1>购物车示例</h1>
    <div v-for="(item, index) in cart" :key="item.id">
      <div>
        <span>{{ item.name }}</span>
        <span>{{ item.price }}</span>
        <span>
          <button @click="decrementItem(index)">-</button>
          {{ item.quantity }}
          <button @click="incrementItem(index)">+</button>
        </span>
        <span>{{ item.price * item.quantity }}</span>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      cart: [
        { id: 1, name: '商品A', price: 100, quantity: 1 },
        { id: 2, name: '商品B', price: 200, quantity: 1 }
      ]
    }
  },
  methods: {
    incrementItem(index) {
      this.cart[index].quantity++;
    },
    decrementItem(index) {
      if (this.cart[index].quantity > 1) {
        this.cart[index].quantity--;
      }
    }
  }
}
</script>

这个简单的Vue应用展示了如何创建一个购物车组件，其中包含商品列表、商品单价、数量以及总价。用户可以通过点击按钮来增加或减少商品数量。这个例子教会了如何在Vue中处理简单的状态管理和用户事件。

- 阅读更多 -

python 画图转化为html

System

2024-08-11

所有,html

在Python中，可以使用matplotlib库生成图像，然后使用matplotlib.figure.Figure.savefig方法将图像保存为HTML文件。以下是一个简单的例子：




import matplotlib.pyplot as plt
import numpy as np
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
 
# 创建一个图像
fig = Figure()
canvas = FigureCanvas(fig)
ax = fig.add_subplot(111)
 
# 生成一些数据
x = np.linspace(0, 10, 100)
y = np.sin(x)
ax.plot(x, y)
 
# 保存为HTML
from io import BytesIO
buf = BytesIO()
canvas.print_png(buf)
data_uri = f'data:image/png;base64,{buf.getvalue().encode("base64").rstrip()}'
 
# 创建HTML文件
with open('output.html', 'w') as f:
    f.write(f"<html><body><img src='{data_uri}'></body></html>")

这段代码首先创建了一个图像，然后将其转换为PNG格式的base64编码字符串，最后将这个字符串嵌入到HTML文件中，作为图像源。这样就可以在网页上显示这个图像。

System

2024-08-11

所有,html

在Mars3D中，如果你想要创建一个图形并且在创建时就自动弹出一个弹窗，而不需要用户点击小车（即鼠标点击事件），你可以使用graphic.bindPopup(html).openPopup(options)方法。这里的openPopup(options)方法会在图形创建后立即打开弹窗。

以下是一个简单的示例代码：




// 创建一个图形实例
var graphic = new mars3d.graphic.Marker({
  latlng: L.latLng(31.874838, 117.229444),
  style: {
    image: "img/marker/mark-default.png",
    width: 30,
    height: 30,
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM
  },
  attr: { remark: "示例graphic" }
})
.addTo(map)
.bindPopup('这是一个自动弹出的弹窗', {
  // 弹窗的配置项
  closeButton: true, // 显示关闭按钮
  autoClose: false // 点击其他图形不关闭弹窗
})
.openPopup(); // 打开弹窗

在这个例子中，我们创建了一个图形对象，并且在添加到地图后立即调用了bindPopup方法来绑定一个弹窗，并且调用openPopup方法来打开这个弹窗。这样，当图形显示在地图上时，弹窗就会自动显示，不需要用户进行任何点击操作。

- 阅读更多 -

HTML纯代码给网页增加右下角提示框弹窗提示图片+文字纯HTML代码无需插件

System

2024-08-11

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>右下角弹窗示例</title>
    <style>
        /* 弹窗背景 */
        .floating-box {
            position: fixed;
            bottom: 0;
            right: 0;
            z-index: 100;
            pointer-events: none;
            background: #3498db;
            width: 120px;
            height: 120px;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 8px;
            transition: opacity 0.5s ease-in-out;
            opacity: 0;
        }
        .floating-box img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .floating-box .content {
            color: white;
            font-size: 14px;
            text-align: center;
            padding: 10px 0;
        }
 
        /* 鼠标悬停时显示弹窗 */
        .floating-box:hover {
            opacity: 1;
            pointer-events: auto;
        }
    </style>
</head>
<body>
    <div class="floating-box">
        <img src="your-image.jpg" alt="Image Description">
        <div class="content">这里是弹窗文本内容</div>
    </div>
</body>
</html>

这段代码会在页面的右下角显示一个带有图片和文字的弹窗提示框，并且只使用了HTML和CSS，没有JavaScript。弹窗默认是隐藏的，当鼠标悬停在其上时会显示。这是一个简单的示例，可以根据需要进行样式和内容的调整。

- 阅读更多 -

html内实现会员登录验证功能+登录窗口(显示更多条数)

System

2024-08-11

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>会员登录</title>
    <style>
        body { font-family: Arial, sans-serif; }
        form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 50px auto; }
        input[type="text"], input[type="password"] { width: 200px; padding: 10px; margin: 10px 0; }
        input[type="submit"] { width: 210px; padding: 10px; margin: 10px 0; }
        label { display: block; margin-bottom: 10px; }
    </style>
</head>
<body>
 
<form action="/submit_your_login_form" method="post">
    <label for="username">用户名:
        <input type="text" id="username" name="username" placeholder="请输入用户名" required>
    </label>
    <label for="password">密码:
        <input type="password" id="password" name="password" placeholder="请输入密码" required>
    </label>
    <input type="submit" value="登录">
</form>
 
</body>
</html>

这个简单的HTML登录表单包含了基本的样式和输入字段，以及一个提交按钮。表单数据将通过POST方法发送到服务器的一个处理页面（这里假设为/submit_your_login_form）。在实际应用中，你需要根据自己的服务器端逻辑来修改action属性的值。此外，required属性用于确保输入字段在提交前必须被填写。

- 阅读更多 -

vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互

System

2024-08-11

所有,html

在Vue项目中嵌套静态HTML项目并实现数据交互，可以通过以下步骤实现：

在Vue项目中创建一个HTML文件，并将其放在Vue项目的静态资源目录（通常是public或static）中。
在Vue组件中，使用<iframe>标签嵌入这个HTML文件。
通过postMessage API在Vue组件和嵌套的HTML页面之间发送数据。

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

Vue组件中的代码：




<template>
  <div>
    <!-- 嵌入静态HTML页面 -->
    <iframe id="static-iframe" :src="iframeSrc" @load="iframeLoaded"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      iframeSrc: process.env.BASE_URL + 'static-page.html'
    };
  },
  methods: {
    iframeLoaded() {
      // 当iframe加载完成后发送数据
      const message = { greeting: 'Hello from Vue app!' };
      this.$refs.iframe.contentWindow.postMessage(message, '*');
    }
  }
};
</script>

静态HTML页面中的代码 (static-page.html)：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Static Page</title>
  <script>
    // 监听从Vue应用发送来的消息
    window.addEventListener('message', function(event) {
      if (event.origin !== window.location.origin) return;
      
      const data = event.data;
      console.log('Received message:', data);
      // 处理数据...
    });
  </script>
</head>
<body>
  <h1>This is a static HTML page.</h1>
</body>
</html>

在这个例子中，Vue组件中的<iframe>标签引用了位于Vue项目静态资源目录中的静态HTML页面。一旦iframe加载完成，Vue组件通过postMessage方法向iframe内部发送消息。静态HTML页面通过监听message事件来接收和处理这些消息。

请确保在实际部署时，静态资源的路径正确，并且遵循同源策略或者正确设置postMessage的允许来源。

- 阅读更多 -

html,css背景颜色,背景图片,背景平铺,背景位置的设置

System

2024-08-11

所有,html

在HTML和CSS中，可以通过设置background属性来设置元素的背景颜色、背景图片、背景是否平铺以及背景图片的位置。

以下是一些示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
/* 设置背景颜色 */
body {
  background-color: #f0f0f0;
}
 
/* 设置背景图片并平铺 */
.background-image {
  background-image: url('background.jpg');
  background-repeat: repeat; /* 平铺背景图片 */
}
 
/* 设置背景图片并指定位置 */
.background-position {
  background-image: url('background.jpg');
  background-position: right top; /* 背景图片位置在右上角 */
  background-repeat: no-repeat; /* 不平铺背景图片 */
}
</style>
</head>
<body>
 
<div class="background-image">内容区域</div>
<div class="background-position">内容区域</div>
 
</body>
</html>

在这个例子中，.background-image类设置了一个背景图片，并且该图片会在水平和垂直方向上平铺。.background-position类设置了背景图片，但是该图片只会显示一次，并且位于元素的右上角。

记得将background.jpg替换为你的实际图片文件路径。

- 阅读更多 -

原生html table固定高度并显示滚动条

System

2024-08-11

所有,html

要在HTML表格中固定高度并显示滚动条，您可以使用CSS来设置表格的高度以及父容器的高度和overflow属性。以下是一个简单的示例：

HTML:




<div class="table-container">
  <table>
    <!-- 表头和表格数据 -->
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <!-- 填充足够多的行来超过设定的高度 -->
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

CSS:




.table-container {
  height: 200px; /* 设置固定高度 */
  overflow-y: auto; /* 显示垂直滚动条 */
}
 
table {
  width: 100%; /* 表格宽度 */
  border-collapse: collapse; /* 可选的表格样式 */
}
 
th, td {
  border: 1px solid #ddd; /* 可选的表格样式 */
  padding: 8px; /* 可选的表格样式 */
  text-align: left; /* 可选的表格样式 */
}

在这个例子中，.table-container 类的高度被设置为200px，如果表格的内容超出这个高度，则会显示垂直滚动条。您可以根据需要调整 .table-container 的高度。

- 阅读更多 -

简易html满天星效果

System

2024-08-11

所有,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>满天星</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    padding: 0;
  }
 
  .star {
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    animation: twinkle 1s infinite alternate ease-in-out;
  }
 
  @keyframes twinkle {
    from { 
      transform: scale(0.5);
      opacity: 0.5;
    }
    to { 
      transform: scale(1);
      opacity: 1;
    }
  }
</style>
</head>
<body>
<div class="star"></div>
<script>
  // 动态创建多个星星
  const numStars = 100; // 可以根据需要调整星星数量
  for (let i = 0; i < numStars; i++) {
    const star = document.createElement('div');
    star.classList.add('star');
    // 随机位置
    star.style.top = `${Math.random() * 100}%`;
    document.body.appendChild(star);
  }
</script>
</body>
</html>

这段代码会创建100个星星，它们随机分布在页面上，并通过CSS动画随机闪烁，模拟出星空中的满天星光效果。你可以根据需要调整.star的样式和@keyframes twinkle动画的细节来改变星星的大小、颜色和闪烁的速度。

- 阅读更多 -

【HTML——3d粒子特效（效果+代码）】，开发一个web站点

System

2024-08-11

所有,html

以下是创建3D粒子特效的HTML和JavaScript代码示例。这个特效使用了Three.js库来创建和动画处理3D场景中的粒子。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Particle Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 设置场景、相机和渲染器
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        // 创建粒子
        const geometry = new THREE.Geometry();
        const material = new THREE.ParticleBasicMaterial({ color: 0xFFFFFF, size: 0.05 });
        for (let i = 0; i < 1000; i++) {
            const particle = new THREE.Vector3(
                Math.random() * 2 - 1,
                Math.random() * 2 - 1,
                Math.random() * 2 - 1
            );
            particle.multiplyScalar(Math.random() * 10 + 10);
            geometry.vertices.push(particle);
        }
        const system = new THREE.ParticleSystem(geometry, material);
        scene.add(system);
 
        // 创建灯光
        const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.5);
        scene.add(ambientLight);
 
        // 设置相机位置并开始渲染循环
        camera.position.z = 5;
        function animate() {
            requestAnimationFrame(animate);
            system.rotation.y += 0.001;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

这段代码创建了一个简单的3D粒子系统，每个粒子随机生成位置和大小，并被统一赋予白色。系统中有一个环境光源，提供基本的照明。场景、相机和渲染器被设置好后，通过requestAnimationFrame循环进行渲染，并且通过改变系统的旋转来创建动态效果。

- 阅读更多 -