JavaScript
关注
分享
扫一扫
文章平均质量分 62
JavaScript专栏
duansamve
我的Web前端(React、Vue)、NodeJS......开发笔记
展开
-
javascript设计模式及如何开发一个js框架
构造器模式工厂模式单例模式观察者模式适配器模式原创 2018-08-26 22:43:09 · 158 阅读 · 0 评论
-
数据可视化工具汇总
Three.js是一个基于WebGL的JavaScript库，它简化了在Web浏览器中创建和展示三维图形的过程。Three.js拥有活跃的社区和众多的第三方插件，如GLTFLoader、OrbitControls等，提供了丰富的功能和扩展性。VTK是一款免费开放的软件工具，用于3D图形、建模、图像处理、科学数据可视化和其他信息可视化。原创 2024-07-31 14:41:26 · 881 阅读 · 0 评论 -
浏览器原理及渲染引擎解析网页的过程、JavaScript 引擎解析 JavaScript 代码的过程
浏览器：是安装在电脑里面的一个软件，能够将页面内容渲染出来呈现给用户查看，并让用户与网页进行交互。服务器其实就是性能比较高的计算机，这些计算机 24 小时不断电、 不关机。开发者在本地开发出 HTML 网页文件、CSS 样式文件、JS 脚本程序等，然后上传给服务器进行存储和共享，用户就可以访问到这些资源了。例如；原创 2024-05-23 11:33:22 · 793 阅读 · 0 评论 -
JS性能优化策略
JS 是一门弱类型语言，拥有独特的原型链机制，在宿主中的拥有一套 DOM、BOM 操作接口，增加其性能控制的复杂性。JavaScript 主要应用场景依然围绕浏览器展开，所以，它在浏览器中的行为表现依然重要。本篇将从笔者的实践经验出发，分别从加载解析、语法优化、DOM 操作等各方面归纳总结优秀的 JS 代码性能优化策略。与此同时，关注如何编写更优雅干净的 JS 代码。转载 2024-05-23 10:02:52 · 119 阅读 · 0 评论 -
JS实现IE11浏览器中打开Chrome浏览器(含IE配置启用ActiveX控件配置)
ie11浏览器运行JavaScript脚本打开Chrome浏览器ie配置启用ActiveX控件配置原创 2023-01-13 16:33:27 · 3735 阅读 · 2 评论 -
JavaScript中Blob对象及示例
Blob(binary large object)是计算机界通用术语之一，表示二进制大对象。在JavaScript中，Blob通常表示二进制数据，不过，它们不一定非得是大量数据，Blob也可以表示一个小型文本文件的内容原创 2019-06-09 14:09:29 · 914 阅读 · 0 评论 -
树形结构数据中提取每一个叶子节点的完整父子关系数据
一个典型的树形结构数据，比如element-tree：const JSONData = [ { id: 1001, label: "一级目录1", show: true, children: [ { id: 1008, label: "新目录1-1", show: true, children: [原创 2022-05-23 21:47:34 · 542 阅读 · 0 评论 -
DOM知识结构
一、编程接口：可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。二、节点类型：1.文档类节点2.元素类节点3.属性类节点4.文本类节点5.注释节点三、节点要素：1、nodeType：返回...原创 2018-04-16 22:29:46 · 203 阅读 · 0 评论 -
Web上实现文件上传的几种方式（原生/Antd+Node.js实现）
一、FormData+express：index.html:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>multer的使用方案</title> </head> <body> <form action="/api/upload" method="post" enctype="multipa原创 2021-05-09 15:57:37 · 576 阅读 · 0 评论 -
浏览器返回上一步时执行相关内容
window.onpageshow = function (event) { if ( event.persisted || (window.performance && window.performance.navigation.type == 2) ) { //执行相关内容 window.location.reload(); }}原创 2021-03-03 21:48:47 · 218 阅读 · 1 评论 -
JavaScript中将日期时间转换为时间戳（兼容ie8）
在标准浏览器中，直接使用使用如下方式即可：var dateTime = "2021-02-03 21:07";var timeStamp = new Date(dateTime).getTime();如果是在ie8中，则需要将日期中的“-”替换成“/”：var dateTime = "2021-02-03 21:07";var timeStamp = new Date(str.replace(/-/g, "/")).getTime();...原创 2021-02-03 21:11:15 · 762 阅读 · 0 评论 -
回车时禁止执行按钮默认事件
一、onkeydown事件中添加“if(event.keyCode==13){return false;}”阻止按钮默认事件：<button class="btn btn-action edit" title="编辑" onkeydown="if(event.keyCode==13){return false;}" onclick="editIscsiAclRules(\'' + row.iqn + '\',\'' + row.addr + '\',\'' + row.mac + '\',\'原创 2021-01-13 22:37:10 · 543 阅读 · 0 评论 -
JS实现复制input中value值到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=u.原创 2020-11-06 22:16:28 · 441 阅读 · 0 评论 -
JavaScript实现文本框和密码框placeholder效果（兼容ie8）
<input type="text" name="hotGoods" id="search"> $(document).ready(function () { $("#search").val('请输入您要搜索的内容').css('color', '#ccc'); replacePlaceholder($("#search")); }); function replacePlaceholder.原创 2020-10-30 22:39:28 · 336 阅读 · 0 评论 -
重置及美化表单元素file的方法（兼容ie8）
表单中经常有需要上传文件的表单项，但是这是一个比较特殊的表单控件，在各个浏览器中的呈现方式都不一样。在IE中，它的呈现方式是不可输入的输入框加按钮；在Chrome下，它的呈现方式是一个按钮加右边的文件名，如果没有文件被选中，则显示“No file chosen”。FF和IE8显示相同。除了呈现方式不同之外，其特殊性也表现在其value属性上。因为安全性的问题，我们不能设置它的value值，甚至连读它的value值都不是我们想要的。在IE8下，读value值可以返回真实的文件路径；而在Chrome下则只能原创 2020-10-15 22:31:38 · 587 阅读 · 0 评论 -
常用正则表达式
// 每段为0-255之间任意数字var ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])$/; // mac，如：12:cd:23:ff:dd:eevar mac = /^[A-Fa-f\d]{2}[:-][A-.原创 2020-10-13 22:52:24 · 333 阅读 · 0 评论 -
Form表单提交之后，获取返回值
经常用form表单提交的小伙伴有没有发现，form表单默认的提交是没有返回值的，而且默认提交成功之后是跳转，跳转的action的路径，下面写一下默认的提交如何获取到form表单的返回值json，并且阻止默认的跳转动作。第一种方式 ：让form默认调整当前的iframe 即可页面结构见下面：<form target="form" action="" enctype="multipart/form-data" method="post"> <input type="fi...转载 2020-09-07 22:55:36 · 23352 阅读 · 2 评论 -
iframe子页面与父页面之间通信
一、同域下父子页面的通信父页面parent.html<html><head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.say(); myFrame.document.get转载 2020-07-07 21:30:37 · 423 阅读 · 0 评论 -
跨域请求时携带cookie
$.ajax({ type : "POST", url : url, cache: false, async : false, data : jsonData, dataType : 'json', timeout : 10000, crossDomain:true, //设置跨域为true xhrFields: { withCredentials: true.原创 2020-06-09 21:19:51 · 397 阅读 · 0 评论 -
各浏览器类型及版本检测
function getExplorerInfo() { var explorer = window.navigator.userAgent.toLowerCase(); //ie if (explorer.indexOf("msie") >= 0) { var ver = explorer.match(/msie ([\d.]+)/)[1]; return { type: "IE", versi...原创 2020-06-02 22:41:57 · 332 阅读 · 0 评论 -
防止回车时提交表单
如何防止回车（Enter）键提交表单，其实很简单，就一句话。onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了。<form name="form1" action="action/soft_add_action.php" enctype="multipart/form-data" method="post" onkeydown="if(event.keyCode==13)return false;"> ...原创 2020-05-25 21:51:54 · 200 阅读 · 0 评论 -
JavaScript将时间戳转换成正常时间(时间戳为10位需*1000，时间戳为13位的话不需乘1000)
function timestampToTime(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (dat...原创 2020-04-28 22:49:25 · 2279 阅读 · 0 评论 -
ajax没运行完时切换页面报错解决方案
如：$.ajax{ ..... error:function(){ function001(); } }在页面没有加载完成时将function001 禁掉如下： window.onbeforeunload = win...转载 2020-03-31 21:22:53 · 351 阅读 · 0 评论 -
对象数组按属性排序注意事项
一、普通数组排序：js中用方法sort()为数组排序。sort()方法有一个可选参数，是用来确定元素顺序的函数。如果这个参数被省略，那么数组中的元素将按照ASCII字符顺序进行排序。如：var arr = ["a", "b", "A", "B"];arr.sort();console.log(arr);//["A", "B", "a", "b"]因为字母A、B的ASCII值分别为...转载 2020-03-16 22:13:18 · 186 阅读 · 0 评论 -
javascript：创建对象的几种方式
1、使用工厂方法创建对象：function createPerson(name, age, gender){ var obj = new Object(); obj.name = name; obj.age = age; obj.gender = gender; obj.sayName = function(){ console.l...原创 2020-02-03 11:45:40 · 119 阅读 · 0 评论 -
加载状态的实现
.shade { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #FFFFFF; z-index:99999; filter:alpha(opacity=100); /* IE */ -moz-opacity: 1; /* Moz + FF */ opacity: 1; ...原创 2019-12-03 21:19:12 · 243 阅读 · 0 评论 -
将页面内搜索结果高亮显示（使用mark.js），且页面顶部定位到第一个搜索结果
<!DOCTYPE><html> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" />...原创 2019-11-05 22:50:16 · 1060 阅读 · 0 评论 -
ztree点击树节点前的展开图标分级加载下拉树
onExpand：用于捕获节点被展开的事件回调函数，这个是关键。<ul id="share-to-department-modal-tree"></ul>var fileTreeSettingForShareToDept = { check : { enable : true, chkboxType : { "Y" : "", "N" :...原创 2019-10-23 21:43:43 · 657 阅读 · 0 评论 -
web实现断点续传
普通单文件上传：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>断点续传</title></head><body><div id="app"> <input type="...原创 2019-10-19 16:09:50 · 894 阅读 · 3 评论 -
完全由前端实现的超时时跳转到登录页（或其它页面）
var lastTime = new Date().getTime();var currentTime = new Date().getTime();var timeOut = 1*60*1000; //设置超时时间： 1分// 鼠标移动事件$(document).mousemove(function(){ lastTime = new Date().getTime(); //...原创 2019-10-19 10:34:11 · 1315 阅读 · 0 评论 -
XMLHttpRequest
XMLHttpRequest：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest原创 2019-10-16 22:56:23 · 13784 阅读 · 2 评论 -
javascript/es5中数组循环函数汇总
1、arr.forEach()：arr.forEach(for(value, index, arr){ console.log(value, index, arr);})2、arr.map()：正常情况下需配合return，返回一个新的数组，若是没有return，则功能类似forEach()let newArr = arr.map(function(value...原创 2019-08-31 22:58:36 · 347 阅读 · 1 评论 -
ztree中根据节点类型不同显示不同图标
ztree的css文件metroStyle_adm.css中添加：.ztree li span.button.dept_ico_open{margin-right:2px; background: url(./img/group.png) 0 0 no-repeat; vertical-align:top; *vertical-align:middle}.ztree li span.but...原创 2019-09-18 10:38:00 · 2021 阅读 · 0 评论 -
根据后端的文件数据流，在前端形成下载文件（不是直接通过浏览器下载）
实现原理：定义的接口不是下载文件的路径，而是通过API可以获得文件的内容，由前端把内容写入到文件中，这种方法是通过获取文件信息，在网页上利用click事件，创建一个文件，然后将文件信息写入到文件中，然后保存。主要用到了JavaScript中的Blob对象和HTML5中的FileReader对象。代码如下：python/django:from django.http import Ht...原创 2019-09-21 17:21:52 · 3308 阅读 · 0 评论 -
普通文件的上传（表单上传和ajax文件异步上传）
一、表单上传：html客户端部分：<form action="upload.ashx" method="post" enctype="multipart/form-data"> 选择文件:<input type="file" name="file1" /><br /> <原创 2018-11-26 21:51:34 · 746 阅读 · 0 评论 -
项目中常用的javascript/jquery操作
1、判断复选框是否被选中？$("#cpuWindow").is(':checked');2、设置复选框被选中：$("#cpuWindow").prop("checked",true);3、取小数位数：(mem_value/1024).toFixed(2);4、判断某个值是否在元素中：同字符中的indexOf()函数，返回值小于0，则不在ioTypeArr.ind...原创 2018-05-08 23:05:49 · 181 阅读 · 0 评论 -
ztree点击展开/收缩 按钮分级加载，解决数据量过大加载缓慢
有些项目的组织机构足足有六七万多条数据，加载十分缓慢，所考虑做成分级加载。由于本项目的ztree的树节点的点击事件已经被占用（加载组织人员），所以考虑使用ztree的 展开/收缩 （onExpand）按钮点击事件，即树前面的三角形按钮。（关键属性：isParent）加载第一级节点tree方法，效果如下图（第一次只查询父节点为null或者0的节点。此处应注意在将数据库查询到的数据转换为ztree...转载 2019-08-26 16:20:52 · 1908 阅读 · 0 评论 -
让IE8和IE9支持 placeholder
1、原因：placeholder是h5的新属性，IE10以前的浏览器(8、9)不支持此属性。2、解决方法：jQuery三方插件 jquery-placeholder3、快速开始：<!DOCTYPE html><html><head> <title>test</title> <script type...转载 2019-05-18 07:25:23 · 145 阅读 · 0 评论 -
常用表单操作
一、select：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="UTF-8"> <titl...原创 2018-08-13 21:57:38 · 303 阅读 · 0 评论 -
JavaScript中判断是否为数组和对象或数组是否为空的方法总结
console.log(Object.prototype.toString.call(a) === '[object Array]');JSON.stringify(deptIds) === "{}" || JSON.stringify(deptIds) === "[]"原创 2018-05-25 09:15:03 · 186 阅读 · 0 评论