标签 Javascript 下的文章

HTML5七夕情人节表白网页制作【抖音3D立方体图像库】HTML+CSS+JavaScript html生日快乐祝福网页制作

2024-08-08

要创建一个HTML5的七夕情人节表白页面，我们可以使用一个简单的3D立方体GIF动画作为背景，来提升页面的视觉效果。以下是一个简单的HTML和CSS示例，用于创建带有3D立方体背景的表白页面：




<!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%;
  }
  .container {
    perspective: 1000px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .cube {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
  .side {
    width: 200px;
    height: 200px;
    position: absolute;
    background-size: cover;
    box-shadow: 0 0 5px #fff;
  }
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="container">
  <div class="cube">
    <div class="side" style="background-image: url('img1.gif'); transform: translateZ(100px);"></div>
    <div class="side" style="background-image: url('img2.gif'); transform: rotateY(90deg) translateZ(100px);"></div>
    <div class="side" style="background-image: url('img3.gif'); transform: rotateY(-90deg) translateZ(100px);"></div>
    <div class="side" style="background-image: url('img4.gif'); transform: rotateX(90deg) translateZ(100px);"></div>
    <div class="side" style="background-image: url('img5.gif'); transform: rotateX(-90deg) translateZ(100px);"></div>
    <div class="side" style="background-image: url('img6.gif'); transform: rotateY(180deg) translateZ(100px);"></div>
  </div>
</div>
</body>
</html>

在这个示例中，我们创建了一个带有6个面的3D立方体，每个面使用了不同的GIF动图作为背景。通过CSS中的transform-style: preserve-3d;属性，我们可以让立方体内部的元素保持3D效果。动画通过CSS的@keyframes规则创建，使立方体不断旋转。

请替换img1.gif到img6.gif为你自己的图片链接。这个简单的例子可以作为你创建更复杂3D立方体效果的起点。

System

2024-08-08

所有,html5

以下是一个简化的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>
  canvas {
    background: #000;
    display: block;
  }
</style>
</head>
<body>
 
<canvas id="canvas"></canvas>
 
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const W = canvas.width = window.innerWidth;
  const H = canvas.height = window.innerHeight;
  const halfW = W * 0.5;
  const halfH = H * 0.5;
 
  class Star {
    constructor() {
      this.x = Math.random() * W;
      this.y = Math.random() * H;
      this.coords = this.calculateCoords(this.x, this.y);
      this.velocity = {
        x: (Math.random() - 0.5) * 5,
        y: (Math.random() - 0.5) * 5
      };
      this.angle = Math.atan2(this.velocity.y, this.velocity.x);
      this.speed = 2;
      this.size = Math.random() * 2;
      this.brightness = Math.random() * 255;
    }
 
    update() {
      this.x += this.velocity.x * this.speed;
      this.y += this.velocity.y * this.speed;
      if(this.x > W || this.x < 0) this.velocity.x *= -1;
      if(this.y > H || this.y < 0) this.velocity.y *= -1;
    }
 
    draw() {
      ctx.beginPath();
      ctx.fillStyle = `hsl(25, 100%, ${this.brightness}%)`;
      ctx.arc(...this.coords, this.size, 0, Math.PI * 2);
      ctx.fill();
    }
 
    calculateCoords(x, y) {
      const angle = Math.atan2(halfH - y, halfW - x);
      const r = Math.hypot(halfW - x, halfH - y);
      return [
        halfW + r * Math.cos(angle),
        halfH + r * Math.sin(angle)
      ];
    }
  }
 
  const starfield = [];
  const starCount = 1000;
  for (let i = 0; i < starCount; i++) {
    starfield.push(new Star());
  }
 
  function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    ctx.fillRect(0, 0, W, H);
    starfield.forEach((star, index) => {
      star.update();
      star.draw();
    });
    requestAnimationFrame(animate);
  }
 
  animate();
</script>
 
</body>
</html>

这段代码创建了一个流星类，其中包含流星的属性，如位置、速度、颜色和大小。calculateCoords函数将2D平面上的坐标转换为3D空间中的坐标。update方法更新流星的位置，如果它超出了屏幕边界，就反弹。draw方法在画布上绘制流星。主循环中创建了一个流星数组，并在animate函数中更新和绘制它们。

System

2024-08-08

所有,html5

以下是一个简单的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;
    font-family: Arial, sans-serif;
  }
 
  .fireworks {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100px;
    height: 100px;
    background: #f00;
    border-radius: 50%;
    opacity: 0;
    animation: fireworks-animation 2s infinite;
  }
 
  @keyframes fireworks-animation {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(-50%) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
  }
</style>
</head>
<body>
<div class="fireworks"></div>
<script>
  function createFirework() {
    const firework = document.createElement('div');
    firework.classList.add('fireworks');
    document.body.appendChild(firework);
    setTimeout(() => {
      firework.remove();
    }, 2000);
  }
 
  setInterval(createFirework, 1000);
</script>
</body>
</html>

这段代码通过CSS创建了一个简单的火焰图案，通过JavaScript定时创建火焰图案的效果，模拟烟花在空中飘落的视觉效果。这个示例可以作为表白页面的一个简单的视觉娱乐，但是要注意，应该尊重对方的感受，不要给不喜欢这种表白方式的人带来不愉快。

- 阅读更多 -

threejs基础案例之十：模拟点击事件

System

2024-08-08

所有,html5




// 假设我们已经有了threejs的基础场景和一个名为`mesh`的网格对象
 
// 创建鼠标位置对象，用于存储鼠标位置信息
var mouse = new THREE.Vector2();
 
// 监听鼠标点击事件
function onMouseClick(event) {
    // 将浏览器的2D坐标转换为three.js的标准设备坐标(-1到+1)
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
    // 更新鼠标位置对象
    raycaster.setFromCamera(mouse, camera);
 
    // 计算鼠标当前位置的所有物体
    var intersects = raycaster.intersectObjects(scene.children);
 
    // 如果存在交点
    if (intersects.length > 0) {
        // 取得最近的交点
        var intersect = intersects[0];
 
        // 如果交点的对象是我们之前定义的mesh
        if (intersect.object == mesh) {
            // 执行模型的某些动作，比如旋转等
            // 例如，旋转模型
            mesh.rotation.x += 0.1;
            mesh.rotation.y += 0.1;
        }
    }
}
 
// 为window添加点击事件监听
window.addEventListener('click', onMouseClick, false);
 
// 注意：以上代码仅作为示例，实际使用时需要结合实际的Three.js场景和对象。

这段代码首先定义了一个鼠标位置对象mouse，用于存储鼠标在屏幕上的位置。然后定义了一个onMouseClick函数，该函数将在用户点击窗口时被调用。在这个函数中，我们更新鼠标位置对象，并使用raycaster来检测鼠标点击位置上是否有物体，如果有，则执行相应的动作，比如旋转模型。最后，我们为window添加了点击事件的监听。

- 阅读更多 -

JavaScript和jQuery的各标签选取方式？

System

2024-08-08

所有,jquery

在JavaScript和jQuery中，选取HTML标签通常使用以下方法：

JavaScript原生方法：
- document.getElementById('id')：通过元素ID获取一个元素。
- document.getElementsByClassName('class')：通过元素类名获取元素集合。
- document.getElementsByTagName('tagname')：通过元素标签名获取元素集合。
- document.querySelector('#id')：通过CSS选择器获取第一个匹配的元素。
- document.querySelectorAll('.class')：通过CSS选择器获取所有匹配的元素集合。
jQuery方法：
- $('#id')：通过ID选取元素。
- '.class'：通过类名选取元素。
- 'tagname'：通过标签名选取元素。
- $('selector')：通过CSS选择器选取元素。

示例代码：




// JavaScript原生方法
var elementById = document.getElementById('myId');
var elementsByClassName = document.getElementsByClassName('myClass');
var elementsByTagName = document.getElementsByTagName('div');
var firstElementByQuery = document.querySelector('div.myClass');
var allElementsByQuery = document.querySelectorAll('p');
 
// jQuery方法
var jqueryElementById = $('#myId');
var jqueryElementByClass = $('.myClass');
var jqueryElementByTag = $('div');
var jqueryElementBySelector = $('p.myClass');

- 阅读更多 -

JQuery前端如何操作JSON

System

2024-08-08

所有,jquery

在前端使用jQuery操作JSON对象，通常是指解析JSON字符串为JavaScript对象，或者将JavaScript对象转换为JSON字符串。以下是两个基本操作的示例代码：

将JSON字符串解析为JavaScript对象：




var jsonString = '{"name": "John", "age": 30}';
var jsonObj = $.parseJSON(jsonString); // 使用$.parseJSON解析JSON字符串
console.log(jsonObj.name); // 输出: John

将JavaScript对象转换为JSON字符串：




var jsObj = {name: "Jane", age: 25};
var jsonString = JSON.stringify(jsObj); // 使用JSON.stringify转换为JSON字符串
console.log(jsonString); // 输出: '{"name":"Jane","age":25}'

请注意，从jQuery 3.0开始，官方推荐使用原生的JSON.parse()和JSON.stringify()方法来解析和序列化JSON，而不是使用$.parseJSON()。上述第一个操作中的代码可以简化为：




var jsonObj = JSON.parse(jsonString); // 使用原生的JSON.parse解析JSON字符串

- 阅读更多 -

jQuery.md5.js加密插件使用方法

System

2024-08-08

所有,jquery

jQuery.md5.js是一个用于MD5散列的jQuery插件。MD5是一种广泛使用的密码散列函数，可以生成一个128位的散列值（hash value），通常用一个32位的十六进制字符串表示。

以下是如何使用jQuery.md5.js进行MD5散列的简单示例：

首先，确保在页面中引入了jQuery库和jQuery.md5.js插件。




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.md5.js"></script>

然后，你可以使用jQuery.md5()函数来对字符串进行MD5加密：




$(document).ready(function() {
    var hash = $.md5('your string here');
    console.log(hash); // 输出字符串的MD5散列值
});

这段代码将会计算并输出传入字符串的MD5散列值。记得替换 'your string here' 为你需要加密的实际字符串。

- 阅读更多 -

JS 实现form表单登录验证并使用MD5加密

System

2024-08-08

所有,jquery




// 引入MD5加密库
const CryptoJS = require("crypto-js");
 
// 登录验证函数
function validateLogin(req, res) {
    // 获取表单数据
    const { username, password } = req.body;
 
    // 假设这是从数据库获取的用户数据
    const user = {
        username: 'admin',
        password: '202cb962ac59075b964b07152d234b70' // 预先存储的密码需要是MD5加密格式
    };
 
    // 对用户输入的密码进行MD5加密
    const encryptedPassword = CryptoJS.MD5(password).toString();
 
    // 验证用户名和密码
    if (username === user.username && encryptedPassword === user.password) {
        // 登录成功
        res.redirect('/dashboard'); // 重定向到dashboard
    } else {
        // 登录失败
        res.redirect('/login'); // 重定向回登录页面
    }
}
 
// 导出函数
module.exports = validateLogin;

这段代码展示了如何在一个简单的登录验证场景中使用MD5加密来确保密码的安全性。在实际应用中，密码应该存储为加密后的字符串，并在用户登录时进行加密验证。

- 阅读更多 -

基于jquery的分页器插件Pagination.js

System

2024-08-08

所有,jquery

Pagination.js 是一个轻量级的 jQuery 分页插件，可以用于创建简洁美观的分页控件。以下是一个使用 Pagination.js 的示例代码：

首先，确保在页面中引入了 jQuery 和 Pagination.js 的脚本文件：




<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="path/to/pagination.min.js"></script>

然后，在 HTML 中添加一个用于显示分页的容器：




<div id="pagination-container"></div>

最后，使用以下 JavaScript 代码来初始化分页器：




$(function() {
    $('#pagination-container').pagination({
        dataSource: new Array(100),
        callback: function(data, pagination) {
            // 这里处理页面变化时的逻辑，比如请求数据等
            console.log('当前页:', pagination.getCurrentPage());
        }
    });
});

这段代码会在页面加载完成后初始化一个分页器，并为它设置一个数据源（这里假设有 100 项数据）。当用户点击分页控件时，会触发 callback 函数，在这个函数中你可以实现请求数据的逻辑。

这只是 Pagination.js 使用的一个基本示例，实际使用时可以根据需要配置更多选项，如分页的总数、每页显示的项目数等。

- 阅读更多 -

前端JS特效第29集：jQuery仿途牛多样式图片轮播代码

System

2024-08-08

所有,jquery

以下是一个使用jQuery实现的图片轮播器的简化示例代码，模仿了路牛多样式轮播的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路牛轮播器</title>
<style>
  .carousel {
    position: relative;
    width: 600px;
    height: 300px;
    margin: auto;
  }
  .carousel-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>
 
<div class="carousel">
  <div class="carousel-inner">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->
  </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  let currentIndex = 0;
  const images = $('.carousel-inner img');
  const imageCount = images.length;
 
  setInterval(function() {
    images.eq(currentIndex).fadeOut(1000);
    currentIndex = (currentIndex + 1) % imageCount;
    images.eq(currentIndex).fadeIn(1000);
  }, 3000);
});
</script>
 
</body>
</html>

这段代码使用jQuery实现了图片的自动轮播效果，每隔3秒切换到下一张图片。轮播中的图片通过CSS进行样式设置，并通过jQuery的fadeIn()和fadeOut()方法实现淡入淡出效果。轮播的索引通过currentIndex变量管理，并且使用% imageCount确保在最后一张图片之后继续从第一张图片开始轮播。

- 阅读更多 -