分类前端技术下的文章

2024-08-07

HTML (HyperText Markup Language) 是用于创建网页的标准标记语言。它不是一种编程语言，而是一种描述性的标记语言，用于定义网页内容的结构。

以下是一个简单的HTML页面示例：




<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">点击这里访问我的主页</a>
</body>
</html>

在这个例子中：

<!DOCTYPE html> 声明这是一个HTML5文档。
<html> 元素是这个文档的根元素。
<head> 元素包含了此网页的标题（<title>），用于定义网页的标题，它不会显示在浏览器的页面上，但会显示在浏览器的标题栏和书签列表中。
<body> 元素包含了所有的可见的页面内容。
<h1> 元素定义了一个大标题。
<p> 元素定义了一个段落。
<a> 元素定义了一个超链接，href属性定义了链接的目标地址。

System

2024-08-07

所有,html

在Spring Boot中，要通过FreeMarker模板引擎动态生成图片并将其作为Base64编码的字符串嵌入HTML中，你可以使用Java图形库如Apache Batik，以及FreeMarker的自定义指令来完成这项任务。

以下是一个简化的例子：

添加依赖到pom.xml：




<dependency>
    <groupId>org.freemarker</groupId>
    <artifactId>freemarker</artifactId>
    <version>YourFreeMarkerVersion</version>
</dependency>
<dependency>
    <groupId>org.apache.xmlgraphics</groupId>
    <artifactId>batik-transcoder</artifactId>
    <version>YourBatikVersion</version>
</dependency>

创建FreeMarker模板template.ftl：




<html>
<head>
    <title>Dynamic Image Generation</title>
</head>
<body>
    <img src="data:image/png;base64,${imageBase64}" />
</body>
</html>

创建FreeMarker指令处理程序：




import freemarker.core.Environment;
import freemarker.template.TemplateDirectiveBody;
import freemarker.template.TemplateDirectiveModel;
import freemarker.template.TemplateException;
import freemarker.template.TemplateModel;
import freemarker.template.TemplateNumberModel;
import freemarker.template.TemplateScalarModel;
import freemarker.template.utility.StandardCompress;
 
import java.awt.*;
import java.io.*;
import java.util.*;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.PNGTranscoder;
 
public class ImageDirective implements TemplateDirectiveModel {
    @Override
    public void execute(Environment env, Map params, TemplateModel[] loopVars, TemplateDirectiveBody body) throws TemplateException, IOException {
        Writer out = env.getOut();
        // 设置图片宽高
        int width = 100;
        int height = 50;
        if (params.containsKey("width")) {
            width = ((TemplateNumberModel) params.get("width")).getAsNumber().intValue();
        }
        if (params.containsKey("height")) {
            height = ((TemplateNumberModel) params.get("height")).getAsNumber().intValue();
        }
 
        // 创建图像
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
        Graphics2D g2d = image.createGraphics();
 
        //

- 阅读更多 -

ajax formData 上传文件，Servlet 获取文件和参数的方式

System

2024-08-07

所有,ajax

在Ajax中使用FormData对象上传文件时，可以在Servlet中通过HttpServletRequest对象获取文件和参数。以下是一个简单的示例：

JavaScript (Ajax) 端:




// 假设你有一个文件输入和其他表单数据
var fileInput = document.getElementById('fileInput');
var formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('paramName', 'paramValue'); // 其他表单数据
 
// 使用Ajax发送数据
var xhr = new XMLHttpRequest();
xhr.open('POST', 'uploadServletURL', true);
xhr.onload = function() {
  if (this.status == 200) {
    console.log('File and parameters uploaded successfully');
  }
};
xhr.send(formData);

Java (Servlet) 端:




import java.io.File;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.FileItem;
 
@WebServlet("/uploadServlet")
public class UploadServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    if (ServletFileUpload.isMultipartContent(request)) {
      try {
        List<FileItem> multiparts = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
        for (FileItem item : multiparts) {
          if (!item.isFormField()) {
            // 处理文件
            String fileName = item.getName();
            // 保存文件到服务器...
            item.write(new File("/path/to/upload/directory" + fileName));
          } else {
            // 处理普通表单字段
            String fieldName = item.getFieldName();
            String fieldValue = item.getString();
            // 根据字段名处理参数...
          }
        }
        response.getWriter().print("File and parameters uploaded successfully");
      } catch (Exception e) {
        e.printS

- 阅读更多 -

html中用frameset对窗口进行划分

System

2024-08-07

所有,html

<frameset> 元素用于在 HTML 文档中划分窗口为多个框架。每个框架可以包含另一个 HTML 页面。

以下是一个简单的示例，使用 <frameset> 划分窗口为两个框架：




<!DOCTYPE html>
<html>
<head>
    <title>Frameset Example</title>
</head>
<frameset cols="50%,50%">
    <frame src="frame1.html">
    <frame src="frame2.html">
</frameset>
</html>

在这个例子中，cols="50%,50%" 表示左右划分窗口，每个窗口占据全部窗口宽度的一半。frame1.html 和 frame2.html 是将要在两个框架中显示的页面。

请注意，<frameset> 和 <frame> 元素在 HTML5 中已不被推荐使用，因为它们不符合现代 Web 标准。HTML5 推荐使用 CSS 和 JavaScript 来实现页面布局和框架的效果。

- 阅读更多 -

【网页前端设计HTML】水平线、div、自闭合标签及块元素和行内元素、特殊符号

System

2024-08-07

所有,html

在HTML中，创建水平线可以使用<hr>标签。<hr>标签是一个自闭合标签，表示段落级别的主题转换，在视觉上显示为一条水平线。




<p>这是一段文本。</p>
<hr>
<p>这是另一段文本。</p>

<div>标签是一个块级元素，它可以用来组合其他HTML元素。




<div>
  <h1>这是一个标题</h1>
  <p>这是一段文本。</p>
  <hr>
</div>

块级元素是独占一行的元素，比如<div>、<p>、<h1>到<h6>，以及<hr>。行内元素则不会独占一行，例如<span>和<a>。

特殊符号可以通过字符实体来表示，例如使用&来表示&，使用<来表示<，使用>来表示>。




<p>这是一个特殊符号：&lt;</p>

- 阅读更多 -

【HTML导出word格式，手动实现文件上传，formData包装】

System

2024-08-07

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>导出Word</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <form id="uploadForm">
        <input type="file" id="file" name="file" />
        <input type="button" value="上传" onclick="uploadFile()" />
    </form>
 
    <script>
        function uploadFile() {
            var formData = new FormData();
            var file = document.getElementById('file').files[0];
            formData.append('file', file);
 
            $.ajax({
                url: '/upload', // 这里改为你的上传接口地址
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    console.log('File successfully uploaded');
                    // 这里可以根据返回的response进行操作，例如导出Word
                    window.location.href = '/downloadWord'; // 假设接口返回了Word文件的下载地址
                },
                error: function(xhr, status, error) {
                    console.log('An error occurred: ' + status + '\nError: ' + error);
                }
            });
        }
    </script>
</body>
</html>

在这个例子中，我们使用了jQuery的$.ajax方法来实现文件的手动上传，并通过FormData对象来构建表单数据。上传成功后，可以通过修改window.location.href来实现Word文件的导出下载。注意，这里的/upload和/downloadWord应该替换为你的实际上传和下载Word文件的接口地址。

- 阅读更多 -

js自定义时间轴组件

System

2024-08-07

所有,javascript

要创建一个自定义的时间轴组件，你可以使用HTML和CSS来设计布局，然后使用JavaScript来处理交互和动态更新时间轴。以下是一个简单的时间轴组件示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Timeline Component</title>
<style>
  .timeline {
    width: 100%;
    position: relative;
  }
  .timeline-bar {
    width: 100%;
    height: 10px;
    background-color: #eee;
    position: relative;
  }
  .timeline-event {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 50%;
  }
</style>
</head>
<body>
 
<div id="timeline" class="timeline">
  <div class="timeline-bar">
    <!-- Events will be added dynamically here -->
  </div>
</div>
 
<script>
  class Timeline {
    constructor(selector) {
      this.container = document.querySelector(selector);
      this.bar = this.container.querySelector('.timeline-bar');
    }
 
    addEvent(date) {
      const event = document.createElement('div');
      event.classList.add('timeline-event');
 
      // Calculate the position of the event based on the total width of the timeline and the passed date
      const totalWidth = this.bar.offsetWidth;
      const eventPosition = (totalWidth / 100) * date; // Assuming `date` is a percentage value
 
      event.style.left = `${eventPosition}px`;
 
      this.bar.appendChild(event);
    }
  }
 
  // Usage:
  const timeline = new Timeline('#timeline');
  timeline.addEvent(25); // Add an event at 25% of the total width
  timeline.addEvent(50); // Add an event at 50% of the total width
  timeline.addEvent(75); // Add an event at 75% of the total width
</script>
 
</body>
</html>

这个示例中，Timeline 类接受一个CSS选择器作为参数，并在构造函数中查询相应的元素。addEvent 方法接受一个日期参数，并计算该事件在时间轴上的位置。然后，它创建一个新的div来表示事件，并将其添加到时间轴上。

你可以根据需要调整样式和逻辑，以创建更复杂的时间轴组件。

System

2024-08-07

所有,html

在HTML中，要设置输入框为只读模式，可以使用readonly属性。在Vue中，使用v-if指令可以根据条件动态地渲染元素。

以下是一个简单的例子，展示了如何在Vue中实现一个表单输入框的编辑模式和只读模式切换。




<template>
  <div>
    <!-- 编辑按钮，点击后进入编辑模式 -->
    <button @click="isEdit = true">编辑</button>
 
    <!-- 表单输入框，根据isEdit变量的值切换只读或编辑模式 -->
    <input v-if="!isEdit" type="text" v-model="formData" readonly>
    <input v-else type="text" v-model="formData">
 
    <!-- 保存按钮，只在编辑模式下显示 -->
    <button v-if="isEdit" @click="isEdit = false">保存</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isEdit: false, // 控制编辑模式的开关
      formData: ''   // 表单数据绑定变量
    };
  }
};
</script>

在这个例子中，isEdit是一个布尔值，用来控制输入框是否为只读。v-if和v-else指令根据isEdit的值决定渲染哪个<input>元素。当isEdit为false时，表单输入框为只读；为true时，用户可以编辑输入内容。点击“编辑”按钮会将isEdit设置为true，触发显示编辑模式的输入框；点击“保存”按钮会将isEdit设置为false，触发显示只读模式的输入框，并进入只读模式。

- 阅读更多 -

css实现六边形及其它灵活布局

System

2024-08-07

所有,css3

CSS可以使用clip-path属性来创建六边形，但这种方法不会适应内容的变化。另一种方法是使用CSS的transform属性和伪元素来实现更灵活的六边形布局。

下面是一个使用CSS创建的灵活六边形布局的例子：




<div class="hexagon">
  <div class="hexagon-inner">
    <p>内容</p>
  </div>
</div>




.hexagon {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #67b168;
  margin: 20px;
  overflow: hidden;
}
 
.hexagon-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(60deg) scale(1.4142135623730951);
  transform-origin: center;
}
 
.hexagon-inner::before,
.hexagon-inner::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transform: rotate(-60deg);
}
 
.hexagon-inner::before {
  transform-origin: bottom left;
}
 
.hexagon-inner::after {
  transform-origin: top left;
  top: 0;
  left: 50%;
}

这个例子中，.hexagon 创建了一个基本的六边形框架，.hexagon-inner 是内部容器，它通过 transform 属性进行旋转和缩放，使得六边形看起来正确。伪元素 ::before 和 ::after 用于填充六边形的顶部和底部，从而形成一个合适的六边形结构。这个方法可以适应内容的大小变化，因为它不依赖于固定的宽高比。

2024-08-07

要实现一个点击时颜色渐变的菜单栏，并且在鼠标点击时给出方框发光的效果，可以使用CSS3的transition属性来实现颜色的渐变效果，使用:active伪类和box-shadow属性来实现点击时的发光效果。

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

HTML:




<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">产品服务</a></li>
  <li><a href="#">联系方式</a></li>
</ul>

CSS:




.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.menu li {
  display: inline-block;
  margin-right: 10px;
}
 
.menu a {
  text-decoration: none;
  color: #fff;
  padding: 10px 15px;
  background-color: #007bff;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
 
.menu a:hover {
  background-color: #0056b3;
}
 
.menu a:active {
  background-color: #00428c;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

在这个例子中，当鼠标悬停在链接上时，背景色会渐变到深蓝色（#0056b3），而当链接被点击时，背景色会渐变到更深的蓝色（#00428c），并且在链接下方产生一个白色的方框发光效果。这个方框发光效果会在点击后持续一段时间，随后随着鼠标的松开而消失。

- 阅读更多 -