分类前端技术下的文章

2024-08-17

在HTML5中，可以使用<table>元素来创建一个课程表。以下是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>课程表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        thead {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
 
<h1>课程表</h1>
 
<table>
    <thead>
        <tr>
            <th>时间/日期</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>8:00-9:00</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
        </tr>
        <!-- 其他时间段的课程可以继续添加 -->
    </tbody>
</table>
 
</body>
</html>

这段代码创建了一个基本的课程表，包含了时间、星期一到星期五的课程信息。可以根据实际需要添加更多的时间段和课程信息。

System

2024-08-17

所有,html5




<!DOCTYPE html>
<html>
<head>
<title>Custom Validation Example</title>
<script>
// 定义验证函数
function validateInput(event) {
  // 获取输入框的值
  var inputValue = event.target.value.trim();
  // 设置自定义验证信息
  if (inputValue.length === 0) {
    // 如果输入为空，设置自定义错误信息
    event.target.setCustomValidity('输入不能为空');
  } else {
    // 如果输入非空，则清除自定义错误信息
    event.target.setCustomValidity('');
  }
}
</script>
</head>
<body>
 
<form>
  <label for="customInput">请输入内容:</label>
  <input type="text" id="customInput" required oninput="validateInput(event)">
  <button type="submit">提交</button>
</form>
 
</body>
</html>

这段代码演示了如何在HTML5表单中实现自定义验证规则。当用户输入时，会触发oninput事件，然后调用validateInput函数进行验证。如果输入值为空或者只包含空白字符，则会调用setCustomValidity方法设置自定义的错误信息。如果输入非空，则清除错误信息，允许表单提交。

- 阅读更多 -

Spring Boot + HTML5简单的前端验证登录功能实现

System

2024-08-17

所有,html5




import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
 
@Controller
public class LoginController {
 
    @PostMapping("/login")
    @ResponseBody
    public String login(@RequestParam String username, @RequestParam String password) {
        // 这里应该是对用户名和密码的验证逻辑，但由于是示例，简单比较即可
        if ("admin".equals(username) && "password".equals(password)) {
            return "登录成功";
        } else {
            return "登录失败";
        }
    }
}

这段代码创建了一个简单的Spring Boot控制器，用于处理登录请求。它接收通过POST方法发送的用户名和密码，并进行简单的验证。在实际应用中，验证逻辑会更复杂，可能涉及数据库查询或其他安全措施。

- 阅读更多 -

用HTML5实现动画

System

2024-08-17

所有,html5

在HTML5中，可以使用<canvas>元素来实现动画。以下是一个简单的HTML5动画示例，它使用JavaScript来绘制动画：




<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 动画示例</title>
</head>
<body>
 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持Canvas。
</canvas>
 
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var x = 0;
 
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 50, 50, 50);
    x += 10;
 
    if (x > canvas.width) {
        x = 0;
    }
 
    requestAnimationFrame(draw);
}
 
requestAnimationFrame(draw);
</script>
 
</body>
</html>

这段代码会在一个正方形从左至右移动的动画中重绘一个蓝色的背景。requestAnimationFrame函数用于在浏览器下次绘制屏幕时执行绘图函数，这样可以形成一个连续的动画效果。

- 阅读更多 -

HTML5 视频 Vedio 标签详解

System

2024-08-17

所有,html5

HTML5 <video> 标签用于在网页上嵌入视频内容。以下是一个基本的 <video> 标签示例，包含了一些常用的属性：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

width 和 height 属性用于设置视频的显示尺寸。
controls 属性添加视频播放控制器，如播放、暂停和音量控制。
<source> 标签指定视频文件的路径和类型。如果浏览器不支持某种格式，可以通过添加更多的 <source> 标签来指定备用视频文件。
最后的一行文本是备用显示内容，用于在浏览器不支持 <video> 标签时显示。

这个基本示例提供了一个入门级的视频嵌入方法，在实际应用中可以根据具体需求添加更多属性和事件处理程序。

- 阅读更多 -

【博主推荐】HTML5实现简洁的实用的个人网站、个人主页七个页面源码

System

2024-08-17

所有,html5

由于篇幅限制，这里仅提供每个页面的HTML结构代码示例。完整的代码请查看原链接中的文件。

index.html (首页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <!-- 首页内容 -->
</body>
</html>

about.html (关于页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于我</title>
</head>
<body>
    <!-- 关于我的内容 -->
</body>
</html>

works.html (作品页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的作品</title>
</head>
<body>
    <!-- 作品展示内容 -->
</body>
</html>

contact.html (联系页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系我</title>
</head>
<body>
    <!-- 联系表单 -->
</body>
</html>

blog.html (博客页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
</head>
<body>
    <!-- 博客文章列表 -->
</body>
</html>

single.html (单博文页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客文章</title>
</head>
<body>
    <!-- 单个博客文章内容 -->
</body>
</html>

contact-success.html (联系成功页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系成功</title>
</head>
<body>
    <!-- 联系成功确认内容 -->
</body>
</html>

以上代码仅展示了每个页面的基本HTML结构，完整的样式和交互需要查看原链接中的文件。

- 阅读更多 -

Jquery实现二级下拉选择框

System

2024-08-17

所有,jquery

使用jQuery实现二级下拉选择框的基本思路是监听第一级下拉选择框的变化事件，然后根据用户的选择动态更新第二级下拉选择框的选项。以下是一个简单的实现示例：

HTML 部分：




<select id="firstSelect">
  <option value="">请选择</option>
  <option value="category1">类别1</option>
  <option value="category2">类别2</option>
</select>
 
<select id="secondSelect">
  <option value="">请先选择上级选项</option>
</select>

jQuery 部分：




$(document).ready(function() {
  var options = {
    'category1': ['选项1', '选项2'],
    'category2': ['选项3', '选项4']
  };
 
  $('#firstSelect').change(function() {
    var selectedCategory = $(this).val();
    var secondSelect = $('#secondSelect');
 
    if (selectedCategory) {
      var subOptions = options[selectedCategory];
      var newOptionsHtml = subOptions.map(function(option) {
        return '<option>' + option + '</option>';
      }).join('');
 
      secondSelect.html(newOptionsHtml);
    } else {
      secondSelect.html('<option value="">请先选择上级选项</option>');
    }
  }).change(); // 触发一次change事件以防初始选择
});

在这个示例中，options 对象包含了不同类别对应的子选项。当用户在第一级下拉框中选择不同的类别时，第二级下拉框的选项会相应更新。注意，我们在change事件处理函数的最后调用了.change()，这是为了在页面加载时也能正确地初始化第二级下拉框。

- 阅读更多 -

JQuery事件操作

System

2024-08-17

所有,jquery

在jQuery中，事件操作主要指绑定事件处理程序到元素上。以下是几种常见的事件操作方法：

.on(event, handler)：绑定事件处理程序到选择的元素。
.off(event, handler)：从选择的元素解绑事件处理程序。
.trigger(event)：触发选择的元素上的事件。
.one(event, handler)：绑定一次性的事件处理程序。

以下是这些方法的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Event Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<button id="myButton">Click Me</button>
 
<script>
$(document).ready(function() {
    // 绑定点击事件处理程序
    $('#myButton').on('click', function() {
        alert('Button clicked!');
    });
 
    // 触发点击事件
    $('#myButton').trigger('click');
 
    // 解绑点击事件处理程序
    $('#myButton').off('click');
 
    // 绑定一次性事件处理程序
    $('#myButton').one('click', function() {
        alert('Button clicked once!');
    });
});
</script>
</body>
</html>

在这个例子中，我们首先绑定了一个点击事件处理程序到按钮上。然后我们触发了这个点击事件。接着我们解绑了这个点击事件处理程序。最后，我们使用.one()方法绑定了一个只会执行一次的点击事件处理程序。

System

2024-08-17

所有,jquery

错误解释：

Uncaught TypeError: $(...).live is not a function at HTM 这个错误表明你正在尝试使用 jQuery 的 .live() 方法，但是在当前的 jQuery 版本中，.live() 方法已经被废弃并从库中移除。从 jQuery 1.9 开始，.live() 已经不被推荐使用，并在后续的版本中被移除。

解决方法：

要解决这个问题，你需要使用一个替代的事件绑定方法，比如 .on()。以下是一个简单的替换例子：

如果你原来的代码是这样的：




$('#someElement').live('click', function() {
    // 事件处理代码
});

你应该将它修改为使用 .on() 方法：




$(document).on('click', '#someElement', function() {
    // 事件处理代码
});

在这个例子中，我们将事件绑定到了 document 对象上，并指定了要绑定事件的具体元素（#someElement）。这样，即使在 DOM 完全加载之后添加到文档中的元素也会响应原来绑定的事件。

确保你使用的是支持 .on() 方法的 jQuery 版本。如果你依然需要使用旧版本的 jQuery，可以考虑降级到不包含 .live() 方法移除的版本，但这不是推荐的做法，因为它可能会带来安全风险。

- 阅读更多 -

node实现文件上传

System

2024-08-17

所有,jquery

在Node.js中实现文件上传，你可以使用内置的http模块搭建一个简单的服务器，并使用formidable模块来处理上传的表单。以下是一个简单的例子：

首先，安装formidable模块：




npm install formidable

然后，创建一个简单的HTTP服务器来处理文件上传：




const http = require('http');
const formidable = require('formidable');
const fs = require('fs');
 
const server = http.createServer((req, res) => {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // 解析请求，包括文件上传
    const form = new formidable.IncomingForm();
 
    form.parse(req, (err, fields, files) => {
      const oldPath = files.filetoupload.filepath;
      const newPath = __dirname + '/uploads/' + files.filetoupload.originalFilename;
 
      // 重命名文件
      fs.rename(oldPath, newPath, function (err) {
        if (err) throw err;
        res.write('File uploaded and moved!');
        res.end();
      });
    });
  } else {
    // 显示一个用于上传文件的表单
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form action="upload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="filetoupload"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
});
 
server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

在上述代码中，服务器监听3000端口。当访问服务器时，它会显示一个用于上传文件的表单。当提交表单时，如果URL是/upload并且请求方法是POST，服务器将使用formidable解析请求，并将上传的文件保存在服务器的uploads目录下。

请确保服务器的上传目录（这个例子中是uploads）存在，并且服务器有足够的权限来写入该目录。

- 阅读更多 -