1. 首页
  2. 分类
  3. html
electron-react-boilerplate 打包逻辑浅析 | 如何向公共路径添加脚本并在 html 中添加全局脚本
System
2024-08-12
所有,html



// 在electron-react-boilerplate的package.json中
{
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    // 添加自定义打包脚本
    "custom-pack": "MY_CUSTOM_ENV_VAR=true yarn pack"
  }
}

在这个例子中，我们向electron-react-boilerplate项目的package.json文件中的scripts部分添加了一个名为custom-pack的新脚本。这个脚本会在打包应用程序为目录时设置一个自定义环境变量MY_CUSTOM_ENV_VAR。这样做可以在打包过程中根据需要控制某些行为。

在HTML中使用环境变量，可以通过JavaScript访问process.env对象，如下例所示：




<!-- 在你的HTML文件中 -->
<script>
  // 检查环境变量并在控制台输出
  if (process.env.MY_CUSTOM_ENV_VAR) {
    console.log('自定义环境变量存在：', process.env.MY_CUSTOM_ENV_VAR);
  }
</script>

在这个例子中，我们在HTML文件中的<script>标签内添加了一段JavaScript代码，用于检查在打包脚本中设置的MY_CUSTOM_ENV_VAR环境变量，并在浏览器的控制台中输出结果。这样，开发者可以在不同的打包环境中通过调整环境变量来控制应用的行为。

- 阅读更多 -
基于springboot+mybatis+html+bootstrap+jquery的请假审批管理系统
System
2024-08-12
所有,html

这个请假审批管理系统的源码和SQL数据库脚本不是公开的，因为可能涉及到版权问题和个人隐私。但是，我可以提供一个简化的示例来说明如何构建一个类似的系统。

  1. 使用Spring Boot创建一个Web应用。
  2. 使用MyBatis作为ORM框架来操作数据库。
  3. 使用HTML、Bootstrap和jQuery来构建前端界面。

以下是一个简化的例子，展示了如何定义一个简单的请假实体和一个MyBatis Mapper接口：




// Leave.java (实体类)
public class Leave {
    private Integer id;
    private String employeeId;
    private Date startDate;
    private Date endDate;
    private String reason;
    private String status;
    // 省略getter和setter方法
}
 
// LeaveMapper.java (MyBatis Mapper接口)
public interface LeaveMapper {
    int insertLeave(Leave leave);
    List<Leave> selectAllLeaves();
    Leave selectLeaveById(Integer id);
    int updateLeave(Leave leave);
    int deleteLeave(Integer id);
}

在控制器中，你可以处理请假申请的相关逻辑：




// LeaveController.java (Spring Boot控制器)
@Controller
public class LeaveController {
 
    @Autowired
    private LeaveMapper leaveMapper;
 
    @RequestMapping(value = "/apply-leave", method = RequestMethod.POST)
    public String applyLeave(@ModelAttribute Leave leave) {
        leaveMapper.insertLeave(leave);
        return "leave-application-success";
    }
 
    @RequestMapping(value = "/view-leaves", method = RequestMethod.GET)
    public String viewLeaves(Model model) {
        List<Leave> leaves = leaveMapper.selectAllLeaves();
        model.addAttribute("leaves", leaves);
        return "view-leaves";
    }
 
    // 省略其他控制器方法
}

前端页面可以使用Bootstrap和jQuery来创建一个简单的表单用于请假申请，以及一个用于展示所有请假记录的表格。




<!-- apply-leave.html (请假申请表单) -->
<form action="/apply-leave" method="post">
    <!-- 省略输入字段 -->
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
 
<!-- view-leaves.html (请假记录列表) -->
<table class="table">
    <thead>
        <tr>
            <th>Employee ID</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Reason</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="leave : ${leaves}">
            <td th:text="${leave.employeeId}"></td>
            <td th:text="${#dates.format(leave.startDate, 'yyyy-MM-dd')}"></td>
            <td th:text="${#dates.format(leave.endDate, 'yyyy-MM-dd')}"></td>
            <td th:text="${leave.reason}"></td>
            <td th:text="${leave.status}"></td>
- 阅读更多 -
html+jquery 实现拖拽/点击上传文件
System
2024-08-12
所有,html

以下是一个使用HTML和jQuery实现的简单拖拽上传文件的示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop File Upload</title>
<style>
    #drop_area {
        width: 300px;
        height: 200px;
        border: 2px dashed #aaa;
        margin-bottom: 20px;
        text-align: center;
        line-height: 200px;
        font-size: 20px;
    }
</style>
</head>
<body>
 
<div id="drop_area">将文件拖拽到此处上传</div>
<form id="upload_form" method="post" enctype="multipart/form-data">
    <input type="file" id="file_input" multiple style="display: none;">
</form>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('#drop_area').on('click', function(){
            $('#file_input').click(); // Trigger file input click when clicking on drop area
        });
 
        $('#file_input').on('change', function(){
            var files = $(this).prop('files');
            if (files.length > 0) {
                // 这里可以添加上传文件的逻辑
                console.log("文件已选择，可以上传");
                // 例如使用AJAX上传文件
                // $.ajax({
                //     url: 'your_upload_script_endpoint.php',
                //     type: 'POST',
                //     data: new FormData($('#upload_form')[0]),
                //     processData: false,
                //     contentType: false,
                //     success: function(response) {
                //         console.log(response);
                //     }
                // });
            }
        });
    });
</script>
 
</body>
</html>

这段代码实现了一个可以通过点击或拖拽文件到指定区域来上传文件的功能。当用户点击drop_area时，隐藏的file_input元素会被触发，允许用户选择文件。选择文件后，会通过FormData对象和AJAX上传到服务器。这里没有实现服务器端的上传处理逻辑，需要根据实际情况配置your_upload_script_endpoint.php。

- 阅读更多 -
10 Vue3中v-html指令的用法
System
2024-08-12
所有,html

在Vue 3中，v-html指令用于设置元素的innerHTML。这通常用于将包含HTML标签的字符串渲染为实际的HTML元素。

警告：在使用v-html时，请务必谨慎，因为它会使您的站点易受XSS攻击。只在可信的内容上使用v-html指令。

以下是一个简单的例子，展示如何在Vue 3组件中使用v-html指令：




<template>
  <div v-html="rawHtml"></div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const rawHtml = ref('<p>这是<b>HTML</b>内容</p>');
    return { rawHtml };
  }
};
</script>

在这个例子中，rawHtml是一个包含HTML标签的字符串。使用v-html指令将其渲染到模板中，并在页面上显示为实际的HTML元素，而不是纯文本。

- 阅读更多 -
HTML之表单标签中input的属性type =“password“时“没眼睛”问题（无法主动显示或是隐藏密码）
System
2024-08-12
所有,html

"没眼睛"问题通常指的是在HTML表单中使用type="password"的<input>元素时，输入的密码不显示任何字符，就像没有眼睛一样。这是因为浏览器默认情况下不会显示密码输入字段中的字符。

要解决这个问题，可以通过以下方法：

  1. 使用CSS来改变密码输入框的样式，使其可见。
  2. 使用JavaScript来监听密码输入框的input事件，并动态更新一个额外的文本框来显示输入的密码。

下面是一个使用JavaScript的简单示例，它会在用户输入密码时实时显示密码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Password Visibility</title>
<script>
function togglePassword() {
  var passwordField = document.getElementById("password");
  var passwordVisibility = document.getElementById("passwordVisibility");
 
  if (passwordField.type === "password") {
    passwordField.type = "text";
    passwordVisibility.innerText = "没眼睛";
  } else {
    passwordField.type = "password";
    passwordVisibility.innerText = "有眼睛";
  }
}
</script>
</head>
<body>
<form>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" />
  <span id="passwordVisibility" onclick="togglePassword()">没眼睛</span>
</form>
</body>
</html>

在这个示例中，当用户点击"没眼睛"这个<span>元素时，JavaScript函数togglePassword会被调用，它会切换密码输入框的type属性，从而在"password"和"text"之间切换，从而允许用户看到他们输入的密码。

- 阅读更多 -
HTML实现转盘抽奖的简单通用模板
System
2024-08-12
所有,html

以下是一个HTML模板，用于创建一个简单的转盘抽奖效果。这个模板可以被嵌入到任何网页中，并提供基本的转盘抽奖功能。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转盘抽奖</title>
<style>
  .lottery-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
  }
  .lottery-plate {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to right, #99B898, #D7CE96);
    animation: rotate 4s linear infinite;
  }
  .lottery-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%);
    width: 20px;
    height: 100px;
    background-color: #333;
    border-radius: 10px;
    transform-origin: center bottom;
    animation: rotate-pointer 2s linear infinite;
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotate-pointer {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="lottery-container">
  <div class="lottery-plate">
    <div class="lottery-pointer"></div>
  </div>
</div>
</body>
</html>

这个模板使用了CSS动画来实现转盘和指针的旋转效果。你可以通过调整样式和动画的时长来自定义它们的外观和行为。这个模板是一个基本示例，可以根据实际需求进行扩展和定制。

- 阅读更多 -
HTML meta标签的居然还有这些用途，属性，功能
System
2024-08-12
所有,html

HTML <meta> 标签用于定义文档的元数据，它位于 HTML 文档的头部 <head> 区域。元数据可以包括文档的描述、关键词、作者、检索优化(SEO)等信息。

以下是一些常用的 <meta> 标签的用途、属性和功能：

  1. 指定字符编码：



<meta charset="UTF-8">

这个 <meta> 标签用于指定文档使用的字符编码，默认是 UTF-8，这对于国际化网站非常重要。

  1. 指定浏览器的兼容模式：



<meta http-equiv="X-UA-Compatible" content="IE=edge">

这个 <meta> 标签用于指示 IE 浏览器（主要针对旧版本的 IE 浏览器）使用最新的引擎渲染页面。

  1. 页面刷新与跳转：



<meta http-equiv="refresh" content="5">
<meta http-equiv="refresh" content="5;url=http://www.example.com">

这个 <meta> 标签用于在指定的时间后刷新页面，或者在指定的时间后跳转到新的 URL。

  1. 控制页面缓存：



<meta http-equiv="Cache-Control" content="max-age=3600">

这个 <meta> 标签用于控制页面的缓存策略，比如上面的代码表示页面将被缓存最多 3600 秒。

  1. 定义页面的关键词：



<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

这个 <meta> 标签用于为搜索引擎提供关于页面内容的关键词。

  1. 定义页面的描述：



<meta name="description" content="Free Web tutorials on HTML and CSS">

这个 <meta> 标签用于为搜索引擎提供页面内容的描述。

  1. 移动设备视口设置：



<meta name="viewport" content="width=device-width, initial-scale=1">

这个 <meta> 标签用于指定移动设备的视口宽度和初始缩放比例。

  1. 指定页面的作者：



<meta name="author" content="John Doe">

这个 <meta> 标签用于指定页面的作者。

  1. 定义X-Frame-Options防止点击劫持：



<meta name="x-frame-options" content="DENY">

这个 <meta> 标签用于定义 X-Frame-Options 头部，防止网页被嵌入到其他网站的 iframe 中，防止点击劫持。

  1. 定义页面的过期时间：



<meta http-equiv="expires" content="Wed, 20 Jun 2025 22:33:00 GMT">

这个 <meta> 标签用于定义页面的过期时间，浏览器会根据这个时间来决定是否需要从服务器上重新获取页面内容。

以上是一些常用的 <meta> 标签的用途和功能，实际上 <meta> 标签还有很多其他的属性和用途，可以根据具体需求进行使用。

- 阅读更多 -
静态html设置，ssh免密登录
System
2024-08-12
所有,html

为了实现SSH免密登录，你需要生成一对SSH密钥（公钥和私钥），然后将公钥复制到远程服务器上。以下是实现这一功能的步骤和示例代码：

  1. 在本地计算机上生成SSH密钥对：



ssh-keygen -t rsa
  1. 将生成的公钥复制到远程服务器上（替换user和server_ip为实际的用户名和服务器IP地址）：



ssh-copy-id user@server_ip
  1. 现在，当你尝试SSH到服务器时，应该不需要输入密码。

确保ssh-copy-id命令在你的本地机器上可用，或者你可以手动将公钥内容复制到远程服务器的~/.ssh/authorized_keys文件中。

如果你的环境中没有ssh-copy-id命令，你可以手动完成这一过程：




# 将本地的公钥内容复制到远程服务器
cat ~/.ssh/id_rsa.pub | ssh user@server_ip "mkdir -p ~/.ssh && touch ~/.ssh/authorized_keys && chmod 700 ~/.ssh && cat >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys"

以上步骤和代码假设你已经有了SSH客户端和对应的权限。如果没有，你可能需要先配置好SSH客户端的权限和密钥文件路径。

- 阅读更多 -
html简单的日历界面
System
2024-08-12
所有,html

以下是一个简单的HTML日历界面示例，包括了基本的日历展示功能。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Calendar</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
 
<div>
    <table>
        <thead>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
        </thead>
        <tbody>
            <!-- 动态插入日历 -->
        </tbody>
    </table>
</div>
 
<script>
    function buildCalendar(year, month) {
        const daysInMonth = new Date(year, month, 0).getDate();
        const startDay = new Date(year, month - 1, 1).getDay();
 
        const tbody = document.querySelector('table tbody');
        tbody.innerHTML = ''; // 清空之前的日历内容
 
        let day = 1;
        for (let i = 0; i < 6; i++) {
            const tr = document.createElement('tr');
            for (let j = 0; j < 7; j++) {
                if (i === 0 && j < startDay) {
                    const td = document.createElement('td');
                    tr.appendChild(td);
                } else if (day <= daysInMonth) {
                    const td = document.createElement('td');
                    td.textContent = day++;
                    tr.appendChild(td);
                } else {
                    break;
                }
            }
            tbody.appendChild(tr);
        }
    }
 
    // 默认显示当前月份的日历
    const now = new Date();
    buildCalendar(now.getFullYear(), now.getMonth() + 1);
</script>
 
</body>
</html>

这段代码中，我们定义了一个buildCalendar函数，它会根据传入的年份和月份动态构建一个基础的日历。函数计算了这个月的总天数以及这个月的第一天是周几，然后创建相应数量的tr和td来展示日历。

用户可以通过调整buildCalendar函数调用的参数来查看不同月份的日历。例如，可以通过buildCalendar(2023, 3)来查看2023年3月份的日历。

- 阅读更多 -
HTML启动本地EXE的通用方法
System
2024-08-12
所有,html

在Web应用中直接启动本地EXE文件是一个安全问题，通常不被浏览器和操作系统允许。但是，可以通过一些变通方法实现。

  1. 使用ActiveX控件（仅限Internet Explorer，且需用户授权）
  2. 使用特定浏览器插件，如Java Applet或Flash
  3. 通过服务器端脚本启动（需要服务器权限和配置）
  4. 使用HTML5的File API读取用户本地文件，并通过JavaScript的Web Workers API或Node.js启动

以下是使用ActiveX控件的示例：

首先，你需要创建一个ActiveX控件，这通常是一个COM组件或者一个用特定工具（如VB或VC）编写的小程序。然后，你需要在你的网页中嵌入这个ActiveX控件，并通过JavaScript调用其方法。




<object id="myActiveX"
        classid="CLSID:你的控件的CLSID"
        width="0" height="0">
</object>
<script type="text/javascript">
    function launchExe() {
        myActiveX.launchExe();
    }
</script>
<input type="button" value="Launch EXE" onclick="launchExe();" />

请注意，ActiveX控件只能在Internet Explorer上运行，且用户需要接受一个安全警告来允许ActiveX控件的运行。此外，这种方法不适用于现代浏览器，因为它们大多禁用了ActiveX控件的运行。

对于安全性和跨浏览器兼容性考虑，通常不建议在Web应用中直接启动本地EXE文件。如果确实需要与本地系统交互，可以考虑使用基于Web的技术，如HTML5 File API、WebSockets或WebAssembly，或者设计一个桌面应用作为客户端。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号