标签 Javascript 下的文章

2024-08-08

以下是一个使用HTML5和canvas创建的科技感的粒子效果示例，其中的粒子会跟随鼠标移动：




<!DOCTYPE html>
<html>
<head>
    <title>创意网页: HTML5 Canvas创造科技感粒子特效</title>
    <style>
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="particles-canvas"></canvas>
    <script>
        const canvas = document.getElementById('particles-canvas');
        const ctx = canvas.getContext('2d');
        const mouse = {x: 0, y: 0};
        let particles = [];
 
        // 鼠标跟随的粒子
        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.vx = (Math.random() - 0.5) * 2;
                this.vy = (Math.random() - 0.5) * 2;
                this.radius = Math.random() * 1.5;
                this.life = 1;
            }
 
            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.life -= 0.001;
            }
 
            draw() {
                ctx.beginPath();
                ctx.globalAlpha = this.life;
                ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
                ctx.fillStyle = '#fff';
                ctx.fill();
            }
        }
 
        // 鼠标跟随函数
        function followMouse(event) {
            mouse.x = event.clientX;
            mouse.y = event.clientY;
        }
 
        // 初始化和动画循环
        function init() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            window.addEventListener('mousemove', followMouse);
            setInterval(update, 16);
        }
 
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            particles = particles.filter(particle => particle.life > 0);
            while (particles.length < 100) {
                particles.push(new Particle(mouse.x, mouse.y));
            }
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }
        }
 
        init();
    </script>
</body>
</html>

这段代码定义了一个Particle类，它表示跟随鼠标移动的粒子。有一个particles数组跟踪这些粒子，并且每个粒子都有随机生

编程笔记 html5&css&js 093 JavaScript 窗口对象

2024-08-08

在JavaScript中，window对象代表浏览器窗口。它是全局对象，提供了与浏览器窗口交互的方法和属性。

以下是一些使用JavaScript窗口对象的常见示例：

打开新窗口：




window.open('http://www.example.com', 'newwindow', 'width=400,height=200');

关闭窗口：




window.close();

弹出警告框：




window.alert('这是一个警告框！');

弹出确认框：




if (window.confirm('你确定要继续吗？')) {
    // 用户点击了确定
} else {
    // 用户点击了取消
}

弹出提示框：




var userInput = window.prompt('请输入您的名字：', '');
if (userInput != null) {
    // 用户输入了数据，userInput 变量存储输入的值
} else {
    // 用户点击了取消
}

滚动窗口到顶部：




window.scrollTo(0, 0);

滚动窗口到底部：




window.scrollTo(0, document.body.scrollHeight);

获取窗口宽度和高度：




var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

监听窗口大小变化：




window.addEventListener('resize', function() {
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    // 处理窗口大小变化的逻辑
});

这些是window对象的一些常见用法，在实际开发中可以根据需要使用其提供的其他属性和方法。

html5&css&js代码 012 我的像册

2024-08-08

以下是一个简单的HTML、CSS和JavaScript代码示例，用于创建一个可以上传照片并展示的“我的相册”页面。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
  <h2>My Gallery</h2>
  <input type="file" id="imageUpload" multiple>
  <div id="imagePreview"></div>
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):




.gallery {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
 
.gallery img {
  width: 150px;
  margin: 10px;
}
 
#imagePreview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

JavaScript (script.js):




document.getElementById('imageUpload').addEventListener('change', handleFiles);
 
function handleFiles() {
  let files = this.files;
  let imagePreview = document.getElementById('imagePreview');
  
  imagePreview.innerHTML = ''; // Clear the preview
  
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    let imageType = /image.*/;
    
    if (file.type.match(imageType)) {
      let img = document.createElement('img');
      img.file = file;
      img.classList.add('gallery__image');
      
      // Preview the image
      let reader = new FileReader();
      reader.onload = (e) => img.src = e.target.result;
      reader.readAsDataURL(file);
      
      imagePreview.appendChild(img);
    }
  }
}

这个示例中，用户可以通过点击<input>元素选择图片文件。当文件被选中后，handleFiles函数会被触发，读取这些文件并逐个预览显示在<div id="imagePreview">中。这个简单的例子演示了如何使用HTML5的文件API来处理用户上传的文件，并使用JavaScript和CSS进行展示。

2024-08-08

以下是一个简单的HTML5七夕情人节烟花表白网页的示例代码。这个示例使用了HTML、CSS和JavaScript来创建一个页面，并通过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>
  body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #1f1f1f;
  }
  canvas {
    display: block;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
 
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
 
  const mp = new Matter.Plugin();
  const engine = Matter.Engine.create();
  const runner = Matter.Runner.create({});
  const render = Matter.Render.create({
    canvas: canvas,
    engine: engine,
    options: {
      width: canvas.width,
      height: canvas.height,
      wireframes: false,
      background: '#1f1f1f'
    }
  });
 
  Matter.World.add(engine.world, mp.createSnow(canvas, {}));
  Matter.World.add(engine.world, mp.createHearts(canvas, {}));
 
  Matter.Engine.run(engine);
  Matter.Runner.run(runner, engine);
  Matter.Render.run(render);
</script>
</body>
</html>

这段代码使用了Matter.js库来创建烟花和心形的飞行效果。你需要在你的网页中引入Matter.js库才能正常工作。

请注意，这个示例是一个简化版本，并且假设读者已经熟悉HTML和CSS。如果你想要一个更完整的示例，你可能需要进一步的学习和研究Matter.js库的文档。

深入了解外部js和jquery冲突的危害及应对策略

2024-08-08

所有,jquery

在使用外部JavaScript（external.js）和jQuery时，可能会遇到变量冲突、选择器不明确或事件监听器冲突等问题。这些冲突可能导致意外行为，降低代码质量，并可能在未来的维护中造成困难。

解决这些问题的策略包括：

避免全局变量冲突：使用局部作用域来定义变量，或者使用命名空间。




// 局部变量
let myNamespace = {};
myNamespace.myVariable = 'value';
 
// 或者使用命名空间
const myNamespace = {};
myNamespace.myFunction = function() {
    // ...
};

使用模块化编程：通过模块化的方式组织代码，避免变量和函数污染全局命名空间。




// 模块化代码
const myModule = (function() {
    let privateVariable = 'private';
    
    return {
        publicMethod() {
            // 使用 privateVariable 或其他公共方法
        }
    };
})();

使用jQuery的$.noConflict()方法：可以调用这个方法来将jQuery的$符号交还给其他库。




jQuery.noConflict();
jQuery(document).ready(function($) {
    // 使用jQuery的别名'$'
    $('selector').doSomething();
});
 
// 或者定义一个别名
var jq = jQuery.noConflict();
jq(document).ready(function() {
    jq('selector').doSomething();
});

使用jQuery的$(document).ready()确保DOM完全加载后再绑定事件和执行操作。




$(document).ready(function() {
    // DOM完全加载后执行的代码
    $('#myButton').click(function() {
        // ...
    });
});

避免直接在元素上使用内联事件，如onclick，而是使用jQuery的.on()或.click()方法绑定事件。




$(document).ready(function() {
    $('#myButton').on('click', function() {
        // ...
    });
});

优化选择器，避免使用过于泛泛的选择器，尽可能具体化，以减少与其他库的冲突。




// 不推荐
$('.my-class').doSomething();
 
// 推荐
$('#my-id').doSomething();

使用开发者工具和控制台错误来调试和定位冲突问题。

总结，要有效地使用外部JavaScript和jQuery，关键是模块化代码、避免全局变量冲突、使用$.noConflict()方法、在正确的时机使用jQuery方法，并优化选择器以提高代码的清晰度和稳健性。

JavaScript原生态&&jQuery实现tab菜单切换内容

2024-08-08

所有,jquery

以下是实现Tab菜单切换内容的原生JavaScript和jQuery版本的代码示例：

原生JavaScript版本：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab Menu in JavaScript</title>
<style>
  .tab-content { display: none; }
  .tab-content.active { display: block; }
</style>
</head>
<body>
 
<div class="tabs">
  <button class="tab" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tab" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tab" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>
 
<div id="tab1" class="tab-content active">
  <h3>Tab 1</h3>
  <p>This is tab 1 content.</p>
</div>
 
<div id="tab2" class="tab-content">
  <h3>Tab 2</h3>
  <p>This is tab 2 content.</p>
</div>
 
<div id="tab3" class="tab-content">
  <h3>Tab 3</h3>
  <p>This is tab 3 content.</p>
</div>
 
<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].className = tabcontent[i].className.replace("active", "");
  }
  tablinks = document.getElementsByClassName("tab");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace("active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
 
</body>
</html>

jQuery版本：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab Menu in jQuery</title>
<style>
  .tab-content { display: none; }
  .tab-content.active { display: block; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
 
<div class="tabs">
  <button class="tab" data-tab="tab1">Tab 1</button>
  <button class="tab" data-tab="tab2">Tab 2</button>
  <button class="tab" data-tab="tab3">Tab 3</button>
</div>
 
<div id="tab1" class="tab-content active">
  <h3>Tab 1</h3>
  <p>This is tab 1 content.</p>
</div>
 
<div id="tab2" class="tab-content">
  <h3>Tab 2</h3>
  <p>This is tab 2 content.</p>
</

JQuery前端操作JSON浅谈

2024-08-08

所有,jquery

在前端操作JSON对象，主要涉及到解析和序列化两个过程。

JSON解析：

JSON字符串转换为JavaScript对象。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var obj = $.parseJSON(jsonString);
alert( obj.name ); // John

JSON序列化：

JavaScript对象转换为JSON字符串。




var obj = {name:"John", age:30, city:"New York"};
var jsonString = JSON.stringify(obj);
alert(jsonString); // {"name":"John", "age":30, "city":"New York"}

遍历JSON对象：




var obj = {name:"John", age:30, city:"New York"};
$.each(obj, function(key, value) {
    alert(key + " : " + value);
});

添加和删除JSON对象属性：




var obj = {name:"John", age:30, city:"New York"};
obj.email = "john@example.com"; // 添加属性
delete obj.age; // 删除属性

检查JSON对象中是否有特定的属性或元素：




var obj = {name:"John", age:30, city:"New York"};
"name" in obj; // true
"email" in obj; // false

合并两个JSON对象：




var obj1 = {name:"John", age:30};
var obj2 = {city:"New York"};
var obj3 = $.extend({}, obj1, obj2); // obj3 为合并后的对象

以上是使用jQuery进行JSON操作的基本方法，实际应用中可以根据需要选择合适的方法。

pkg打包nodejs，找不到资源文件

2024-08-08

所有,typescript

报错问题："pkg打包Node.js应用时找不到资源文件" 通常意味着在使用pkg这个工具将Node.js应用程序编译成一个可执行文件时，程序无法找到它依赖的某些资源文件，可能是图标、配置文件或其他资源。

解决方法：

确认资源文件是否存在：检查你的项目目录中是否确实有你在package.json或程序中引用的资源文件。
路径问题：确保资源文件的路径是正确的。如果你的程序是相对路径引用资源，请确保在打包时资源的位置与运行时的位置相同。
配置pkg：如果你使用的是pkg的高级配置，例如通过.pkg.json或命令行参数指定资源文件的位置，请确保配置正确无误。
权限问题：有时候权限不足也会导致资源文件无法被正确读取。确保运行pkg打包命令时拥有足够的权限。
使用绝对路径：尝试将资源文件放在一个绝对路径下，然后在程序中使用绝对路径来引用这些资源。
检查pkg的issue：如果上述方法都不能解决问题，可以在pkg的GitHub仓库中搜索是否有人遇到了类似的问题，或者提交一个issue来寻求帮助。

总结，解决这个问题的关键是确保资源文件存在、路径正确、配置正确，并且在打包时有适当的权限。

2024-08-08

所有,typescript




// 假设我们有一个JavaScript库叫做 myLibrary.js，它没有自己的类型声明文件。
 
// 1. 首先，安装类型声明文件（如果存在的话）。如果没有，你需要创建一个声明文件。
// 创建一个声明文件 myLibrary.d.ts，如果你不能找到现成的类型声明。
 
// myLibrary.d.ts
// 这里是你对myLibrary模块的基本声明，假设它有一个函数叫做doSomething
 
// 如果你不需要提供类型，只是想避免错误，可以简单地使用 `declare module`：
declare module 'myLibrary' {
    export function doSomething(value: string): void;
}
 
// 2. 在你的 TypeScript 文件中导入 JavaScript 模块。
 
// example.ts
import { doSomething } from 'myLibrary';
 
doSomething('Hello, world!');

这个例子展示了如何为没有类型声明的JavaScript库创建一个简单的声明文件，并在TypeScript代码中如何导入和使用它。如果库有现有的类型声明，可以直接安装并使用它们，无需手动创建声明文件。