当前位置：首页 > news >正文

【前端】使用 HTML、CSS 和 JavaScript 创建一个数字时钟和搜索功能的网页

news 来源：原创 2025/7/19 4:44:48

文章目录

⭐前言
⭐一、项目结构
⭐二、HTML 结构
⭐三、CSS 样式
⭐四、JavaScript 功能
⭐五、运行效果
⭐总结

标题	详情
作者	JosieBook
头衔	CSDN博客专家资格、阿里云社区专家博主、软件设计工程师
博客内容	开源、框架、软件工程、全栈（,NET/Java/Python/C++）、数据库、操作系统、大数据、人工智能、工控、网络、程序人生
口号	成为你自己，做你想做的
欢迎三连	👍点赞、✍评论、⭐收藏

⭐前言

在本篇博客中，我们将介绍如何使用 HTML、CSS 和 JavaScript 创建一个包含数字时钟和搜索功能的简单网页。这个网页不仅具有现代的外观，还能实时显示当前时间，并允许用户输入搜索内容。

⭐一、项目结构

我们的项目结构如下所示：

test├── index.html├── myCss.css└── myJsp.js

index.html：主页面文件，包含 HTML 结构和基本样式。
myCss.css：自定义样式文件，用于美化页面。
myJsp.js：JavaScript 文件，负责实现时钟和搜索功能的逻辑。

⭐二、HTML 结构

在 index.html 文件中，我们首先定义了基本的 HTML 结构。我们使用了 Bootstrap 框架来快速构建响应式布局。以下是主要的 HTML 代码片段：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="XX科技公司 - 领先的软件开发解决方案提供商"><title>XX科技公司 | 创新驱动未来</title><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" type="text/css"><link rel="stylesheet" href="myCss.css">
</head>
<body>
<i class="fas fa-ellipsis-v uil uil-ellipsis-v dot-menu-btn" style="color:#fff" id="active-menu"></i>
<ul class="dot-menu" id="active-menu"><li class="menu-item" id="active-menu"><span class="clock-format-text" id="active-menu">24-Hour Format</span><div class="format-switch-btn" id="active-menu" date-format="12"></div></li>
</ul><div class="container"><div class="row height d-flex justify-content-center align-items-center"><div class="col-md-8"><div class="search"><i class="fa fa-search"></i><input type="text" class="form-control" id="search-input" placeholder="Have a question? Ask Now"><button class="btn btn-primary" id="search-button">Search</button></div></div></div>
</div><div class="time"><span class="hours">00</span><span class="dots">:</span><span class="minutes">00</span><div class="right-side"><span class="period">AM/PM</span><span class="seconds">00</span></div>
</div><div class="calender"><span class="month-name">Month</span>,<span class="day-name">Day</span><span class="day-num">00</span>
</div><script src="myJsp.js"></script>
</body>
</html>

⭐三、CSS 样式

在 myCss.css 文件中，我们使用了一些 CSS 来美化页面的外观。以下是一些关键的样式：

@import url("https://fonts.googleapis.com/css2?family=Poppins:weight@100;200;300;400;500;600;700;800&display=swap");* {font-family: 'Poppins', sans-serif;margin: 0;padding: 0;box-sizing: border-box;
}body {min-height: 100vh;display: flex;justify-content: center;align-items: center;background: #2e2e44;
}.height {height: 100vh
}.search {position: relative;box-shadow: 0 0 40px rgba(51, 51, 51, .1)
}.search input {height: 60px;text-indent: 25px;border: 2px solid #d6d4d4
}.search input:focus {box-shadow: none;border: 2px solid blue
}.search .fa-search {position: absolute;top: 20px;left: 16px
}.search button {position: absolute;top: 5px;right: 5px;height: 50px;width: 110px;background: blue
}.digital-clock {position: relative;color: #fff;background: #2e2e44;width: 425px;padding: 20px 45px;box-shadow: 0 5px 25px rgba(14, 21, 37, 0.8);border-radius: 10px;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.digital-clock:before {content: '';position: absolute;background: linear-gradient(45deg, #24ff6d, #2f93f1, #ff5e9a);background-size: 200% 200%;top: -5px;left: -5px;bottom: -5px;right: -5px;z-index: -1;filter: blur(40px);animation: glowing 10s ease infinite;
}@keyframes glowing {0% {background-position: 0 50%;}50% {background-position: 100% 50%;}100% {background-position: 0 50%;}
}.time {position: relative;display: flex;justify-content: center;align-items: center;}.hours,
.dots,
.minutes {display: flex;justify-content: center;align-items: center;font-weight: 600;padding: 0 10px;line-height: 125px;
}.hours,
.minutes {font-size: 6.5em;width: 125px;
}.dots {font-size: 5em;color: #929292;
}.hours {background: -webkit-linear-gradient(90deg, #634dff, #5fd4ff);-webkit-text-fill-color: transparent;-webkit-background-clip: text;
}.minutes {background: -webkit-linear-gradient(90deg, #ff5e9e, #ffb960);-webkit-text-fill-color: transparent;-webkit-background-clip: text;
}.right-side {position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-left: 10px;
}.period,
.seconds {font-size: 1.2em;font-weight: 500;
}.period {transform: translateY(-20px);background: -webkit-linear-gradient(90deg, #f7b63f, #faf879);-webkit-text-fill-color: transparent;-webkit-background-clip: text;
}.seconds {transform: translateY(16px);background: -webkit-linear-gradient(90deg, #24ff6d, #2f93f1);-webkit-text-fill-color: transparent;-webkit-background-clip: text;
}.calender {display: flex;justify-content: center;align-items: center;font-size: 1.3em;font-weight: 500;margin-bottom: 5px;background: -webkit-linear-gradient(90deg, #ae4af6, #ff98d1);-webkit-text-fill-color: transparent;-webkit-background-clip: text;
}.day-name,
.day-num,
.year {margin-left: 8px;
}.dot-menu-btn {position: absolute;top: 0;right: 0;margin: 10px;color: #efefef;font-size: 1.5em;cursor: pointer;
}.dot-menu {z-index: 999;position: absolute;top: 7px;right: 5px;list-style: none;background: #353e54;padding: 10px 20px;border-radius: 5px;box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);visibility: hidden;opacity: 0;transition: 0.4s ease;
}.dot-menu.active {visibility: visible;opacity: 1;
}.menu-item {display: flex;justify-content: center;align-items: center;
}.clock-format-text {color: #efefef;font-size: 0.9em;margin-right: 20px;
}.format-switch-btn {width: 35px;height: 15px;background: #485470;border-radius: 75px;box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.1),inset -2px -2px 4px rgba(0, 0, 0, 0.2);cursor: pointer;display: flex;justify-content: center;align-items: center;
}.format-switch-btn:before {content: '';position: absolute;width: 14px;height: 14px;background: #ff5e9a;border-radius: 50%;box-shadow: 0 5px 25px #ff5e9a;transform: translateX(-10px);transition: 0.4s ease;transition-property: background, transform;
}.format-switch-btn.active:before {background: #0bff8d;box-shadow: 0 5px 25px #0bff8d;transform: translateX(10px);
}

⭐四、JavaScript 功能

在 myJsp.js 文件中，我们实现了数字时钟和搜索功能。以下是相关的 JavaScript 代码：

//js for switch clock formatconst formatSwitchBtn = document.querySelector(".format-switch-btn");formatSwitchBtn.addEventListener("click", () => {formatSwitchBtn.classList.toggle("active");var formatValue = formatSwitchBtn.getAttribute("date-format");if (formatValue === "12") {formatSwitchBtn.setAttribute("date-format", "24");}else {formatSwitchBtn.setAttribute("date-format", "12");}
});//Get Current Time In Javascript
function clock() {var today = new Date();var hours = today.getHours();var minutes = today.getMinutes();var seconds = today.getSeconds();let period = "AM";//set the time periodif (hours >= 12) {period = "PM";}//set 12 hour clock formatvar formatValue = formatSwitchBtn.getAttribute("date-format");if (formatValue === "12") {hours = hours > 12 ? hours % 12 : hours;}//add 0 for the value lower than 10if (hours < 10) {hours = "0" + hours;}if (minutes < 10) {minutes = "0" + minutes;}if (seconds < 10) {seconds = "0" + seconds;}document.querySelector(".hours").innerHTML = hours;document.querySelector(".minutes").innerHTML = minutes;document.querySelector(".period").innerHTML = period;document.querySelector(".seconds").innerHTML = seconds;
}
var updateClock = setInterval(clock, 1000);// get the date in jsvar today = new Date();
const dayNum = today.getDate();
const year = today.getFullYear();
const dayName = today.toLocaleString("default", { weekday: "long" });
const monthName = today.toLocaleString("default", { month: "short" });document.querySelector(".month-name").innerHTML = monthName;
document.querySelector(".day-name").innerHTML = dayName;
document.querySelector(".day-num").innerHTML = dayNum;
// document.querySelector(".year").innerHTML = year;//js for dot menu toglleconst dotmenuBtn = document.querySelector(".dot-menu-btn");
const dotMenu = document.querySelector(".dot-menu");
dotmenuBtn.addEventListener("click", () => {dotMenu.classList.toggle("active");
});document.addEventListener("click", (e) => {if (e.target.id !== "active-menu") {dotMenu.classList.remove("active");}
});// 添加搜索按钮的点击事件
document.getElementById("search-button").addEventListener("click", function() {var searchInput = document.getElementById("search-input").value;if (searchInput.trim() === "") {alert("请输入搜索内容！");} else {alert("您搜索的内容是: " + searchInput);}
});

⭐五、运行效果

在这里插入图片描述

调整时间格式：

在这里插入图片描述

按钮提交提示：

在这里插入图片描述

⭐总结

通过以上步骤，我们成功构建了一个包含数字时钟和搜索功能的网页。用户可以在输入框中输入问题并点击搜索按钮，页面会弹出提示框显示用户输入的内容。同时，数字时钟会实时更新，显示当前的时间。

这个项目展示了如何结合 HTML、CSS 和 JavaScript 创建一个简单而实用的网页应用。希望这个示例能为你的网页开发之旅提供灵感！

【前端】使用 HTML、CSS 和 JavaScript 创建一个数字时钟和搜索功能的网页

文章目录 ⭐前言⭐一、项目结构⭐二、HTML 结构⭐三、CSS 样式⭐四、JavaScript 功能⭐五、运行效果⭐总结标题详情作者JosieBook头衔CSDN博客专家资格、阿里云社区专家博主、软件设计工程师博客内容开源、框架、软件工程、全栈（,NET/Java/Python/C）、数…...

编程日记 2025/7/19 4:44:48

【Linux】调试器——gdb使用

目录一、预备知识二、常用指令三、调试技巧 （一）监视变量的变化指令 watch （二）更改指定变量的值 set var 正文一、预备知识程序的发布形式有两种，debug和release模式，Linux gcc/g出来的二进制…...

编程日记 2025/7/15 22:13:25

Windows10清理机器大全集

Windows10清理机器大全集写在前面先这么个标题，逐渐补充禁止Update移除Microsoft Compatibility Telemetrywindows-defender-remover其它写在前面看到标题，读者已经就吐了。我是说，我非常认可: IT从业者，如果你银子比较充足&…...

编程日记 2025/7/17 6:58:32

解决IDEA中maven找不到依赖项的问题

直接去官网找到对应的依赖项jar包，并且下载到本地，然后安装到本地厂库中。 Maven官网：https://mvnrepository.com/ 一、使用mvn install:install-file命令 Maven提供了install:install-file插件，用于手动将jar包安装到本地仓库…...

编程日记 2025/7/14 23:54:41

端游熊猫脚本游戏精灵助手2025游戏办公脚本工具！游戏脚本软件免费使用

在当下这个崇尚高效与便捷的时代，自动化工具已然成为诸多开发者与企业提升工作效率的关键选择。熊猫精灵脚本助手作为一款极具实力的自动化工具，凭借其多样的功能以及广泛的应用场景，逐步成为众多用户的首要之选。熊猫精灵脚本助手整合了丰…...

编程日记 2025/7/15 13:41:46

知识就是力量——物联网应用技术

基础知识篇一、常用电子元器件1——USB Type C 接口引脚详解特点接口定义作用主从设备关于6P引脚的简介 2——常用通信芯片CH343P概述特点引脚定义 CH340概述特点封装 3——蜂鸣器概述类型驱动电路原文链接二、常用封装介绍贴片电阻电容封装介绍封装尺寸与功率关系&#xff1…...

编程日记 2025/6/28 1:45:42

第4.1节：使用正则表达式

1 第4.1节：使用正则表达式将正则表达式用斜杠括起来，就能用作模式。随后，该正则表达式会与每条输入记录的完整文本进行比对。（通常情况下，它只需匹配文本的部分内容就能视作匹配成功。）例如，以…...

编程日记 2025/7/15 7:35:39

Linux目录及文件管理

目录一.Linux目录基本结构 1.常见目录及其作用二.常用文件处理命令 1.七类常见的linux的文件 2.cat（查看文件内容） 3.more(分页查看文件内容） 4.less(分页查看文件内容） 5.head（从头部查看文件内容&#xff0…...

编程日记 2025/7/11 1:11:57

【MySQL】从零开始：掌握MySQL数据库的核心概念（五）

由于我的无知，我对生存方式只有一个非常普通的信条：不许后悔。前言这是我自己学习mysql数据库的第五篇博客总结。后期我会继续把mysql数据库学习笔记开源至博客上。上一期笔记是关于mysql数据库的增删查改，没看的同学可以过去看看&#xf…...

编程日记 2025/7/14 23:51:43

进军场景智能体，云迹机器人又快了一步

（图片来源：Pixels） 2025年，AI和机器人行业都发生了巨大改变。数科星球原创作者丨苑晶编辑丨大兔 2025年，酒店行业正掀起一股批量采购具备AI功能的软硬一体解决方案的热潮。在DeepSeek、Manus等国产AI软件的推动…...

编程日记 2025/7/11 23:01:56

【实战ES】实战 Elasticsearch：快速上手与深度实践-5.2.1 多字段权重控制（标题、品牌、类目）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲电商商品搜索实战：多字段权重控制策略1. 业务场景与核心挑战1.1 典型搜索问题1.2 权重失衡的影响数据 2. 权重控制核心方案2.1 字段权重分配矩阵2.2 多策略组合方…...

编程日记 2025/7/14 16:10:57

Ubuntu24.04 离线安装 MySQL8.0.41

一、环境准备 1.1 官方下载MySQL8.0.41 完整包 1.2 上传包 & 解压上传包名称是：mysql-server_8.0.41-1ubuntu24.04_amd64.deb-bundle.tar # 切换到上传目录 cd /home/MySQL8 # 解压： tar -xvf mysql-server_8.0.41-1ubuntu24.04_amd64.deb-bundl…...

编程日记 2025/7/14 1:24:58

【Django】教程-3-数据库相关介绍

【Django】教程-1-安装创建项目目录结构介绍【Django】教程-2-前端-目录结构介绍 4.数据库连接配置需要手动创建数据库，数据库无法自动创建 ，ORM可以创建表，操作表注意：负责app下mondels.py写类时，无法在数据库中…...

编程日记 2025/7/14 8:13:25

OpenGL绘制文本

一：QPainter绘制在 OpenGL 渲染的窗口中（如 QOpenGLWidget），通过 QPainter 直接绘制文本。Qt 会自动将 2D 内容（文本、图形）与 OpenGL 内容合成。在paintGL()里面绘制，如果有其他纹理&#xf…...

编程日记 2025/7/18 1:13:45

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例6，TableView16_06 分页表格拖拽排序

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2025/7/16 1:48:59

【解决】导入PNG图片，转 Sprite 格式成功但资产未生效问题

开发平台：Unity 6.0 图片格式：.png 问题描述当 PNG 成功转换为 Sprite（精灵）时，资产状态将显示扩展箭头，即表明该资产可 Sprite 使用。解决方法：设置正确的 Sprite Mode Single 关于 Spr…...

编程日记 2025/7/16 21:35:18

【科研绘图系列】R语言绘制重点物种进化树图（taxa phylogenetic tree）

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍加载R包数据下载导入数据数据预处理画图输出图片系统信息介绍【科研绘图系列】R语言绘制重点物种进化树图（taxa phylogenetic tree）加载R包 library(tidyverse) library(ape…...

编程日记 2025/7/9 8:10:55

Flutter入门教程：从零开始的Flutter开发指南

Flutter入门教程：从环境搭建到应用发布概述本文提供了全面的Flutter入门教程，涵盖环境搭建、基础Widget使用、界面设计与美化，以及实战项目开发等内容。通过本教程，开发者能够快速上手Flutter开发，掌握开发跨平台应…...

编程日记 2025/7/16 21:05:07

CentOS 7 源码安装libjsoncpp-1.9.5库

安装依赖工具 sudo yum install cmake make gcc cmake 需要升级至 3.8.0 以上可参考：CentOS安装CMakegcc 需要升级至9.0 以上可参考：CentOS 7升级gcc版本下载源码 wget https://github.com/open-source-parsers/jsoncpp/archive/refs/tags/1.9.5.…...

编程日记 2025/7/14 19:50:30

调用高德天气Api，并展示对应天气图标

1、申请高德key 点击高德官网申请必须有key才能调用高德api 小提示：每日/每秒调用api次数有限，尽量不要循环调用。每日大概5000，每秒3次 2、查看文档高德官网天气api接口文档请求示例： https://restapi.amap.com/v3/weat…...

编程日记 2025/7/18 5:31:29

DSP开发板的JTAG接口

（1）普中DSP28335 （2）研旭DSP28388 （3）延华DSP28335 （3）M新动力28377D电机控制板...

编程日记 2025/6/28 3:35:04

1.25-20GHz/500ns超快跳频！盛铂SWFA300国产捷变频频率综合器模块赋能雷达/5G/电子战高频精密控制本振/频综模块

盛铂SWFA300捷变频频率综合器模块简述： 盛铂科技国产SWFA300捷变频频率综合器是一款在频率范围内任意两点频率的跳频时间在500nS以内的高速跳频源，其输出频率范围为1.25GHz至20GHz，频率的最小步进为10kHz。同时它拥有优秀的相位噪声特性&…...

编程日记 2025/7/18 9:32:00

nestjs 多环境配置

这里使用yaml进行多环境配置，需要安装nestjs/config、js-yaml、types/js-yaml js-yaml、types/js-yaml 主要用来读取yaml文件以及指定类型使用官方教程：Documentation | NestJS - A progressive Node.js framework 1、下载 npm i --save nestjs/confi…...

编程日记 2025/7/15 1:19:17

CentOS7系统更新yum源教程

由于CentOS 7 在2024年6月30号以后官方不再维护。很多yum源也陆续关掉了，所以我们要更换镜像源。yum是一个用于软件包管理的工具，它能够从特定的存储库中自动下载和安装软件包。然而，系统默认的yum源可能不包含所有软件包，因此需要…...

编程日记 2025/7/9 17:25:48

Python正则表达式（二）

目录六、re.findall()函数和分组 1、0/1分组情况 2、多分组情况七、或“|”的用法 1、作用域 2、用法八、贪婪模式和懒惰模式 1、量词的贪婪模式 2、量词的懒惰模式九、匹配对象 1、相关函数六、re.findall()函数和分组 1、0/1分组情况在正则表达式中&#x…...

编程日记 2025/7/18 1:30:30

MySQL中如何进行SQL调优？

SQL 调优是提高 MySQL 数据库性能的关键环节。以下是 MySQL SQL 调优的主要方法和技巧一、使用 EXPLAIN 分析查询 EXPLAIN SELECT * FROM users WHERE user_name 张三;查看执行计划，了解 MySQL 如何处理查询重点关注 type、key、rows、Extra 列type 最好能达到 …...

编程日记 2025/7/19 4:18:17

Android15查看函数调用关系

Android15 Camera3中打印函数调用栈 1.使用CallStack跟踪函数调用修改涉及三个内容： Android.bp中添加对CallStack的引用。CallStack被打包在libutilscallstack.so。代码中包含CallStack的头文件。代码中调用CallStack接口，打印函数调用栈。例子&am…...

编程日记 2025/7/16 14:43:17

Containerd+Kubernetes搭建k8s集群

虚拟机环境设置，如果不是虚拟机可以忽略不看 1、安装配置containerd 1.1 添加 Kubernetes 官方仓库安装cri-tools的时候需要用到 cat > /etc/yum.repos.d/kubernetes.repo << EOF [kubernetes] nameKubernetes baseurlhttps://mirrors.aliyun.com/kub…...

编程日记 2025/7/14 1:18:44

【Spring AI】基于专属知识库的RAG智能问答小程序开发——功能优化：用户鉴权主体功能开发

系列文章目录【Spring AI】基于专属知识库的RAG智能问答小程序开发——完整项目（含完整前端后端代码）【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心ChatClient对象相关构造函数【Spring AI】基于专属知识库的R…...

编程日记 2025/7/13 20:02:10

个人学习编程(3-24) 数据结构

括号的匹配： if((s[i]) && now() || (s[i]] && now[)){ #include <bits/stdc.h>using namespace std;int main() {char s[300];scanf("%s",&s);int i;int len strlen(s);stack <char> st;for (i 0; i < len; i){if(…...

编程日记 2025/7/15 10:51:28

比特币等虚拟货币实时价格使用说明，数字货币价格获取，k线获取，实时价格获取

数据截图 k线数据 websocket 实时价格数据根据这些数据可以做出自己的产品获取时间段内的k线数据在开始之前，你需要知道的知识： 币种缩写英文名币种IDBTCBitcoinbitcoinETHEthereumethereumEOSEOSeosUSDTTethertetherLTCLitecoinlitecoinUSDDol…...

编程日记 2025/7/16 8:50:20

【漏洞修复】为了修复ARM64 Android10系统的第三方库漏洞，将ARM64 Android16的系统库直接拷贝到Android10系统如何?

直接替换系统库的风险分析将高版本Android（如Android 16）的系统库直接拷贝到低版本系统（如Android 10）可能会导致以下问题： 符号与依赖不兼容高版本库可能依赖更高版本的NDK或Bionic libc（Android的C库&…...

编程日记 2025/7/14 1:36:53

import numpy as np# 数据准备 X np.array([1, 2, 3]) y np.array([3, 5, 7])# 参数初始化 w0, w1 0, 0 alpha 0.1 n len(X)# 迭代10次 for epoch in range(10):# 计算预测值y_pred w1 * X w0# 计算梯度grad_w0 (1/n) * np.sum(y_pred - y)grad_w1 (1/n) * np.sum((y_…...

编程日记 2025/7/18 18:28:00

SQL Server 2008安装教程

目录一.安装SQL Server 二.安装SQL Server Management Studio 三.使用SQL Server Management Studio 一.安装SQL Server 官网下载:SQL Server 下载 | Microsoft 1.选择安装中的全新安装如下图 2.功能选择 3.实例配置 4.后面一直下一步到数据库引擎配置密码自己设置系统…...

编程日记 2025/7/17 12:18:20

协作机械臂需要加安全墙吗？安全墙光栅干涉区

安全墙是什么文章目录安全墙是什么简介1. 物理安全墙1.1 定义：1.2 作用机制：1.3 应用场景： 2. 虚拟安全墙2.2 定义：2.3 作用机制：2.3 应用场景： 3. 安全毛毯3.1 工作原理：3.2 特点3.3 应用场景…...

编程日记 2025/7/16 1:33:07

Android第六次面试总结（自定义 View与事件分发）

在 Android 中实现自定义 View 处理 1 万条数据的流畅滑动，需结合视图复用、按需绘制、硬件加速等核心技术。以下是具体实现方案： 一、核心优化策略 1. 视图复用机制（类似 RecyclerView） ViewHolder 模式：将每个数据…...

编程日记 2025/7/14 13:51:48

深度解读 AWS IAM：身份访问管理与安全的核心纽带

导语在 AWS（亚马逊云服务）的生态体系中，AWS IAM（Identity and Access Management）犹如坚固的堡垒，守护着用户在云端的各类资源。它不仅是管理用户身份与访问权限的关键工具，更是维系 AWS 安全…...

编程日记 2025/7/17 19:22:51

Oracle相关的面试题

以下是150道Oracle相关的面试题，涵盖了Oracle的基础概念、架构、SQL与PL/SQL、性能调优、高可用性、备份与恢复、安全、分区与索引、存储与内存管理、网络与连接、版本与升级等方面，希望对你有所帮助。 Oracle基础概念 1. 什么是Oracle数据库&#xff1…...

编程日记 2025/7/14 11:36:09

DQL语句-distinct去重

MySQL | DQL语句-distinct去重 🪄个人博客：https://vite.xingji.fun 查询工作岗位 select job from emp;mysql> select job from emp;----------- | job | ----------- | CLERK | | SALESMAN | | SALESMAN | | MANAGER | | SALESMAN …...

编程日记 2025/6/28 1:40:38

GroupDocs.Total for Java 摸索学习

继Aspose.Total for Java 全套组件的学习之后，发现了GroupDocs.Total系列产品的13款，也是花了许久的事件，逐个的学习摸索、深度分析、总结实践，掌握了它们的科学使用。商业技术软件，作为技术广度学习探索使用&#x…...

编程日记 2025/7/15 0:01:35

⑦（ACG-网络配置）

网络配置是指对计算机网络的各种参数进行设置和调整，以实现网络正常运行和高效通信。网络配置包括多方面的内容，常见的配置包括： 1. IP地址设置：IP地址是设备在网络中的身份标识，设置IP地址是网络配置的基础&#xff…...

编程日记 2025/7/16 15:11:29

智能汽车图像及视频处理方案，支持视频智能包装能力

美摄科技的智能汽车图像及视频处理方案，通过深度学习算法与先进的色彩管理技术，能够自动调整图像中的亮度、对比度、饱和度等关键参数，确保在各种光线条件下，图像都能呈现出最接近人眼的自然色彩与细节层次。这不仅提升了驾驶者的…...

编程日记 2025/7/17 1:18:31

【电子通识】铅笔硬度简史：从石墨到工业标准

在工作中我们会发现有时要使用铅笔硬度计来测试材料的硬度。比如说手机的液晶屏，我们可能要求要通过3H、4H等等。那么为什么会用铅笔来做硬度测试呢？这就要知道相关的历史了。铅笔硬度简史：从石墨到工业标准 “一支铅笔，如何成…...

编程日记 2025/7/12 16:31:35

前端自动化测试(一)：揭秘自动化测试秘诀

目录 [TOC](目录)前言自动化测试 VS 手动测试测试分类何为单元测试单元测试的优缺点优点缺点测试案例测试代码测试函数的封装实现 expect 方法实现 test 函数结语正文开始 ， 如果觉得文章对您有帮助，请帮我三连订阅，谢谢💖&…...

编程日记 2025/7/13 3:57:33

《Python实战进阶》No37: 强化学习入门：Q-Learning 与 DQN-加餐版1 Q-Learning算法可视化

在《Python实战进阶》No37: 强化学习入门：Q-Learning 与 DQN 这篇文章中，我们介绍了Q-Learning算法走出迷宫的代码实践，本文加餐，把Q-Learning算法通过代码可视化呈现。我尝试了使用Matplotlib实现，但局限于Matplotli…...

编程日记 2025/7/17 17:35:35

将ZABBIX结合AI实现自动化运维

1. 执行摘要评估将ZABBIX监控系统与人工智能（AI）相结合，以实现自动化IT运维的可行性。这种集成具有显著的潜力，能够提升IT运维的效率、可靠性和主动性。通过利用ZABBIX强大的监控和告警功能，以及AI在异常检测、根因分…...

编程日记 2025/7/16 8:12:11

Go 语言规范学习（2）

文章目录 VariablesTypesBoolean typesNumeric typesString typesArray typesSlice typesStruct typesPointer typesFunction typesInterface typesBasic interfacesEmbedded interfacesGeneral interfaces【泛型接口】Implementing an interface【实现一个接口】 Map typesCha…...

编程日记 2025/7/17 10:49:24

XCode中使用MonkeyDev开发iOS版的Comand-line Tool的daemon程序

前提条件：iphone手机越狱ios15，cydia/Sileo中安装好ssh，ldid等相关的常用插件备注：如何iphone是ios15以下的越狱机，可直接看11步 1. 安装MonkeyDev sudo /bin/sh -c "$(curl -fsSL https://raw.githubusercon…...

编程日记 2025/7/17 10:04:42