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

用html+javascript打造公文一键排版系统14：为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项

news 2026/2/9 17:33:16

一、实际工作中需要对转换选项细化内容

在昨天我们实现了最简单的半角字符和全角字符相互转换功能，就是将英文字母、阿拉伯数字、标点符号、空格全部进行转换。

在实际工作中，我们有时只想英文字母、阿拉伯数字、标点符号、空格之中的一两类进行转换，而其它的保持不变。

比如将半角英文字母转换为全角英文字母，而阿拉伯数字、标点符号、空格保持不变。

或者只想将标点符号和阿拉伯数字需要转换，而英文字母、空格保持不变，等等。

要想实现这些功能，我们需要增加一些转换内容选项。

二、用正则表达式来检测和匹配转换内容

要实现这些细化的功能，首先要能把全角和半角的英文字母、阿拉伯数字、标点符号、空格检测和匹配出来。

这可以通过正则表达式来实现。

检测和匹配阿拉伯数字、标点符号相关的正则表达式我们在之前的代码中已经实现，如下：

//判断是否为中文标点符号
String.prototype.isCnPunctuation = function() 
{ return (/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/.test(this)); //20230730修改
}//判断是否为英文标点符号
String.prototype.isEnPunctuation = function() 
{ return /[\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]/.test(this);
}//判断是否为纯半角阿拉伯数字串
String.prototype.isArabicNumEn = function() 
{return  /^\d+$/.test(this);
}//判断是否为纯全角阿拉伯数字串
String.prototype.isArabicNumCn = function() 
{//[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]=[０|１|２|３|４|５|６|７|８|９]//return (/^[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]+$/.test(this));//20230803停用return (/^[０-９]+$/.test(this));//20230803增加
}

检测和匹配英文字母的正则表达式和代码也是类似的：

//功能：判断是否为纯半角英文字母
//更新：20230804增加
String.prototype.isLetterEn = function() 
{return (/^[a-zA-Z]+$/.test(this));
} //功能：判断是否为纯全角英文字母
//更新：20230804增加
String.prototype.isLetterCn = function() 
{return (/^[ａ-ｚＡ-Ｚ]+$/.test(this));//20230804增加
}

三、更新原有代码

我们先修改界面代码，增加相关的4个checkbox选项：

<p>全角和半角字符转换：<input type="button" id="btnHalf2Full" value="半角转全角" onclick="edRichBody.innerText=half2Full(edRichBody.innerText)"   style="background:blue; color:white;  border-radius: 25px;"  /><input type="button" id="btnFull2Half" value="全角转半角" onclick="edRichBody.innerText=full2Half(edRichBody.innerText)"  style="background:green; color:white; border-radius: 25px;" /><input type="checkbox" checked id="cbIncLetter" onclick="cbIncLetter = this.checked; ">将字母一并转换<input type="checkbox" checked id="cbIncNumber" onclick="cbIncNumber = this.checked; ">将阿拉伯数字一并转换<input type="checkbox" checked id="cbIncPunctuation" onclick="cbIncPunctuation = this.checked; ">将标点符号一并转换<input type="checkbox" checked id="cbIncSpace" onclick="cbIncSpace = this.checked; ">将空格一并转换
</p>

为了获取相应的选项，我们增加四个全局变量：


const edRich = document.getElementById("editor");
var cbIncLetter = document.getElementById("cbIncLetter").checked;
var cbIncNumber = document.getElementById("cbIncNumber").checked;
var cbIncPunctuation = document.getElementById("cbIncPunctuation").checked;
var cbIncSpace = document.getElementById("cbIncSpace").checked;

四、完整代码

最后修改half2Full()和full2Half()，完整代码如下：

<!DOCTYPE HTML>
<HTML>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Author" content="PurpleEndurer"><title>公文一键排版系统</title>
</head>
<body>
<fieldset style="width: 1100px;"><legend>实时编辑区</legend><iframe id="editor" width="1200px" height="400px" style="border: solid 1px;"></iframe>
</fieldset>
<p>全角和半角字符转换：
<!--<input type="button" id="btnHalf2Full" value="半角转全角" onclick="edRichBody.innerHTML=half2Full(edRichBody.innerHTML)"   style="background:blue; color:white;  border-radius: 25px;"  /><input type="button" id="btnFull2Half" value="全角转半角" onclick="edRichBody.innerHTML=full2Half(edRichBody.innerHTML)"  style="background:green; color:white; border-radius: 25px;" />
//--><input type="button" id="btnHalf2Full" value="半角转全角" onclick="edRichBody.innerText=half2Full(edRichBody.innerText)"   style="background:blue; color:white;  border-radius: 25px;"  /><input type="button" id="btnFull2Half" value="全角转半角" onclick="edRichBody.innerText=full2Half(edRichBody.innerText)"  style="background:green; color:white; border-radius: 25px;" /><input type="checkbox" checked id="cbIncLetter" onclick="cbIncLetter = this.checked; ">将字母一并转换<input type="checkbox" checked id="cbIncNumber" onclick="cbIncNumber = this.checked;">将阿拉伯数字一并转换<input type="checkbox" checked id="cbIncPunctuation" onclick="cbIncPunctuation = this.checked;">将标点符号一并转换<input type="checkbox" checked id="cbIncSpace" onclick="cbIncSpace = this.checked; ">将空格一并转换
</p><p>调试信息</p>
<textarea id="taDbg" style="width: 1225px; height: 200px">调试信息</textarea><script>const edRich = document.getElementById("editor");
const taDbg = document.getElementById("taDbg");
const btnHalf2Full = document.getElementById("btnHalf2Full");
const btnFull2Half = document.getElementById("btnFull2Half");
var cbIncLetter = document.getElementById("cbIncLetter").checked;
var cbIncNumber = document.getElementById("cbIncNumber").checked;
var cbIncPunctuation = document.getElementById("cbIncPunctuation").checked;
var cbIncSpace = document.getElementById("cbIncSpace").checked;
var edRichDoc;
var edRichBody;if (typeof(edRich)  != "undefined"){edRichDoc = edRich.contentWindow.document;edRichDoc.designMode = "on";edRichDoc.contentEditable = true;edRichBody = edRichDoc.body;edRichBody.innerHTML = '<p><a href="http://blog.csdn.net/purpleendurer">http://blog.csdn.net/purpleendurer</a></p><p></p><p style="font-family:方正小标宋简体;font-size:22pt; text-align:center; line-height:28pt;"><p align="center" style="text-align:center;text-indent:24.0pt;line-height:28.0pt"><span lang="EN-US" style="font-size:22.0pt;font-family:方正小标宋简体;mso-hansi-font-family:黑体;color:black">SQL</span><span style="font-size:22.0pt;font-family:方正小标宋简体;mso-hansi-font-family:黑体;color:black">注入基础<span lang="EN-US"><o:p></o:p></span></span></p><p style="text-indent:2em;">河池市××局、        市×× 局：   </p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><span style="font-size:16.0pt;font-family:黑体;color:black">一、<span lang="EN-US">SQL</span>注入分类<span lang="EN-US"><o:p></o:p></span></span></p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><b><span style="font-size:16.0pt;font-family:楷体_GB2312;color:black">（一）什么是<span lang="EN-US">SQL</span>注入<span lang="EN-US">?<o:p></o:p></span></span></b></p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><span lang="EN-US" style="font-size:16.0pt;font-family:仿宋_GB2312;color:black">SLQ</span><span style="font-size:16.0pt;font-family:仿宋_GB2312;color:black">注入<span lang="EN-US">(</span>英文<span lang="EN-US">: Sqlinject)</span>：当<span lang="EN-US">web</span>应用向后台数据库传递<span lang="EN-US">SQL</span>语句进行数据库操作时，如果对用户输入的参数没有经过严格的过滤，那么用户可以构造特殊的<span lang="EN-US">sq1</span>语句，从而带入到数据库中执行，获取或修改数据库中的数据。<span lang="EN-US"><o:p></o:p></span></span></p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><span style="font-size:16.0pt;color:black">&nbsp;&nbsp;1.加强技术学习。一要<span lang="EN-US"><o:p></o:p></span></span></p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><span style="font-size:16.0pt;color:black">&nbsp;&nbsp;2.强化安全保障。一要。<span lang="EN-US"><o:p></o:p></span></span></p><p>附件：河池市××关于××××××××××××××××××××××××××××××××××××××××××××××××××的通知</p><p>附件:河池市××关于××的通知</p><p>附件：河池市××关于××的通知。</p><p>附件：1.河池市××关于××的通 知</p><p>附件：1．河池市××关于××××的通 知 </p><p>2．河池市××关于×× ××的通 知 </p><p>3．河池市××关于×× ××的通 知</p><p>测试1</p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px">河池市××××局</p><p>2023年7月22日</p><p>测试2</p><p>广西壮族自治区河池市××××局</p><p>2023年7月22日</p><p>测试3</p><p>河池市××局</p><p>2023年7月22日</p><p>测试4</p><p>河池市×局</p><p>2023年7月22日</p><p>附件</p><p>附件标题</p><p>附件：</p><p>附件标题</p><p>附  件</p><p>附件标题</p>';
}
else
{window.alert("undefined");
}  //判断是否为中文标点符号
String.prototype.isCnPunctuation = function() 
{ return (/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/.test(this)); //20230730修改
}//判断是否为英文标点符号
String.prototype.isEnPunctuation = function() 
{ return /[\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]/.test(this);
}//判断是否为纯半角阿拉伯数字串
String.prototype.isArabicNumEn = function() 
{return  /^\d+$/.test(this);
}//判断是否为纯全角阿拉伯数字串
String.prototype.isArabicNumCn = function() 
{//[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]=[０|１|２|３|４|５|６|７|８|９]//return (/^[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]+$/.test(this));//20230803停用return (/^[０-９]+$/.test(this));//20230803增加
}//功能：判断是否为纯半角英文字母
//更新：20230804增加
String.prototype.isLetterEn = function() 
{return (/^[a-zA-Z]+$/.test(this));
} //功能：判断是否为纯全角英文字母
//更新：20230804增加
String.prototype.isLetterCn = function() 
{return (/^[ａ-ｚＡ-Ｚ]+$/.test(this));//20230804增加
}//功能：半角字符转全角字符
//输入：p=待转换的字符串
//输出：转换后的字符串
//更新：20230803创建
//             20230804更新引入.isLetterEn()
function half2Full(p)
{var r = "";	//resultfor (var i = 0; i < p.length; i++){if ( (!cbIncLetter && p[i].isLetterEn())	//不包括英文字母，20230804引入.isLetterEn()|| (!cbIncNumber && p[i].isArabicNumEn())	//不包括阿拉伯数字|| (!cbIncPunctuation && p[i].isEnPunctuation()) //不包括标点符号 || (!cbIncSpace && c==0x0020) )//不包括空格{r  += p[i];continue;}var c = p.charCodeAt(i);if (c==0x0020)	//处理空格{c = 0x03000;}else{if  (c >= 0x0021 && c <= 0x007E){c += 65248;}}//ifr += String.fromCharCode(c);}//for
//alert(r);return r;     
}//half2Full(p)//功能：全角字符转半角字符
//输入：p=待转换的字符串
//输出：转换后的字符串
//更新：20230803创建
//             20230804更新
function full2Half(p) 
{var r = "";	//resultfor (var i = 0; i < p.length; i++){if ( (!cbIncLetter && p[i].isLetterCn())	//不包括英文字母，20230804引入.isLetterCn()|| (!cbIncNumber && p[i].isArabicNumEn())	//不包括阿拉伯数字|| (!cbIncPunctuation && p[i].isCnPunctuation())	 //不包括标点符号|| (!cbIncSpace && c==0x03000) )//不包括空格{r  += p[i];continue;}var c = p.charCodeAt(i);if (c==0x03000)	//处理空格{c = 0x0020;}else{if  (c >= 0xFF01 && c <= 0xFF5E){c -= 65248;}}//ifr += String.fromCharCode(c);}//for
//alert(r);return r;
}//full2Half(p)  /* 
function showSrc()
{if (btnShowSrc.value=="显示源码"){edRichBody.innerText = edRichBody.innerHTML;//edRichBody.innerText = edRichBody.innerHTML.replace('</p>','</p>'+chr(10));	  //edRichBody.innerText = edRichBody.innerText.replace('<\/p>','<\/p>'+chr(10)+chr(13));	  btnShowSrc.value = "显示预览";btnShowSrc.style.background = "cyan";}else{edRichBody.innerHTML = edRichBody.innerText;//edRichBody.innerHTML = edRichBody.innerText.replace(chr(10)+chr(13),'');btnShowSrc.value = "显示源码";btnShowSrc.style.background = "yellow";}
}
*/  
</script>
</body>
</html>

五、代码运行效果

六、功能拓展

我们实现了对整个编辑框内的文本的半角和全角字符相互转换功能，是否能实现对编辑框内的选定文本的半角和全角字符相互转换呢？

用html+javascript打造公文一键排版系统14：为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项

一、实际工作中需要对转换选项细化内容在昨天我们实现了最简单的半角字符和全角字符相互转换功能，就是将英文字母、阿拉伯数字、标点符号、空格全部进行转换。在实际工作中，我们有时只想英文字母、阿拉伯数字、标点符号、空格之中的一两类进行转换&a…...

编程日记 2023/8/5 14:35:08

叮咚买菜财报分析：叮咚买菜第二季度财报将低于市场预期

来源：猛兽财经作者：猛兽财经卖方分析师对叮咚买菜第二季度财报的预测尽管叮咚买菜（DDL）尚未明确披露第二季度财报的具体日期，但根据其以往的业绩公告，猛兽财经认为叮咚买菜很有可能会在8月的第二周发布…...

编程日记 2023/8/5 14:34:07

设计模式行为型——中介者模式

目录什么是中介者模式中介者模式的实现中介者模式角色中介者模式类图中介者模式代码实现中介者模式的特点优点缺点使用场景注意事项实际应用什么是中介者模式中介者模式（Mediator Pattern）属于行为型模式，是用来降低…...

编程日记 2023/8/5 14:33:05

Vue——formcreate表单设计器自定义组件实现(二)

前面我写过一个自定义电子签名的formcreate表单设计器组件，那时初识formcreate各种使用也颇为生疏，不过总算套出了一个组件不是。此次时隔半年又有机会接触formcreate，重新熟悉和领悟了一番各个方法和使用指南。趁热打铁将此次心得再次分享。…...

编程日记 2023/8/5 14:32:03

人脸验证(Face verification) 和人脸识别(Face recognition) 的区别

人脸验证(Face verification) 和人脸识别(Face recognition) 的区别 Face verification 和 Face recognition 都是人脸识别的技术，但是它们的应用和目的不同。 Face verification（人脸验证）是指通过比对两张人脸图像，判断它们是…...

编程日记 2023/8/5 14:31:02

前端如何打开钉钉（如何唤起注册表中路径与软件路径不关联的软件）

在前端唤起本地应用时，我查询了资料，在注册表中找到腾讯视频会议的注册表情况，如下： 在前端代码中加入 window.location.href"wemeet:"; 就可以直接唤起腾讯视频会议，但是我无法唤起钉钉之所以会这样&…...

编程日记 2023/8/5 14:30:00

数据可视化入门指南

数据可视化是一种将抽象的数值和数据转换为易于理解的图像的方法。它可以帮助人们更好地理解数据的含义，并且可以揭示数据中可能被忽视的模式和趋势。本文将为你提供一个简单的数据可视化入门指南。为什么数据可视化重要？ 在我们的生活中，数…...

编程日记 2023/8/5 14:29:00

React 18 响应事件

参考文章响应事件使用 React 可以在 JSX 中添加事件处理函数。其中事件处理函数为自定义函数，它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。添加事件处理函数如需添加一个事件处理函数，需要先定义一个函数…...

编程日记 2023/8/5 14:26:57

面试总结-c++

1该吹牛逼吹牛逼。在自己能说出个所以然的情况下，该吹就吹，不吹没工作，吹了有希望。比如 c组长，确有其事，但是挺唬人。说自己在北京定居也是侧面吹牛逼，证明自己的能力。还有媳妇在研究所。 2.对自己做过…...

编程日记 2023/8/5 14:25:56

Spring(九) - 解惑 spring 嵌套事务.2

1. 事务传播特性在所有使用 spring 的应用中, 声明式事务管理可能是使用率最高的功能了, 但是, 从我观察到的情况看,绝大多数人并不能深刻理解事务声明中不同事务传播属性配置的的含义, 让我们来看一下 TransactionDefinition 接口中的定义 Java代码 /** * Support a cu…...

编程日记 2023/8/5 14:24:55

Android Studio API 33 获取当前连接的WIFI名称

常规流程失败流程常规流程以下内容在 API 33 成功实现，低版本API还请自行尝试（仅推荐 API 29 - 33 用户食用） 先（至少）添加以下权限到你的 AndroidManifest.xml 文件 <uses-permission android:name"andr…...

编程日记 2023/8/5 14:23:53

ICCV 2023 | 半监督三维目标检测新SOTA：密集匹配和量化补偿

论文链接：https://arxiv.org/abs/2304.13031 开源代码仓库地址：https://github.com/AIR-DISCOVER/DQS3D 方法效果对比图：有效在半监督情况下处理临近小物体 01. 简介本文旨在解决三维室内场景中高昂的标注成本问题，特别关注半监…...

编程日记 2023/8/5 14:22:52

python+django+mysql项目实践三（用户管理）

python项目实践环境说明： Pycharm 开发环境 Django 前端 MySQL 数据库 Navicat 数据库管理用户列表展示 urls view models html <!DOCTYPE html> <html...

编程日记 2023/8/5 14:21:51

Java多线程 | 操作线程的方法详解

文章目录一、线程的启动1.1 start()方法二、线程的休眠与中断2.1 Thread.sleep()方法2.2 interrupt()方法三、线程的等待与唤醒3.1 wait()方法3.2 Object类的notify()和notifyAll()方法3.3 await()和signal()方法3.4 使用join()方法等待线程执行完成四、线程的状态控制与管…...

编程日记 2023/8/5 14:20:49

【ConcurrentHashMap1.7源码】十分钟带你深入ConcurrentHashMap并发解析

ConcurrentHashMap1.7源码四个核心要点初始化PUT扩容GET Unsafe 初始化五个构造方法 /*** Creates a new, empty map with the default initial table size (16).*/public ConcurrentHashMap() {}/*** Creates a new, empty map with an initial table size* accommodati…...

编程日记 2023/8/5 14:19:48

程序框架-事件中心模块-观察者模式

一、观察者模式 1.1 观察者模式定义意图： 定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变是，所有依赖于它的对象都能得到通知并自动更新。适用性： 当一个对象状态的改变需要改变其他对象， 或实际对…...

编程日记 2023/8/5 14:18:45

通过AOP的ProceedingJoinPoint获取方法信息

文章目录 ProceedingJoinPoint用法 ProceedingJoinPoint用法获得切点对应的方法（Method） 本处Method指的是java.lang.reflect.Method 若切入点表达式是方法，则获得的是切入点方法的信息。若切入点表达式是注解，则获得的是使用了…...

编程日记 2023/8/5 14:17:44

【JavaSE】初步认识类和对象

【本节目标】 1. 掌握类的定义方式以及对象的实例化 2. 掌握类中的成员变量和成员方法的使用 3. 掌握对象的整个初始化过程目录 1. 面向对象的初步认知 2. 类定义和使用 3. 类的实例化 4. this引用 1. 面向对象的初步认知 1.1 什么是面向对象 Java是一门纯面向对象的语…...

编程日记 2023/8/5 14:16:42

python中的matplotlib画饼图（数据分析与可视化）

直接开始 1、先安装pandas和matplotlib pip install pandas pip install matplotlib2、然后在py文件中导入 import pandas as pd import matplotlib.pyplot as plt3、然后直接写代码 import pandas as pd import matplotlib.pyplot as pltpd.set_option("max_columns&…...

编程日记 2023/8/5 14:15:41

用Rust实现23种设计模式之职责链模式

关注我，学习Rust不迷路！！ 优点解耦：职责链模式将请求发送者和接收者解耦，使得多个对象都有机会处理请求，而不是将请求的发送者和接收者紧密耦合在一起。灵活性：可以动态地改变或扩展处理请求…...

编程日记 2023/8/5 14:14:39

接口测试中缓存处理策略

在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

JavaSec-RCE

简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/2/8 6:37:39

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用一、背景与挑战大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

在rocky linux 9.5上在线安装 docker

前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制半数机制（过半机制&#xff0…...

编程新知 2026/1/25 13:13:20