王新阳

wangxinyang

用jQuery对html转义字符进行反转义

$('<div></div>').html(转义后的html).text();

datetimepicker手册

来源:
https://xdsoft.net/jqplugins/datetimepicker/
https://github.com/xdan/datetimepicker

Full options list

NamedefaultDescrEx.
lazyInitfalseInitializing plugin occurs only when the user interacts. Greatly accelerates plugin work with a large number of fields 
parentID'body'Attach datetimepicker to this element, which can be either a selector or a DOM/JQuery element
{parentID:'#parent'}
valuenullCurrent value datetimepicker. If it is set, ignored input.value
{value:'12.03.2013',
 format:'d.m.Y'}
langenLanguage i18n
ar - Arabic
az - Azerbaijanian (Azeri)
bg - Bulgarian
bs - Bosanski
ca - Català
ch - Simplified Chinese
cs - Čeština
da - Dansk
de - German
el - Ελληνικά
en - English
en-GB - English (British)
es - Spanish
et - "Eesti"
eu - Euskara
fa - Persian
fi - Finnish (Suomi)
fr - French
gl - Galego
he - Hebrew (עברית)
hr - Hrvatski
hu - Hungarian
id - Indonesian
it - Italian
ja - Japanese
ko - Korean (한국어)
kr - Korean
lt - Lithuanian (lietuvių)
lv - Latvian (Latviešu)
mk - Macedonian (Македонски)
mn - Mongolian (Монгол)
nl - Dutch
no - Norwegian
pl - Polish
pt - Portuguese
pt-BR - Português(Brasil)
ro - Romanian
ru - Russian
se - Swedish
sk - Slovenčina
sl - Slovenščina
sq - Albanian (Shqip)
sr - Serbian Cyrillic (Српски)
sr-YU - Serbian (Srpski)
sv - Svenska
th - Thai
tr - Turkish
uk - Ukrainian
vi - Vietnamese
zh - Simplified Chinese (简体中文)
zh-TW - Traditional Chinese (繁體中文)
$.datetimepicker.setLocale('ru');
formatY/m/d H:iFormat datetime. More Also there is a special type of «unixtime»
{format:'H'}
{format:'Y'}{format:'unixtime'}
formatDateY/m/dFormat date for minDate and maxDate
{formatDate:'d.m.Y'}
formatTimeH:iSimilarly, formatDate . But for minTime and maxTime
{formatTime:'H'}
step60Step time
{step:5}
closeOnDateSelect0 
{closeOnDateSelect:true}
closeOnWithoutClicktrue 
{ closeOnWithoutClick :false}
validateOnBlurtrueVerify datetime value from input, when losing focus. If value is not valid datetime, then to value inserts the current datetime
{ validateOnBlur:false}
timepickertrue 
{timepicker:false}
datepickertrue 
{datepicker:false}
weeksfalseShow week number
{weeks:true}
theme'default'Setting a color scheme. Now only supported default and dark theme
{theme:'dark'}
minDatefalse 
{minDate:0} // today
{minDate:'2013/12/03'}
{minDate:'-1970/01/02'} // yesterday
{minDate:'05.12.2013',formatDate:'d.m.Y'}
maxDatefalse 
{maxDate:0}
{maxDate:'2013/12/03'}
{maxDate:'+1970/01/02'} // tomorrow
{maxDate:'05.12.2013',formatDate:'d.m.Y'}
startDatefalsecalendar set date use starDate
{startDate:'1987/12/03'}
{startDate:new Date()}
{startDate:'+1970/01/02'} // tomorrow
{startDate:'08.12.1986',formatDate:'d.m.Y'}
defaultDatefalseif input value is empty, calendar set date use defaultDate
{defaultDate:'1987/12/03'}
{defaultDate:new Date()}
{defaultDate:'+1970/01/02'} // tomorrow
{defaultDate:'08.12.1986',formatDate:'d.m.Y'}
defaultTimefalseif input value is empty, timepicker set time use defaultTime
{defaultTime:'05:00'}
{defaultTime:'33-12',formatTime:'i-H'}
minTimefalse 
{minTime:0,}// now
{minTime:new Date()}
{minTime:'12:00'}
{minTime:'13:45:34',formatTime:'H:i:s'}
maxTimefalse 
{maxTime:0,}
{maxTime:'12:00'}
{maxTime:'13:45:34',formatTime:'H:i:s'}
allowTimes[] 
{allowTimes:[
  '09:00',
  '11:00',
  '12:00',
  '21:00'
]}
maskfalseUse mask for input. true - automatically generates a mask on the field 'format', Digit from 0 to 9, set the highest possible digit for the value. For example: the first digit of hours can not be greater than 2, and the first digit of the minutes can not be greater than 5
{mask:'9999/19/39',format:'Y/m/d'}
{mask:true,format:'Y/m/d'} // automatically generate a mask 9999/99/99
{mask:'29:59',format:'H:i'} //
{mask:true,format:'H:i'} //automatically generate a mask 99:99
openedfalse  
yearOffset0Year offset for Buddhist era 
inlinefalse  
todayButtontrueShow button "Go To Today" 
defaultSelecttrueHighlight the current date even if the input is empty 
allowBlankfalseAllow field to be empty even with the option validateOnBlur in true 
timepickerScrollbartrue  
onSelectDatefunction(){} 
onSelectDate:function(ct,$i){
  alert(ct.dateFormat('d/m/Y'))
}
onSelectTimefunction(current_time,$input){}  
onChangeMonthfunction(current_time,$input){}  
onChangeYearfunction(current_time,$input){}  
onChangeDateTimefunction(current_time,$input){}  
onShowfunction(current_time,$input){}  
onClosefunction(current_time,$input){} 
onSelectDate:function(ct,$i){
  $i.datetimepicker('destroy');
}
onGeneratefunction(current_time,$input){}trigger after construct calendar and timepicker 
withoutCopyrighttrue  
inverseButtonfalse  
scrollMonthtrue  
scrollTimetrue  
scrollInputtrue  
hours12false  
yearStart1950Start value for fast Year selector 
yearEnd2050End value for fast Year selector 
roundTimeroundRound time in timepicker, possible values: round, ceil, floor
{roundTime:'floor'}
dayOfWeekStart0

Star week DatePicker. Default Sunday - 0.

Monday - 1 ...

 
className   
weekends[] 
[
	'01.01.2014','02.01.2014','03.01.2014',
	'04.01.2014','05.01.2014','06.01.2014'
]
disabledDates[]

Disbale all dates in list

{
	disabledDates: ['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014'],
	formatDate:'d.m.Y'
}
allowDates[]

Allow all dates in list

{
	allowDates: ['01.01.2014','02.01.2014','03.01.2014','05.01.2014','06.01.2014'],
	formatDate:'d.m.Y'
}
allowDateRe[]

Use Regex to check dates

{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
disabledWeekDays[]

Disable days listed by index

[0, 3, 4]
id   
style   
ownerDocumentdocumentThe ownerDocument object for the datetimepicker to properly attach events and calc position (iframe support). 
contentWindowwindowThe contentWindow object that contains the datetimepicker to properly attach events (iframe support). 

Methods

show

Show Datetimepicker

$('#input').datetimepicker();
$('button.somebutton').on('click', function () {
    $('#input').datetimepicker('show');
});

hide

Hide Datetimepicker

$('#input').datetimepicker();
$(window).on('resize', function () {
    $('#input').datetimepicker('hide');
});

toggle

Sgow/Hide Datetimepicker

$('#input').datetimepicker();
$('button.trigger').on('click', function () {
    $('#input').datetimepicker('toggle');
});

destroy

Destroy datetimepicker

$('#input').datetimepicker();
$('#input').datetimepicker('destroy');

reset

Reset datetimepicker's value

$('#input').datetimepicker();
$('#input').val('12/01/2006');
$('#input')
    .datetimepicker('show')
    .datetimepicker('reset')

validate

Validate datetimepicker's value

$('#input').datetimepicker();
$('#input').datetimepicker(validate)

setOptions

Set datetimepicker's options

$('#input').datetimepicker({format: 'd.m.Y'});
$('#input').datetimepicker('setOptions', {format: 'd/m/Y'});
//or
$('#input').datetimepicker({format: 'd/m/Y'});

getValue

Get current datetimepicker's value (Date object)

$('#input').datetimepicker();
$('button.somebutton').on('click', function () {
    var d = $('#input').datetimepicker('getValue');
    console.log(d.getFullYear());
});

JS之array.sort

array.sort(compareFunction)
参数值

参数描述
compareFunction

可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值,具体取决于参数,例如:

  • function(a, b){return a-b}

sort() 方法比较两个值时,将值发送给比较函数,根据返回的(负、零、正)值对值进行排序。

举例:

比较 40 和 100 时,sort() 方法调用比较函数(40,100)。

该函数计算 40-100,并返回 -60(负值)。

sort 函数会将 40 排序为小于 100 的值。

JS array.sort() 中文排序

// 创建包含中文元素的数组
var arr = ['张三', '李四', '王五'];
 
// 自定义比较函数
function compare(a, b) {
    return a.localeCompare(b); // 根据本地化设置对中文进行排序
}
 
arr.sort(compare);
console.log(arr); // 输出结果为 ["李四", "王五", "张三"]

按升序对数组中的数字排序

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});

按降序对数组中的数字排序

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});

数组反转

array.reverse()

深入理解JavaScript——Object(对象)

转自:https://zhuanlan.zhihu.com/p/556955018

先回顾下之前一节所讲知识

  • 引用类型指的是 object
  • object 包括内置对象、宿主对象、自定义对象
  • 内置对象中有 Object、Function、Array、String、Number、Boolean 等原生对象构造函数
  • 在 JavaScript 中,一切皆对象(除 undefined、null 外)

无论是内置对象,还是自定义对象,都是基于 Object 来创建,其中的原理是原型继承,所以笔者喜欢称 Object.prototype 为“始祖巨人”,一切力量源于尤弥尔

我们看看 Object 是什么,它能做什么,并将其扩展,连接 Object 相关的各个知识点。知识列表如下:

  • 属性与方法
  • 如何创建对象
  • 如何拷贝对象
  • 对象继承的秘密——原型
  • 继承的九种方法

属性与方法

JavaScript 对象可以从一个称为原型的对象里继承属性。对象的方法通常是继承的属性。这种”原型式继承“(prototypal inheritance)是 JavaScript 的核心特征

可以看下这个例子

var johan = { name: 'johan' };
console.dir(johan);
Object的属性与方法

能看出,我们使用对象字面量的方法创建了一个对象实例 johan,并赋予了一个属性 name,值为 johan,当打印日志时,发现多了一个对象[[Prototype]],并且这个对象中有很多对象

这是因为「对象字面量」创建的实例,在底层已经做了「隐式继承」的操作,它和 new Object('johan') 是一个意思,除此之外,如果使用 new ,会进行原型继承,[[prototype]] 正是继承 Object 的原型(即 Object.prototype)

这里,不妨多说一句,实例是继承 Object.prototype,而不是 Object,原型才会被继承,构造函数是个空壳,不信,你答应 Object 和 Object.prototype,看看内容

console.dir(Object)如下图所示:

console.dir(Object)

console.dir(Object.prototype)如下图所示

console.dir(Object.prototype)

johan 的 [[prototype]] 和 Object 的 prototype 的内容一致

关于原型和继承的内容后文会详细说明,这里埋个伏笔

看以上例子,你能发现 Object 的属性和方法不少,而且它的实例也有属性和方法,这里对其进行说明注解

静态方法

  • Object.assign():通过复制一个或多个对象来创建一个新的对象
  • Object.create():使用指定的原型对象和属性创建一个新对象
  • Object.defineProperty():给对象添加一个属性并指定该属性的配置
  • Object.defineProperties():给对象添加多个属性并分别指定它们的配置
  • Object.entries():返回给定对象自身可枚举属性的 [key, value] 数组
  • Object.keys():返回一个包含所有给定对象自身可枚举属性名称的数组
  • Object.values():返回给定对象自身可枚举值的数组

实例属性

  • Object.prototype.constructor:一个引用值,指向 Object 构造函数
  • Object.prototype.__proto__:指向一个对象,当一个 object 实例化时,使用该对象作为实例化对象的原型

实例方法

  • Object.prototype.hasOwnProperty():返回一个布尔值,用于表示一个对象自身是否包含指定的属性,该方法并不会查找原型链上继承来的属性
    • 用 hasOwnProperty 就能检测出,它能区别自身属性与继承属性
  • Object.prototype.isPrototypeOf():返回一个布尔值,用于表示该方法所调用的对象是否在指定对象的原型链中
  • Object.prototype.toString():返回一个代表该对象的字符串。
  • Object.prototype.valueOf():返回指定对象的原始值

更多信息可以查看 MDN

了解 Object 的属性、方法,以及基于它创建的实例属性和方法后,我们去看看如何创建对象

创建对象

有三种方法。对象直接量、关键字 new、 Object.create 函数来创建对象

对象直接量

创建一个新对象的最简单的方法,就是用对象直接量,就如使用以下语句:

var obj = {};

{} 表示的 new Object()

关键字 new

使用 new 创建新对象,一般要跟随一个函数调用。这里的函数称为构造函数(constructor),构造函数用以初始化一个新创建的对象。例如:

var obj = new Object(); // 效果如同 var obj = {}

更多内容,可查看这篇 new 做了什么

Object.create

此方法是 ECMAScript 5 定义了,它牵扯到原型、继承等方面的知识。简单来说,它创造了一个新对象,其中第一个参数就是这个对象的原型。而第二个可选参数,是对其属性的更多描述。例如:

var obj = Object.create({ name: 'johan', age: 23 }); // obj 继承了属性name 和 age
var obj2 = Object.create(null); // obj2 不继承任何属性和方法
var obj3 = Object.create(Object.prototype); // 与 {} 和 new Object() 一个意思

更多内容,可查看这篇 Object.create

之所以将 new 和 Object.create 单独拿出来说,是因为两则都是比较重要的知识点,非一两句就能说明白

了解 Object 是如何创造的之后,我们看看如何赋值

如何拷贝对象

赋值是简单的,但赋值后的再赋值,就会引起源对象被修改

var o1 = { name: 'johan' };
var o2 = o1;
o2.name = 'elaine';
console.log(o1); // {name: 'elaine'}
console.log(o2); // {name: 'elaine'}

之前文章也说过,因为 Object 是引用类型,引用类型的拷贝拷贝的是引用地址,所以当 o2 被修改时,o1 也随之被修改

针对如何拷贝对象,这篇文章拷贝的秘密会对其进行说明

对象继承的秘密——原型

要想解释 JavaScript 中为什么大多数元素都是对象,就必须先知道原型。JavaScript 是一门基于原型的语言——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层,以此类推。这种关系常被称为原型链

有关原型和原型链的知识,会归纳总结为一篇——原型

继承的九种方法

原型是实现继承的方法之一,当然 JavaScript 还有其他的方法,总共九种

  • 原型链继承
  • 盗用构造函数
  • 组合继承(原型链+盗用构造函数)
  • 原型式继承
    • Object.create
    • Object.setPrototypeOf
  • 寄生式继承
  • 寄生式组合继承
    • Object.create + 盗用构造函数
    • Object.setPrototypeOf + 盗用构造函数
  • 类继承

具体的文章会在继承说明

总结

这一节,我们就 Object 进行展开,详细说明了 Object 及其实例的属性与方法。并对如何创建对象、如何拷贝对象、原型、继承等进行说明分析,因篇幅以及知识点聚焦问题,本节不做过多说明,下一节,我们从如何创建对象之new说起


系列文章

lodop打印控件-关于谷歌Chrome浏览器94版跨域问题的解决方案

谷歌浏览器再次迈出激进安全步骤,Win10+Chrome94版阻断http页面访问localhost服务, 这一举动广泛影响了Web模式的设备管理系统,例如路由服务、打印服务等,其中也包括C-Lodop软件。 安全是个美好的托词,真正让谷歌贸然行动的动机是大力推广https协议,而https背后是TLS证书, TLS证书背后是浏览器厂商的年费分成,利益巨大...闲话少说,解决方案如下:

有四种方法,选其一就行:

一、网站改用HTTPS方式(彻底方案)

二、安装最新的C-Lodop6.564及后版本,并更新LodopFuncs.js文件;

三、手动修改客户浏览器安全设置,在Chrome地址栏输入:chrome://flags/#block-insecure-private-network-requests

看到底色泛黄的“Block insecure...”项的 Default 值,改选成 Disabled然后窗口下方会出现蓝底的Relaunch按钮,点它重启浏览器。

四、客户端改用低版本Chrome(94版前)浏览器,简单办法是安装360急速版(Chrome内核)

注:微软的浏览器Edge94版因为采用了Chrome内核,故以上解决方案也适用。

layui自动触发select事件

来源:https://toscode.gitee.com/layui/layui/issues/I5JMRW

$(obj).siblings("div.layui-form-select").find("dl dd[lay-value='"+value+"']").click();

国内常用前端静态资源公共库

转自:https://azpay.cn/post/210.html

BootCDN 是 极兔云 联合 Bootstrap 中文网 共同支持并维护的前端开源项目免费 CDN 服务,致力于为 jQuery、Bootstrap、Vue.js 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 开源项目仓库。

官网:https://www.bootcdn.cn

Staticfile CDN 是由国内优秀的云存储服务商 七牛云 提供存储和加速赞助,技术社区掘金支持。同步国外 cdnjs 源站,同时由国内开源贡献者提交其它有价值的库。

官网:https://www.staticfile.org

360 前端静态资源库是由奇舞团支持并维护的开源项目免费 CDN 服务,支持 HTTPS 和 HTTP/2,囊括上千个前端资源库和 Google 字体库。该站静态资源库数据均同步于 cdnjs 开源项目仓库。

官网:https://cdn.baomitu.com

字节跳动静态资源库支持多协议、资源动态拼接、快速检索及资源的动态更新,安全、稳定、实时。本网站静态资源定期同步自 cdnjs ,有多个文件拼接的功能。

官网:https://cdn.bytedance.com

js 字符和unicode互转

fromCharCodecharCodeAt

String.fromCharCode(97); //a
String.fromCharCode(97,97); //aa
String.fromCharCode(20013); //中
'中国'.charCodeAt(0); //20013

js下载文件

普通的jQuery中的ajax请求后台,并不能处理Blob类型的数据,这里用的原生的XMLHttpRequest请求后台

转自:https://blog.csdn.net/lf1934305268/article/details/123401275

     var xhr = new XMLHttpRequest();
            xhr.open("get",url, true);
            xhr.responseType = "blob";
            xhr.onload = function() {

                if (this.status == 200) {
                    $.unblockUI();
                    var blob = this.response;
                    if(blob.type == "text/html"){
                        return false
                    }
                    var fileName = "aaaa.xlsx";
                    if(window.navigator.msSaveOrOpenBlob){            // IE浏览器下
                        navigator.msSaveBlob(blob, fileName);
                    } else {
                        var  link = document.createElement("a");
                        link.href = window.URL.createObjectURL(blob);
                        link.download = fileName;
                        link.click();
                        window.URL.revokeObjectURL(link.href);
                    }
                }else{
                }
            }

另:IE浏览器已不再使用,可以删除对IE浏览器的判断

我的代码:

	var xhr = new XMLHttpRequest();
	xhr.timeout = 600000; //设置超时毫秒数(0为永不超时)
	xhr.open('GET', url, true);
	xhr.responseType = 'blob';
	xhr.onload = function(){
		if(this.status != 200){
			return;
		}
		var blob = this.response;
		if(blob.type == "text/html"){
			console.log('error');
			return false;
		}
		var allow_type=['video/quicktime','video/mp4'];
		if(allow_type.indexOf(blob.type)==-1){
			console.log('content-type not allowed');
			return false;
		}

		console.log(filename+' 下载完成,大小'+blob.size+'字节');

		var url = window.URL.createObjectURL(blob);
		var a = document.createElement('a');
		a.href = url;
		a.download = filename;
		a.click();
		window.URL.revokeObjectURL(a.href);
	}
	xhr.onerror = function(){
		console.log('error');
		console.log(this.status);
		console.log(this);
	}
	xhr.ontimeout = function(){
		console.log('timeout');
		console.log(this.status);
		console.log(this);
	}
	xhr.send();


localStorage简明教程

localStorage API(属性和方法):

length:返回 localStorage 中的键值对的数目
setItem():增加一个键值对到 localStorage 中
getItem():从 localStorage 中查询指定 key 的值
removeItem():从 localStorage 中删除指定的键值对
clear():清空 localStorage 中所有键值对
key(): 传入一个数字 n,用于返回指定第 n 个键的名字


2024-11-23 星期六 农历十月二十三