Tech Blog

2024-08-13




<!DOCTYPE html>
<html>
<head>
    <title>图片上传预览</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function previewImages() {
            var preview = document.querySelector('#image-preview');
            var files = document.querySelector('input[type=file]').files;
            function readAndPreview(file) {
                // 确保`file.name`匹配我们想要的图片类型
                if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
                    var reader = new FileReader();
                    reader.addEventListener("load", function() {
                        var image = new Image();
                        image.height = 100; // 设置图片的高度
                        image.title = file.name; // 设置title为文件名
                        image.src = this.result; // `this.result`是base64编码的图片
                        preview.appendChild(image); // 将图片添加到预览容器中
                    }, false);
                    reader.readAsDataURL(file);
                }
            }
            if (files) {
                [].forEach.call(files, readAndPreview);
            }
        }
    </script>
</head>
<body>
    <input type="file" onchange="previewImages()" multiple>
    <div id="image-preview"></div>
</body>
</html>

这段代码使用了HTML5的File API来读取用户选择的图片文件，并使用FileReader来转换这些文件为可以在网页上显示的base64编码的图片URL。然后，它将每个图片预览添加到页面上的一个容器中。这个例子不包括上传到后台的部分，因为这涉及到服务器端的处理，通常需要使用JavaScript的XMLHttpRequest或现代的fetch API来完成。

- 阅读更多 -

JS垃圾回收机制（GC）

System

2024-08-13

所有,html5

JavaScript 的垃圾收集机制是自动管理内存的一种方式，可以帮助开发者避免常见的内存泄漏问题。它的工作原理是当变量进入环境（比如在函数中声明一个变量）时，变量被标记为“在使用”，而当变量离开环境时，则被标记为“可回收”。

JavaScript 中常见的垃圾收集方式有两种：标记清除（Mark-and-Sweep）和引用计数（Reference Counting）。

标记清除：当变量进入环境时，添加到环境的索引中，当变量离开环境时，从环境的索引中删除。垃圾回收器在运行时会给存储在内存中的所有变量都加上标记，然后去掉环境索引中的变量以及被环境索引中的变量所引用的变量的标记。之后再将没有标记的变量回收。
引用计数：此方法记录每个值的引用次数。垃圾收集器会在运行时给所有的变量打上标记，然后去除被全局变量引用的变量，以及被全局变量引用的对象所引用的变量。之后，再将没有标记的变量回收。

但是，JavaScript 默认使用的是标记清除方式。

以下是一个简单的例子，展示了如何在 JavaScript 中声明一个变量，并在垃圾收集环境中进行标记：




function createPerson(name) {
  var person = { name: name, age: 29 };
  return person;
}
 
var john = createPerson('John'); // 标记为“在使用”
 
// 当 john 离开此环境，它所引用的对象就可以被垃圾收集器回收了

在这个例子中，person 对象在 createPerson 函数内被创建，当这个函数执行完毕后，person 对象已经不再被任何外部引用，因此它将被视为垃圾收集器的回收对象。

需要注意的是，垃圾收集器是按照某种算法定期运行的，而不是实时的，所以在特定的时间点，可能仍然有一些未被回收的已经不再使用的对象。因此，在编写 JavaScript 代码时，应当避免产生内存泄漏，例如，意外地保留了对某个对象的引用，或者是在一个闭包内部无意中保留了对某个对象的引用。

- 阅读更多 -

基于flask框架基于HTML5的网络课程学习系统

System

2024-08-13

所有,html5

由于这个项目涉及的内容较多且涉及到作者的学术研究，我无法提供完整的代码实现。但我可以提供一个基于Flask框架的简单Web应用程序的代码示例，该应用程序可能用于创建一个类似的网络课程学习系统。




from flask import Flask, render_template
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
if __name__ == '__main__':
    app.run(debug=True)

在这个例子中，我们创建了一个简单的网页，当用户访问根URL时会显示一个页面。这个系统的其余部分，如数据库交互、课程内容管理等，需要根据具体需求进行开发。

请注意，为了保持答案的精简，我省略了HTML模板文件和数据库配置等细节。实际的网络课程学习系统需要更多的功能和详细设计。

由于这个项目涉及到学术研究，如果你需要实现这样的系统，建议你联系原作者或者通过学术文献来获取完整的设计和实现细节。

- 阅读更多 -

VueVite和HTML5之间的关系

System

2024-08-13

所有,html5

Vue 3、Vite 和 HTML 5 都是现代前端开发中的关键技术。Vue 3 是一个用于构建用户界面的渐进式JavaScript框架，Vite 是一个基于Rollup的构建工具，旨在为现代Web项目提供更快的开发体验。HTML 5 是用于定义网页内容的标准标记语言。

关系：Vue 3 和 Vite 可以帮助你更高效地开发和构建现代的Web应用程序，而 HTML 5 定义了你应用程序的结构和内容。Vite 可以配置为构建 Vue 3 项目，并且可以使用 HTML 5 标准来创建页面模板。

以下是一个简单的 Vue 3 + Vite 项目的创建和运行步骤：

确保你有 Node.js 和 npm 安装。
使用命令行工具运行以下命令创建一个新的 Vue 3 项目：




npm init vite@latest my-vue-app --template vue-ts




cd my-vue-app

安装依赖：




npm install

运行开发服务器：




npm run dev

以上步骤会创建一个基础的 Vue 3 项目，并且使用 Vite 作为构建工具。在浏览器中打开提供的地址，你将看到一个基础的 Vue 页面，这个页面是由 HTML 5 标准和 Vue 3 组件构建的。

- 阅读更多 -

认识jQuery

System

2024-08-13

所有,jquery

jQuery是一个快速、简洁的JavaScript框架，它使得HTML文档 traversing, event handling, animation 和Ajax等一系列的操作变得更加简单，而不用原生的JavaScript写大量的代码。

解决方案：

引入jQuery库

在使用jQuery之前，首先需要在HTML文档中引入jQuery库。可以通过CDN获取，也可以将jQuery库下载到本地，然后通过相对路径或者绝对路径引入。




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

使用jQuery选择器

jQuery提供了强大的选择器，可以通过元素的id、class、属性等选择元素，并对其进行操作。




// 选择id为"myId"的元素
$('#myId').doSomething();
 
// 选择所有的class为"myClass"的元素
$('.myClass').doSomething();
 
// 选择所有的<p>元素
$('p').doSomething();

使用jQuery事件处理

jQuery提供了丰富的事件处理函数，可以方便地对元素的事件进行绑定。




// 为id为"myId"的元素绑定click事件
$('#myId').click(function() {
    // 处理函数
});

使用jQuery效果

jQuery提供了一系列的动画效果，可以让页面的元素移动、变化等操作变得简单。




// 淡入id为"myId"的元素
$('#myId').fadeIn();
 
// 滑下id为"myId"的元素
$('#myId').slideDown();

使用jQuery AJAX

jQuery提供了方便的AJAX请求方式，可以方便地进行异步请求。




$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',
    success: function(res) {
        // 请求成功的回调函数
    },
    error: function(err) {
        // 请求失败的回调函数
    }
});

链式调用

jQuery允许链式调用，可以在一行内完成多个操作。




$('#myId')
    .doSomething()
    .doAnotherThing()
    .andAnother()
    .andMore();

使用jQuery的工具方法

jQuery还提供了很多实用的工具方法，如类操作、数组操作、对象操作等。




// 检查id为"myId"的元素是否有"myClass"类
if ($('#myId').hasClass('myClass')) {
    // 有"myClass"类的处理
}

学习jQuery插件

jQuery有大量的插件，可以用于完成各种特殊的需求，如表单验证、日期选择、图片裁剪等。




// 为id为"myForm"的表单使用表单验证插件
$('#myForm').validate();

总结：

jQuery是一个强大的JavaScript库，它提供了一种简洁的方式来处理HTML文档、事件、动画和AJAX请求。通过学习和使用jQuery，开发者可以更高效地编写和维护JavaScript代码。

- 阅读更多 -

HTML Jquery个人笔记

System

2024-08-13

所有,jquery

以下是一个简单的HTML页面示例，使用jQuery来添加一个删除按钮，用于删除用户输入的文本。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人笔记</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #note-list {
            width: 300px;
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .note {
            margin-bottom: 10px;
        }
        .note-content {
            margin-left: 20px;
        }
        .delete-button {
            cursor: pointer;
            background-color: #ff0000;
            color: white;
            padding: 2px 5px;
            border: none;
            border-radius: 3px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
 
<div id="note-list">
    <!-- 这里将显示用户的笔记 -->
</div>
 
<textarea id="note-input" placeholder="添加笔记"></textarea>
<button id="add-note">添加笔记</button>
 
<script>
    $(document).ready(function() {
        $('#add-note').click(function() {
            var noteContent = $('#note-input').val().trim();
            if (noteContent) {
                var $note = $('<div>').addClass('note').append(
                    $('<div>').addClass('note-content').text(noteContent)
                ).append(
                    $('<button>').addClass('delete-button').text('删除').click(function() {
                        $(this).parent().remove();
                    })
                );
                $('#note-list').append($note);
                $('#note-input').val('');
            }
        });
    });
</script>
 
</body>
</html>

这个示例中，我们使用了jQuery来处理事件，使得用户可以添加和删除个人笔记。当用户在文本区域输入笔记并点击“添加笔记”按钮后，笔记内容将被添加到页面上的#note-list容器中，每条笔记下面都有一个删除按钮，点击可以删除对应的笔记。

- 阅读更多 -

JQuery中Class选择器怎么用(htmlclass选择器)

System

2024-08-13

所有,jquery

在jQuery中，Class选择器是通过元素的class属性中的一个类名来选择元素。如果一个元素有多个类，你可以选择任何一个来获取这个元素。

基本语法如下：




$(".classname")

这里的.classname是你要选择的类的名称。

解决方案和实例代码：

选择具有特定类的所有元素：




<div class="myClass">Div 1</div>
<div class="myClass">Div 2</div>
<div class="myClass">Div 3</div>




$(document).ready(function(){
  $(".myClass").css("color", "red");
});

在上面的例子中，所有具有myClass类的div元素的文本颜色都会变成红色。

选择具有多个类的特定类的元素：




<div class="class1 class2">Div 1</div>
<div class="class1">Div 2</div>
<div class="class2">Div 3</div>




$(document).ready(function(){
  $(".class2").css("color", "red");
});

在上面的例子中，只有具有class2类的第一个div元素的文本颜色会变成红色，因为class2不是它的唯一类。

选择具有特定类的特定子元素：




<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>




$(document).ready(function(){
  $(".parent .child").css("color", "red");
});

在上面的例子中，div元素中具有child类的子元素的文本颜色会变成红色。这是因为选择器是在空格分隔的两个类名之后使用的，所以它只选择直接的子元素。

注意：在所有这些例子中，jQuery库必须在使用任何jQuery代码之前被包含在页面中。这可以通过在<head>标签中添加以下行来实现：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

System

2024-08-13

所有,jquery

由于篇幅限制，这里提供一个简化版的购物车实现，包含基本的功能和必要的注释。

HTML 部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Shopping Cart</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
 
<div id="shopping-cart">
  <h2>Your Shopping Cart</h2>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Remove</th>
      </tr>
    </thead>
    <tbody>
      <!-- Cart items will be added here -->
    </tbody>
  </table>
  <button id="checkout">Checkout</button>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS 部分（style.css）:




#shopping-cart {
  width: 300px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ddd;
}
 
#shopping-cart table {
  width: 100%;
}
 
#shopping-cart th, #shopping-cart td {
  border: 1px solid #ddd;
  padding: 5px;
}
 
#checkout {
  margin-top: 10px;
}

JavaScript 部分（script.js）:




$(document).ready(function() {
  // 假设有一个产品列表
  var products = [
    { name: 'Product 1', price: 9.99 },
    { name: 'Product 2', price: 19.99 },
    // 更多产品...
  ];
 
  // 添加到购物车的函数
  function addToCart(product) {
    var row = $('<tr>');
    row.append($('<td>').text(product.name));
    row.append($('<td>').text('1')); // 默认数量为 1
    row.append($('<td>').text(product.price.toFixed(2)));
    row.append($('<td>').append($('<button>').text('Remove').on('click', function() {
      row.remove();
    })));
    $('#shopping-cart tbody').append(row);
  }
 
  // 模拟添加到购物车
  addToCart(products[0]); // 添加第一个产品到购物车
 
  // 检出按钮的点击事件
  $('#checkout').on('click', function() {
    alert('Checkout functionality is not implemented yet.');
  });
});

这个简化版的购物车实现了基本的添加商品到购物车的功能，并且有一个检出按钮，但是没有实现检出的功能。你可以根据实际需求扩展这个购物车，比如实现检出逻辑、处理购物车中的商品数量更新、与服务器端的同步等。

- 阅读更多 -

jQuery复习——选择器

System

2024-08-13

所有,jquery

在jQuery中，选择器是用来选择DOM元素的。jQuery提供了多种选择器，包括基本选择器、层次选择器、过滤选择器和表单选择器等。

以下是一些常用的jQuery选择器示例代码：

基本选择器：




// 选择id为"myId"的元素
$('#myId');
 
// 选择所有的p元素
$('p');
 
// 选择class为"myClass"的所有元素
$('.myClass');
 
// 选择所有的元素
$('*');

层次选择器：




// 选择所有的子元素
$('parent > child');
 
// 选择所有的后代元素
$('ancestor descendant');
 
// 选择下一个兄弟元素
$('prev + next');
 
// 选择之后所有的兄弟元素
$('prev ~ siblings');

过滤选择器：




// 选择第一个元素
$('selector:first');
 
// 选择最后一个元素
$('selector:last');
 
// 选择非空元素
$('selector:not(.exclude)');
 
// 选择索引为index的元素
$('selector:eq(index)');
 
// 选择大于index的元素
$('selector:gt(index)');
 
// 选择小于index的元素
$('selector:lt(index)');
 
// 选择所有可见的元素
$('selector:visible');
 
// 选择所有隐藏的元素
$('selector:hidden');

表单选择器：




// 选择所有的单选按钮
$('input:radio');
 
// 选择所有的复选框
$('input:checkbox');
 
// 选择所有的文本框
$('input:text');
 
// 选择所有被选中的option元素
$('option:selected');

使用属性选择器：




// 选择具有特定属性的元素
$('selector[attribute]');
 
// 选择具有特定属性值的元素
$('selector[attribute=value]');
 
// 选择具有特定属性值的元素，该值不区分大小写
$('selector[attribute=value] i');
 
// 选择属性值开始于特定值的元素
$('selector[attribute^=value]');
 
// 选择属性值结束于特定值的元素
$('selector[attribute$=value]');
 
// 选择属性值包含特定子串的元素
$('selector[attribute*=value]');

使用伪类选择器：




// 选择所有的:link元素
$('selector:link');
 
// 选择所有的:visited元素
$('selector:visited');
 
// 选择所有的:active元素
$('selector:active');
 
// 选择所有的:hover元素
$('selector:hover');
 
// 选择所有的:focus元素
$('selector:focus');
 
// 选择所有的:animated元素
$('selector:animated');

使用选择器组：




// 用逗号分隔多个选择器
$('selector1, selector2, selector3');

使用自定义选择器：




// 使用jQuery.extend()添加自定义选择器
$.extend($.expr[':'], {
    custom: function(element, index, meta, stack) {
        // 自定义选择逻辑
    }
});
 
// 使用自定义选择器
$('selec

- 阅读更多 -

使用Swiper插件创建简单的自动轮播效果（基于jQuery）

System

2024-08-13

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Swiper 轮播示例</title>
    <link rel="stylesheet" href="path/to/swiper-bundle.min.css">
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
 
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
 
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
 
<script src="path/to/jquery.min.js"></script>
<script src="path/to/swiper-bundle.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        // 自动播放设置
        autoplay: {
            delay: 2500,// 自动播放的时间间隔（毫秒）
            disableOnInteraction: false,// 用户操作后是否停止自动播放
        },
        // 其他需要的配置...
    });
</script>
</body>
</html>

在这个例子中，我们创建了一个简单的Swiper轮播，通过Swiper的构造函数初始化了一个轮播实例，并通过autoplay选项配置了自动播放的行为。这个例子展示了如何在HTML中设置轮播的结构，并在JavaScript中初始化Swiper实例。

- 阅读更多 -