标签 Javascript 下的文章

网站登录界面制作（three.js 3D特效背景）+ boostrap导航栏实现 + jQuery移动窗口【附加源代码】

2024-08-19

以下是一个简化的代码示例，展示如何使用Three.js创建3D特效背景和Bootstrap实现导航栏，以及使用jQuery来处理移动窗口的事件。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Login</title>
    <!-- 引入Three.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- 引入Boostrap样式 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* 设置3D特效背景的样式 */
        #sceneCanvas {
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        /* 导航栏样式 */
        .navbar {
            margin-bottom: 0; /* 移除默认的底部边距 */
            background-color: #3498db; /* 设置导航栏背景色 */
        }
        /* 其他样式 */
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        input[type=text], input[type=password] {
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            border: none;
            border-bottom: 1px solid #000;
            background: transparent;
            outline: none;
        }
        button {
            width: 100%;
            padding: 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
 
<div id="sceneCanvas"></div> <!-- 3D特效背景的容器 -->
 
<nav class="navbar navbar-expand-lg navbar-dark"> <!-- Bootstrap导航栏 -->
    <a class="navbar-brand" href="#">Website Name</a>
    <!-- 导航栏内容 -->
</nav>
 
<div class="login-container">
    <h2>Login Form</h2>
    <input type="text" placeholder="U

- 阅读更多 -

javascript实现SM2加密解密

System

2024-08-19

所有,jquery

在JavaScript中实现SM2加密解密，你可以使用第三方库，例如 sm-crypto。以下是一个简单的例子：

首先，你需要安装 sm-crypto：




npm install sm-crypto

然后，你可以使用以下代码进行SM2的加密和解密：




const sm2 = require('sm-crypto').sm2;
const keypair = sm2.generateKeyPairHex(); // 生成密钥对
 
// 公钥和私钥
const publicKey = keypair.publicKey;
const privateKey = keypair.privateKey;
 
// 需要加密的数据
const message = 'Hello, SM2!';
 
// 加密
const encrypted = sm2.doEncrypt(message, publicKey);
console.log('Encrypted message:', encrypted);
 
// 解密
const decrypted = sm2.doDecrypt(encrypted, privateKey);
console.log('Decrypted message:', decrypted);

请确保你的环境支持Node.js，并且已经安装了sm-crypto库。上述代码中，首先生成了一个SM2的密钥对，然后使用公钥对数据进行加密，使用私钥进行解密。

- 阅读更多 -

JavaScript--jQuery框架

System

2024-08-19

所有,jquery

在JavaScript中，jQuery是一个非常流行的库，它提供了一种简化JavaScript开发的方法。以下是一些使用jQuery的示例代码：

选择元素：




$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

在这个例子中，当你点击段落标签（p）时，它会隐藏。

创建HTML元素：




$("<p>Hello, World!</p>").appendTo("body");

在这个例子中，我们创建了一个新的段落标签，并将其添加到了body的末尾。

修改CSS：




$("p").css("color", "blue");

在这个例子中，我们将所有段落标签的文本颜色改为蓝色。

AJAX请求：




$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).append("SUCCESS!");
}).fail(function() {
  $(this).append("ERROR!");
});

在这个例子中，我们发送一个AJAX请求到"test.html"，并根据请求成功或失败在页面上添加相应的消息。

事件监听：




$("p").on("click", function(){
  alert("段落被点击了！");
});

在这个例子中，当点击段落标签时，会弹出一个警告框。

动画效果：




$("p").hide(1000);

在这个例子中，段落标签会在1000毫秒内消失。

获取输入字段的值：




var inputVal = $("#input").val();

在这个例子中，我们获取了ID为"input"的输入字段的值。

在文档加载完成后执行代码：




$(document).ready(function(){
  // 在这里写你的代码...
});

在这个例子中，我们在文档加载完成后执行了一些代码。

以上就是一些使用jQuery的基本例子。jQuery提供了许多其他的功能和方法，可以用于完成更复杂的操作。

- 阅读更多 -

关于使用js，jQuery来实现循环渲染添加多个元素

System

2024-08-19

所有,jquery




// 使用原生JavaScript循环渲染多个元素
function renderElements(parentSelector, elementTag, elementAttributes, count) {
    const parentElement = document.querySelector(parentSelector);
    for (let i = 0; i < count; i++) {
        const element = document.createElement(elementTag);
        Object.keys(elementAttributes).forEach(key => {
            element.setAttribute(key, elementAttributes[key]);
        });
        parentElement.appendChild(element);
    }
}
 
// 使用jQuery循环渲染多个元素
function renderElementsWithJQuery(parentSelector, elementTag, elementAttributes, count) {
    const $parentElement = $(parentSelector);
    for (let i = 0; i < count; i++) {
        const $element = $(`<${elementTag}></${elementTag}>`).attr(elementAttributes);
        $parentElement.append($element);
    }
}
 
// 示例：使用这两个函数
// 假设我们要在id为'my-container'的元素内添加10个div，每个div有一个类名'my-class'和一些文本内容
 
// 使用JavaScript
renderElements('#my-container', 'div', { class: 'my-class' }, 10).forEach(el => {
    el.textContent = 'Some content';
});
 
// 使用jQuery
renderElementsWithJQuery('#my-container', 'div', { class: 'my-class' }, 10).text('Some content');

这个例子展示了如何使用原生JavaScript和jQuery来循环添加多个具有相同属性的元素到指定的父元素中。在原生JavaScript中，我们创建元素并设置其属性，然后将其添加到父元素中。在jQuery中，我们使用更简洁的语法来完成相同的操作。

System

2024-08-19

所有,jquery

打地鼠游戏是一个经典的游戏，我们可以使用JavaScript和jQuery来制作。以下是一个简单的实现：

HTML部分：




<!DOCTYPE html>
<html>
<head>
    <title>打地鼠游戏</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="game-container">
        <div id="game-board"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS部分（style.css）:




#game-container {
    width: 500px;
    height: 500px;
    position: relative;
    user-select: none;
}
 
#game-board {
    width: 100%;
    height: 100%;
    position: absolute;
}
 
.mouse {
    width: 20px;
    height: 20px;
    background-color: #333;
    position: absolute;
    border-radius: 50%;
}

JavaScript部分（script.js）:




$(document).ready(function() {
    const boardSize = 25;
    let gameBoard = $('#game-board');
    let mice = [];
 
    function createBoard() {
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                $('<div>', { class: 'mouse' }).css({
                    top: i * 20,
                    left: j * 20
                }).appendTo(gameBoard);
            }
        }
        mice = $('.mouse');
    }
 
    function initGame() {
        createBoard();
        gameBoard.on('click', '.mouse', function() {
            $(this).hide();
            mice = mice.filter(function(index, mouse) {
                return $(mouse).is(':visible');
            });
            if (mice.length === 0) {
                alert('你赢了！');
                initGame();
            }
        });
    }
 
    initGame();
});

这个游戏的实现包括了创建游戏区域和打地鼠的逻辑。每次点击鼠标，鼠标图标就会消失，如果所有鼠标都被打掉，会弹出警告框提示玩家赢得游戏，并重新初始化游戏。这个例子简单展示了如何使用jQuery来操作DOM元素，并添加事件监听器，实现游戏的交互功能。

System

2024-08-19

所有,jquery

jQuery noConflict() 方法：

jQuery 的 noConflict() 方法用于释放 $ 标识符的控制权，这样其他库就可以使用 $ 标识符。




// 使用 jQuery 的 noConflict() 方法，并将 jQuery 的控制权交给新的变量 jq
var jq = jQuery.noConflict();
 
// 使用 jq 来代替 $ 进行 jQuery 操作
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery 仍在运行！");
    });
});

运用 JSONP：

JSONP（JSON with Padding）是一种跨域请求数据的方式，可以让你在不同域的服务器上获取数据。




// 定义一个用于接收数据的函数
function handleResponse(data) {
    console.log(data);
}
 
// 创建一个 script 元素，并设置其 src 属性为跨域请求的 URL
var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
 
// 将 script 元素添加到文档中
document.body.appendChild(script);

在这个例子中，我们假设 http://example.com/api 是一个跨域的 API 接口，它会根据传递的 callback 参数调用 handleResponse 函数，并将数据作为参数传递。这样我们就可以在不违反同源策略的情况下获取到跨域的数据。

- 阅读更多 -

JS数组中filter方法的使用实例

System

2024-08-19

所有,typescript




// 定义一个数组，包含一些整数
const numbers = [4, 2, 7, 8, 32, 6, 12, 7, 9];
 
// 使用filter方法筛选出数组中的偶数
const evenNumbers = numbers.filter(number => number % 2 === 0);
 
console.log(evenNumbers); // 输出: [2, 8, 6, 12]
 
// 使用filter方法结合箭头函数筛选出数组中大于10的数字
const greaterThanTen = numbers.filter(number => number > 10);
 
console.log(greaterThanTen); // 输出: [32, 12, 9]

这段代码首先定义了一个包含整数的数组numbers。使用filter方法两次筛选出数组中的偶数和大于10的数字，并分别将结果输出到控制台。这是一个简单的使用filter方法的例子，展示了如何利用这个方法来筛选数组中满足特定条件的元素。

System

2024-08-19

所有,typescript




// 封装函数以处理日期
function handleDate(date, type) {
  const newDate = new Date(date);
  switch (type) {
    case 'minusDay':
      newDate.setDate(newDate.getDate() - 1);
      break;
    case 'minusMonth':
      newDate.setMonth(newDate.getMonth() - 1);
      break;
    case 'minusYear':
      newDate.setFullYear(newDate.getFullYear() - 1);
      break;
    default:
      break;
  }
  return newDate;
}
 
// 格式化日期函数
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
}
 
// 示例：减去一天
const yesterday = handleDate(new Date(), 'minusDay');
console.log(formatDate(yesterday));
 
// 示例：减去一月
const lastMonth = handleDate(new Date(), 'minusMonth');
console.log(formatDate(lastMonth));
 
// 示例：减去一年
const lastYear = handleDate(new Date(), 'minusYear');
console.log(formatDate(lastYear));

这段代码定义了两个函数：handleDate 和 formatDate。handleDate 根据传入的类型（'minusDay', 'minusMonth', 'minusYear'）来处理日期。formatDate 用于将日期格式化为 'YYYY-MM-DD' 格式的字符串。然后，我们通过调用这些函数并传入新的日期和类型来获取不同的日期信息。

System

2024-08-19

所有,typescript




// 引入Next.js的测试工具和React Testing Library
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
 
// 引入需要测试的组件
import ExampleComponent from '../components/ExampleComponent';
 
// 使用describe定义测试套件
describe('ExampleComponent 组件的测试', () => {
  // 使用test定义测试案例
  test('点击按钮后，页面上的文本会更新', () => {
    // 使用render方法渲染组件
    render(<ExampleComponent />);
    
    // 使用screen.getByRole获取按钮元素
    const button = screen.getByRole('button', { name: /点击我/i });
    // 使用screen.getByText获取文本元素
    const text = screen.getByText(/初始文本/i);
    
    // 使用userEvent.click模拟用户点击事件
    userEvent.click(button);
    
    // 使用toBeInTheDocument断言元素是否在文档中
    expect(text).toBeInTheDocument();
    // 断言文本是否更新
    expect(text).toHaveTextContent(/更新后的文本/i);
  });
});

这段代码展示了如何使用Next.js、Jest和React Testing Library来编写一个简单的组件测试案例。它定义了一个测试套件，并在其中创建了一个测试案例，用于验证点击按钮后，页面上的文本是否如预期那样更新。

- 阅读更多 -

JS 解构赋值

System

2024-08-19

所有,javascript

解构赋值是一种表达式，它允许我们将数组或对象的值解压到不同的变量中。在JavaScript中，解构赋值可以用于数组、对象、字符串、以及函数参数。

数组解构




let [a, b, c] = [1, 2, 3];
console.log(a); // 输出1
console.log(b); // 输出2
 
// 可以使用rest运算符获取剩余元素
let [x, ...rest] = [1, 2, 3, 4];
console.log(rest); // 输出[2, 3, 4]
 
// 可以设置默认值，当数组中的值为undefined时，会使用默认值
let [a = 5, b = 7] = [undefined, 2];
console.log(a); // 输出5
console.log(b); // 输出2

对象解构




let {x, y} = {x: 1, y: 2};
console.log(x); // 输出1
console.log(y); // 输出2
 
// 可以使用别名
let {x: a, y: b} = {x: 1, y: 2};
console.log(a); // 输出1
console.log(b); // 输出2
 
// 可以设置默认值
let {x = 5, y = 7} = {x: 1};
console.log(x); // 输出1
console.log(y); // 输出7

字符串解构




const [a, b, c] = 'abc';
console.log(a); // 输出'a'
console.log(b); // 输出'b'

函数参数解构




function add([x, y]) {
  return x + y;
}
console.log(add([1, 2])); // 输出3
 
// 使用剩余参数
function subtract(...[a, b]) {
  return a - b;
}
console.log(subtract(1, 2, 3)); // 输出-1

以上是解构赋值的一些基本用法，它可以极大地简化代码，提高开发效率。

- 阅读更多 -