标签 Javascript 下的文章

vanilla-tilt.js(一个流畅的 3D 倾斜 JavaScript 库，源自 Tilt.js（jQuery 版本）。)

2024-08-21

vanilla-tilt.js 是一个纯 JavaScript 库，用于创建平滑的 3D 倾斜效果。它源自 Tilt.js，后者是一个 jQuery 版本的库。

以下是如何使用 vanilla-tilt.js 的基本示例：

首先，在你的 HTML 文件中包含 vanilla-tilt.js 库。你可以通过 CDN 或者下载到本地后引入。




<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>

接着，确保你的 HTML 元素有一个类名或者 ID，以便于初始化倾斜效果。




<div class="tilt-element">Tilt Me</div>

最后，使用 JavaScript 初始化倾斜效果。




// 通过类名初始化
const tiltElement = document.querySelector('.tilt-element');
vanillaTilt.init(tiltElement);
 
// 或者通过选择器初始化多个元素
const tiltElements = document.querySelectorAll('.tilt-element');
tiltElements.forEach(element => vanillaTilt.init(element));

这样就完成了 vanilla-tilt.js 的基本使用。你还可以通过传递选项来自定义效果，例如：




vanillaTilt.init(element, {
  max: 25, // 最大倾斜度
  startX: 50, // 初始 X 轴倾斜度
  startY: 50, // 初始 Y 轴倾斜度
  perspective: 300 // 透视距离
});

vanilla-tilt.js 提供了丰富的选项和事件，可以帮助你创建各种各样的 3D 倾斜效果。

- 阅读更多 -

JS | 获取当前点击的是第几个元素

System

2024-08-21

所有,jquery

要获取当前点击的是第几个元素，可以在点击事件处理函数中使用event.target来获取被点击的元素，然后使用NodeList.prototype.indexOf()方法来找到它在其父元素的子元素中的索引。

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




// 假设我们有一个包含多个子元素的父元素
const parentElement = document.getElementById('parent');
 
// 为父元素的所有子元素添加点击事件监听器
parentElement.addEventListener('click', function(event) {
    // event.target 是被点击的元素
    const childElement = event.target;
 
    // 获取被点击元素在父元素中的索引
    const index = Array.prototype.indexOf.call(parentElement.children, childElement);
 
    // 输出索引
    console.log('你点击了第 ' + (index + 1) + ' 个元素。');
});

在这个例子中，当你点击#parent元素中的任何一个子元素时，都会触发事件，并输出你点击的是第几个子元素。注意，indexOf()方法返回的索引是从0开始的，所以在输出时加1将其转换为从1开始的索引。

System

2024-08-21

所有,jquery

以下是一个简化的代码示例，展示了如何使用jQuery和ECharts创建一个简单的中国地图，点击省份后弹出该省份的城市地图。




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 中国省市地图</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <!-- 引入 jQuery 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 地图数据
        var mapData = {};
        mapData['北京'] = []; // 假设北京没有下级城市
        mapData['上海'] = []; // 假设上海没有下级城市
        mapData['广东'] = ['广州', '深圳', '佛山', '佛门'];
        // ... 其他省份和城市数据
 
        // 指定图表的配置项和数据
        var option = {
            series: [{
                type: 'map',
                map: 'china'
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
        // 点击事件
        myChart.on('click', function (params) {
            var cityName = params.name;
            var cities = mapData[cityName];
            if (cities && cities.length > 0) {
                // 创建城市地图的 ECharts 实例
                var cityChart = echarts.init(document.createElement('div'));
                cityChart.setOption({
                    series: [{
                        type: 'map',
                        map: 'china',
                        data: cities.map(function (city) {
                            return {
                                name: city,
                                value: Math.round(Math.random() * 1000)
                            };
                        })
                    }]
                });
                // 显示城市地图
                document.body.appendChild(cityChart.getDom());
                // 弹出地图
                cityChart.showLoading();
                setTimeout(function () {
                    cityChart.hideLoading();
                }, 1000);
            }
        });
 
        // 为了简化示例，这里使用了定时器来隐藏加载动画，实际使用时应该在数据加载完成后隐藏
    </script>
</body>
</html>

这段代码创建了一个基础的中国地图，并且当用户点击某个省份时，会检查是否有下级城市地图，如果有，则会创建一个新的ECharts实例来显示这些城市的数据。这里使用了一个简化的mapData对象来表示省份和城市之间的关系，实际应用中可以通过AJAX从服务器获取动态数据。

- 阅读更多 -

js、jquery、Bootstrap实现拖拽上传文件

System

2024-08-21

所有,jquery

要使用JavaScript、jQuery和Bootstrap实现拖拽上传文件，你可以使用HTML5的拖放API来实现拖拽功能，并结合FormData对象上传文件。以下是一个简单的实现示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag and Drop File Upload</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="alert alert-success d-none" role="alert">
            File uploaded successfully!
        </div>
 
        <div class="drag-drop-area p-5 mb-4 border rounded" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
            Drop files here...
        </div>
 
        <button class="btn btn-primary" onclick="uploadFiles()">Upload</button>
    </div>
 
    <script>
        // 允许拖放
        function allowDrop(ev) {
            ev.preventDefault();
        }
 
        // 拖动进入
        function dragEnter(ev) {
            $(ev.target).addClass('bg-primary text-white');
        }
 
        // 拖动离开
        function dragLeave(ev) {
            $(ev.target).removeClass('bg-primary text-white');
        }
 
        // 拖放
        function drop(ev) {
            ev.preventDefault();
            $(ev.target).removeClass('bg-primary text-white');
 
            var files = ev.dataTransfer.files; // 获取拖放的文件
            // 处理文件
            // ...
        }
 
        // 上传文件
        function uploadFiles() {
            var formData = new FormData();
            var files = $('.drag-drop-area').data('files'); // 获取拖放的文件
 
            for (var i = 0; i < files.length; i++) {
                formData.append('files[]', files[i]);
            }
 
            $.ajax({
                url: 'your_upload_script_endpoint.php', // 替换为你的上传脚本地址
                type: 'POST',
                data: formData,
                processData: false,  // 告诉jQuery不要处理发送的数据
                contentType: false,  // 告诉jQuery不要设置内容类型头
                success: function(response) {
                    $('.alert-success').removeClass('d-none');
                    // 处理成功响应
                    // ...
                },
                error: function() {
                    // 处理错误
                    // ...
                }
            });
        }
    </script>
</body>
</html>

PHP部分（

- 阅读更多 -

2.electron之纯原生js/jquery的桌面应用程序（应用篇）

System

2024-08-21

所有,jquery

创建一个简单的Electron应用，使用纯原生的JavaScript或者jQuery来构建用户界面。

首先，确保你已经安装了Node.js和npm。

创建一个新的项目文件夹，并在命令行中运行以下命令来初始化一个新的npm项目：




mkdir my-electron-app
cd my-electron-app
npm init -y

安装Electron作为开发依赖项：




npm install electron --save-dev

在项目根目录下创建一个名为main.js的文件，它将作为你的主进程逻辑：




const { app, BrowserWindow } = require('electron');
 
function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');
}
 
app.whenReady().then(createWindow);

在项目根目录下创建一个名为index.html的文件，它将作为你的界面模板：




<!DOCTYPE html>
<html>
<head>
  <title>Electron App</title>
</head>
<body>
  <h1>Hello Electron!</h1>
  <!-- 这里可以添加你的原生JavaScript或jQuery代码 -->
</body>
</html>

在package.json中添加一个启动脚本：




"scripts": {
  "start": "electron ."
}

最后，在命令行中运行你的应用：




npm start

这样你就有了一个简单的Electron应用，可以在其中使用原生JavaScript或jQuery来构建用户界面。如果你想要使用jQuery，确保你在main.js中的BrowserWindow配置中将nodeIntegration设置为true，这样就可以在渲染进程中使用require来引入jQuery。

System

2024-08-21

所有,jquery




// 首先，确保你已经在HTML中引入了Bootstrap的CSS和JavaScript库，以及jQuery库。
// 然后，在HTML中定义一个圆形进度条：
 
<div class="progress progress-circle">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    <span class="sr-only">0% 完成</span>
  </div>
</div>
 
// 接下来，使用jQuery来设置进度条的值：
 
$(document).ready(function() {
  // 假设我们要设置进度条的值为60%
  var progressValue = 60; // 进度条的值
  $('.progress-bar').css('width', progressValue + '%'); // 设置进度条的宽度
  $('.progress-bar').attr('aria-valuenow', progressValue); // 更新ARIA属性的值
  $('.progress-bar span').text(progressValue + '% 完成'); // 更新文本显示的进度信息
});

这段代码演示了如何使用jQuery来设置一个圆形进度条的值。首先，我们通过CSS设置了进度条的样式。然后，在jQuery的$(document).ready()函数中，我们通过修改进度条的宽度（对应于进度条的百分比）和ARIA属性来更新进度条的显示。最后，我们还更新了进度条内部span标签的文本，以显示当前的进度值和状态。

System

2024-08-21

所有,jquery

以下是一个简单的使用Bootstrap创建的响应式网页，用于展示一个静态的蛋糕信息。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Cake Website</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Cake Shop</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
 
    <main role="main" class="container">
        <div class="starter-template">
            <h1>Delicious Cake</h1>
            <p class="lead">Our special cake is made with love and fresh ingredients.</p>
            <img src="cake.jpg" alt="Cake" class="img-fluid">
            <div class="mt-4">
                <h2>Cake Details</h2>
                <ul>
                    <li>Ingredients: Butter, Flour, Eggs, etc.</li>
                    <li>Allergen Info: None</li>
                    <li>Calories: 1000</li>
                </ul>
            </div>
        </div>
    </main>
 
    <footer class="footer">
        <div class="container">
            <span class="text-muted">Copyright © 2021 Cake Shop</span>
        </div>
    </footer>
 
    <!-- 引入jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script

- 阅读更多 -

JS对象转数组

System

2024-08-21

所有,jquery

要将JavaScript对象转换为数组，可以使用Object.keys(), Object.values(), 或 Object.entries() 方法，取决于你需要得到键、值，或者键和值。




// 假设有如下对象
const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};
 
// 将对象的键转换为数组
const keysArray = Object.keys(obj); // ['key1', 'key2', 'key3']
 
// 将对象的值转换为数组
const valuesArray = Object.values(obj); // ['value1', 'value2', 'value3']
 
// 将对象的键值对转换为数组，数组中是键值对的数组
const entriesArray = Object.entries(obj); // [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']]

选择使用哪个方法取决于你的具体需求。

- 阅读更多 -

靡语IT: JQuery-JavaScript代码库-初识篇

System

2024-08-21

所有,jquery

以下是一个简单的示例，展示了如何使用jQuery来简化JavaScript代码，从而实现同样的功能：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 使用jQuery为id为"myButton"的按钮添加点击事件监听器
            $('#myButton').click(function() {
                // 使用jQuery为id为"myText"的元素的文本内容设置为"Hello, jQuery!"
                $('#myText').text('Hello, jQuery!');
            });
        });
    </script>
</head>
<body>
 
    <button id="myButton">点击我</button>
    <p id="myText">等待点击...</p>
 
</body>
</html>

这段代码中，我们使用jQuery选择器$('#myButton')和$('#myText')来选取DOM元素，并通过.click()和.text()方法分别为按钮添加点击事件和修改文本内容，这比原生JavaScript要简洁得多。

- 阅读更多 -

js 模拟回车模拟键盘，给input框输入值触发回车事件

System

2024-08-21

所有,jquery

在JavaScript中，你可以使用Event构造函数来模拟键盘事件，包括回车事件。以下是一个例子，展示如何给一个input框输入值并触发回车事件：




// 获取input元素
var input = document.getElementById('myInput');
 
// 输入值
input.value = 'Hello, World!';
 
// 创建并触发回车事件
var enterEvent = new KeyboardEvent('keydown', {
  key: 'Enter',
  keyCode: 13,
  which: 13
});
 
// 分发回车事件到input元素
input.dispatchEvent(enterEvent);

HTML部分：




<input type="text" id="myInput">

请注意，在某些浏览器中，特别是在浏览器的更严格的安全设置中，可能需要在一个用户交互的上下文中（例如点击事件处理程序中）来模拟键盘事件，以避免安全错误。

- 阅读更多 -