System 发布的文章

2024-08-08

以下是一个简单的jQuery字母消除游戏的实现示例。这个示例使用了一个简单的游戏逻辑，其中玩家需要点击连续相同字母的方块，使其消失，每消除一行或一列所有方块，玩家将得分。

HTML 部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letter Elimination Game</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
 
<div class="game-container">
    <div class="grid-container">
        <!-- 动态生成游戏方块 -->
    </div>
    <div id="score">Score: 0</div>
</div>
 
</body>
</html>

CSS 部分（style.css）:




.game-container {
    width: 500px;
    margin: auto;
    text-align: center;
}
 
.grid-container {
    width: 500px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 5px;
}
 
.grid-item {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
}
 
#score {
    margin-top: 20px;
}

jQuery 部分（script.js）:




$(document).ready(function() {
    var score = 0;
    var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
 
    function generateGrid() {
        var gridHtml = '';
        for (var i = 0; i < 10; i++) {
            gridHtml += '<div class="grid-row">';
            for (var j = 0; j < 7; j++) {
                var randomLetter = letters[Math.floor(Math.random() * letters.length)];
                gridHtml += '<div class="grid-item" data-letter="' + randomLetter + '">' + randomLetter + '</div>';
            }
            gridHtml += '</div>';
        }
        $('.grid-container').html(gridHtml);
    }
 
    generateGrid();
 
    $('.grid-item').on('click', function() {
        var $this = $(this);
        var letter = $this.data('letter');
        var $row = $this.parent();
        var $column = $this.siblings();
        var clearedRow = true;
        var clearedColumn = true;
 
        // 检查行
        $row.find('.grid-item').each(function() {
            if ($(this).data('letter') !== letter) {
                clearedRow = false;
                return false; // 停止循环
            }
        });
 
        // 检查列
        $('.grid-container').find('.grid-item').each(function() {
            if ($(this).data('letter') !== letter) {
                clearedColumn = false;
                return false; // 停止循环
            }
        });
 
        // 如果是连续相同的字母，则清除
        if (clearedRow || clearedColumn) {
            $row.

- 阅读更多 -

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加密来确保密码的安全性。在实际应用中，密码应该存储为加密后的字符串，并在用户登录时进行加密验证。

System

2024-08-08

所有,jquery

MTControl是一个开源库，旨在提供一种简单而优雅的方式来控制iOS应用中的UIControl对象。它提供了一种类似于jQuery的链式语法，可以轻松地为UI控件添加事件处理程序和配置属性。

以下是一个使用MTControl库的示例代码：




// 导入MTControl头文件
#import "MTControl.h"
 
// 假设有一个UIButton叫button
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
 
// 使用MTControl为button添加事件处理和配置
[MTControl controlWithObject:button]
    // 设置button的标题
    .setTitle(@"点击我", forState:UIControlStateNormal)
    // 设置button的标题颜色
    .setTitleColor([UIColor blueColor], forState:UIControlStateNormal)
    // 添加点击事件
    .onControlEvent(UIControlEventTouchUpInside, ^{
        NSLog(@"按钮被点击了！");
    });
 
// 将button添加到视图上
[self.view addSubview:button];

在这个例子中，我们首先导入了MTControl.h头文件，然后创建了一个UIButton对象。接着，我们使用MTControl来包装这个button对象，并链式调用了一系列方法来配置button的属性和添加事件处理程序。最后，我们将button添加到当前视图中。

这个示例展示了如何使用MTControl库来简化iOS开发中UIControl对象的操作，提高代码的可读性和可维护性。

- 阅读更多 -

JQuery中属性选择器

System

2024-08-08

所有,jquery

在jQuery中，属性选择器可以用来选择具有特定属性的元素，或者属性值符合某种模式的元素。属性选择器的语法是：$('element[attribute="value"]')。

例如，如果你想选择所有具有data-type属性的元素，你可以使用以下代码：




$('[data-type]')

如果你想选择data-type属性值为text的所有元素，你可以使用以下代码：




$('[data-type="text"]')

如果你想选择data-type属性值包含image的所有元素，你可以使用以下代码：




$('[data-type*="image"]')

这些例子展示了如何使用属性选择器来选择具有特定属性或特定属性值的元素。

- 阅读更多 -

一款漂亮的排班系统界面Html+jQuery「代码片段」

System

2024-08-08

所有,jquery

以下是一个简单的HTML和jQuery代码示例，用于创建一个排班系统的用户界面。这个例子提供了一个基本的界面布局和交互功能，但具体的后端逻辑和数据库设计需要根据实际需求来实现。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排班系统界面</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="schedule-container">
        <h1>排班系统</h1>
        <table id="schedule-table">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>时间段</th>
                    <th>教师</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 排班数据动态生成 -->
            </tbody>
        </table>
        <button id="add-shift">添加排班</button>
    </div>
 
    <script>
        $(document).ready(function() {
            // 假设的数据
            var shifts = [
                // ...
            ];
 
            // 初始化表格
            function initTable(shifts) {
                var rows = '';
                for (var i = 0; i < shifts.length; i++) {
                    rows += '<tr>' +
                                '<td>' + shifts[i].date + '</td>' +
                                '<td>' + shifts[i].time + '</td>' +
                                '<td>' + shifts[i].teacher + '</td>' +
                                '<td><button class="delete-shift">删除</button></td>' +
                            '</tr>';
                }
                $('#schedule-table tbody').html(rows);
            }
 
            // 添加排班
            $('#add-shift').click(function() {
                // 打开一个模态框或者直接跳转到添加页面
                alert('添加排班');
            });
 
            // 删除排班
            $('#schedule-table').on('click', '.delete-shift', function() {
                var shift = $(this).closest('tr').find('td').map(function() {
                    return $(this).text();
                }).get();
                // 模拟删除操作
                alert('删除排班: ' + shift);
                // 实际应用中，这里应该发送请求到后端删除数据
            });
 
            initTable(shifts); // 初始化表格数据
        });
    </script>
</body>
</html>

这段代码提供了一个基本的排班系统界面，并且展示了如何使用jQuery来处理事件。在实际应用中，你需要根据具体需求来扩展和完善这个界面，比如添加模态框来输入排班详情、删除确认对话框、分页功能、搜索排班功能等。同时，你还需要编写后端逻辑来处理数据的添加、删除和展示。

- 阅读更多 -

jquery 设置input不可编辑

System

2024-08-08

所有,jquery

在jQuery中，可以使用attr方法或prop方法来设置input元素为不可编辑。使用attr方法时，可以直接将disabled属性设置为disabled，或者设置readonly属性为readonly。使用prop方法时，应将disabled属性设置为true。

以下是设置input元素不可编辑的示例代码：

使用attr方法设置为不可编辑：




// 设置为禁用
$('input').attr('disabled', 'disabled');
 
// 或者设置为只读
$('input').attr('readonly', 'readonly');

使用prop方法设置为不可编辑：




// 设置为禁用
$('input').prop('disabled', true);

请注意，如果你使用attr方法来设置disabled或readonly属性，这将会在HTML标签上显示为disabled="disabled"或readonly="readonly"。而使用prop方法时，这些属性不会出现在HTML标签中。

- 阅读更多 -

Html + Jquery + Vue前端学习笔记

System

2024-08-08

所有,jquery




<!DOCTYPE html>
<html>
<head>
  <title>Vue学习示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="reverseMessage">反转消息</button>
  </div>
 
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        reverseMessage: function() {
          this.message = this.message.split('').reverse().join('');
        }
      }
    });
  </script>
</body>
</html>

这个示例展示了如何在一个基本的HTML页面中嵌入Vue.js，并创建一个Vue实例来处理页面上的数据和事件。当用户点击按钮时，reverseMessage 方法会被调用，这会反转message数据属性中的字符串，并更新页面上显示的文本。这是学习Vue.js的一个简单入门示例。

- 阅读更多 -

基于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 使用的一个基本示例，实际使用时可以根据需要配置更多选项，如分页的总数、每页显示的项目数等。

System

2024-08-08

所有,jquery

在HTML中，<select>标签用于创建下拉列表。在jQuery中，我们可以使用val()方法获取或设置<select>元素的值。在Thymeleaf模板中，我们可以使用th:field属性绑定模型中的变量到<select>元素。

以下是一些示例：

使用jQuery设置<select>元素的值：

HTML:




<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

jQuery:




$('#mySelect').val('option2'); // 设置选中Option 2

使用Thymeleaf中的th:field绑定<select>元素到模型变量：

HTML (Thymeleaf模板):




<select th:field="*{selectedOption}">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

在这个例子中，*{selectedOption}是一个表达式，它表示模型中的selectedOption属性。当表单提交时，<select>元素选中的值将被绑定到selectedOption属性。

- 阅读更多 -

jquery实现手写签名

System

2024-08-08

所有,jquery

要使用jQuery实现手写签名功能，你可以使用HTML5的<canvas>元素来创建一个绘图区域，并监听鼠标事件来实现签名。以下是一个简单的实现示例：

HTML部分：




<canvas id="signature-pad" width="300" height="150" style="border:1px solid #000000;"></canvas>

jQuery和JavaScript部分：




$(document).ready(function() {
    var canvas = $('#signature-pad')[0];
    var context = canvas.getContext('2d');
    var isDrawing = false;
    var lastX = 0;
    var lastY = 0;
 
    function draw(e) {
        if (!isDrawing) return;
        context.beginPath();
        context.moveTo(lastX, lastY);
        context.lineTo(e.offsetX, e.offsetY);
        context.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
    }
 
    $('#signature-pad')
        .on('mousedown', function(e) {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        })
        .on('mousemove', draw)
        .on('mouseup', function() {
            isDrawing = false;
        })
        .on('mouseleave', function() {
            isDrawing = false;
        });
});

确保在你的页面中引入了jQuery库，并根据需要调整<canvas>的大小。用户在画布上按下鼠标并移动时，就会进行签名。签名完成后，可以获取画布的数据URL来保存或者发送。

- 阅读更多 -