用户界面设计日益追求人性化与便捷性。日期选择控件作为表单验证的重要组成部分，已成为现代网站、应用程序中不可或缺的交互元素。本文将从JavaScript源码的角度，对日期选择控件进行深度解析，并结合实际应用场景，探讨其在现代开发中的重要作用。
一、日期选择控件概述
1. 定义
日期选择控件是一种允许用户通过鼠标、键盘等方式选择特定日期的输入框。它具有以下特点：
（1）支持日期范围选择、单日选择、时间选择等多种模式；
（2）具有输入提示、验证功能，确保用户输入的日期符合规范；
（3）可定制样式，满足不同设计需求。
2. 类型
根据实现方式，日期选择控件可分为以下几类：
（1）原生HTML5输入控件（type=\
包含选择器设置网页中所有日期：只要一个TEXTBOX控件 跟一个BUTTON 控件 跟一个 calendar控件，page load()，this.calendar.vi**le = false;然后在写一个BUTTON CLICK 事件。
下载JQuery UI的Datepicker。
修改源码实现中文日期选择器。
在SpreadJS创建CustomCellType。
实现CustomCellType的activateEditor和deactivateEditor方法。
实现setEditorValue和getEditorValue方法。
ID选择器：
ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，例如，你将一个元素的id取值为”navi”，那么在同一页面你就不能再将其他元素id取名为”navi”了。
css选择器还是会把这些元素都选中应用样式（如class选择器那样），对于css选择器，id属性的唯一性似乎不存在。然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。
1、javaScript与java的区别？（从它们的解释，运行等方面说）
第一，javascript是基于对象的，而java是面向对象，即java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。Javascript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
第二，两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。Javascript是一种解释性编程语言，由浏览器解释执行。
第三，两种语言所采取的变量时不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明avaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。
第四，代码格式不一样。Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。
第五，嵌入方式不一样。在HTML文档中，两种编程语言的标识不同，JavaScript使用 <script>...</script> 来标识，而Java使用<applet> ... </applet>来标识。
2、请用JavaScript写出提交表单的语句表单为 frm1
frm1.submit();
3、在javascript中如何判断一个变量是否是数值型？
答：判断变量是不是数字，用javascript的内置函数 isNaN()就可以了，isNaN()函数检验参数是否是一个数字，要注意的是不是数字返回true，是的话返回false。
4、form表单中的控件都由那些？
答：form表单包含
单行文本输入框(text)
单选按钮(radio)
复选框(checkbox)
重置按钮(reset)
多行文本框(textarea)
密码框(password)
下拉列表(select)
提交按钮(submit)
注意：hidden属性可以设置控件是否隐藏。
5、表单提交的方式有哪些？
答：表单提交方式比较：
l get的特点是信息暴露、长度不能超过255字节，但是速度快。
l post的特点信息隐藏、长度不限，但是速度较慢。
6、插入视频到页面
<video src=”url” controls=”controls”></video>
7、如何将JavaScript嵌入网页？
a、使用 <script> 标签将语句嵌入文档
b、将 JavaScript 源文件链接到 HTML 文档中
8、JavaScript 对象有哪些？（比较重要）
答：浏览器窗口：window文档； document；url地址等
脚本对象： String字符串对象；Date日期对象；Math数学对象等
HTML 对象： 各种HTML标签:段落<P>；图片<IMG>；超链接<A>等
9、JavaScript 事件有哪些？
事件名
说明
onClick
鼠标单击
onChange
文本内容或下拉菜单中的选项发生改变
onFocus
获得焦点，表示文本框等获得鼠标光标。
onBlur
失去焦点，表示文本框等失去鼠标光标。
onMouseOver
鼠标悬停，即鼠标停留在图片等的上方
onMouseOut
鼠标移出，即离开图片等所在的区域
onMouseMove
鼠标移动，表示在<DIV>层等上方移动
onLoad
网页文档加载事件
onSubmit
表单提交事件
onMouseDown
鼠标按下
onMouseUp
鼠标弹起
12、innerHTML是用来做什么的？（innerHTML和innerTEXT 的区别）
答：innerHTML可以获取或修改某个HTML标签内包含的内容(包括标签与文本)
<div id=“div1”><h2>innerHTML</h2></div>
<script>
document.getElementById(“div1”).innerHTML;
</script>
13、如何使用外部 JS 文件？
答：
a、外部 JavaScript 文件可以链接到 HTML 文档中
b、script 标签的 src（源文件）属性可用于包括此外部文件
<script language=“JavaScript” src= “文件名.js">
</script>
14、javascript有何作用？（详细说明）
答：提供用户交互；动态更改内容；数据验证
15、javascript种如何声明定义变量？
答：用弱引用数据类型，var定义声明。如：var a；
16、form中的input有哪些类型？各是做什么处理使用的？
答：text，radio，checkbox，file，button，image，submit，reset，hidden。Submit是button的一个特列，也是button的一种，它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理（包括输入验证）后再提交的话，通常都必须把submit改成button，即取消其自动提交的行为，否则，将会造成提交两次的效果，对于动态网页来说，也就是对数据库操作两次。
Button具有name、value属性，能触发onclick事件。
Submit继承了button。
Submit增加了触发表单onsubmit事件的功能、增加了执行表单的submit（）方法的功能。
Input type=submit按回车提交表单
Button提交的是innerTEXT。
17、table标签中border，cellpadding td标签中colspan，rowspan分别起什么作用？
答：boder 边界；cellpadding 边距
Cellpadding，是补白，是指单元格内文字与边框的距离。
Cellspacing，两个单元格之间的距离
Colspan跨列数
Rowspan跨行数
18、form中的input可以设置readonly和disable，请问这两项属性有什么区别？
答：readonly不可编辑，但可以选择和**
disable不能编辑**选择
19、JS中的三种弹出式消息提醒（警告窗口、确认窗口、信息输入窗口）的命令是什么？（区别也会问到）
答：alert，confirm，prompt
20、当点击按钮时，如何实现两个td的值互换？
答：用javascript实现此功能。
分析：
这个题主要是考变量传值。其次是考如何取元素的值。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function submitbtn() {
var tText1 = document.getElementById('txt1');
var SubmitBtn1 = document.getElementById('submitBtn1');
var tText2 = document.getElementById('txt2');
var SubmitBtn2 = document.getElementById('submitBtn2');
SubmitBtn1.onclick = function() {
var temp = tText1.value;
tText1.value = tText2.value;
tText2.value = temp;
};
SubmitBtn2.onclick = function() {
var temp = tText2.value;
tText2.value = tText1.value;
tText1.value = temp;
};
}
window.onload = function() {
submitbtn();
}
</script>
</head>
<body>
<input type="text" value="12345666" id="txt1" />
<input type="submit" id="submitBtn1" />
<input type="text" value="12345222" id="txt2" />
<input type="submit" id="submitBtn2" /></body>
</html>
21、如何给一个Javascript的对象属性赋值？如何取得属性值？
答：一个Javascript对象的属性可以用”.”操作符或者数组方式来设置和取得：代码如下：
obj.name = “IT公司面试手册”;
obj["name"] = “IT公司面试手册”;
取得 属性的值：
var myname = obj.name;
var myname = obj["name"];
两种方法的区别是如果属性的名字如果是保留字的话，用点操作符就会报错，代码如下：
obj.for = “IT公司面试手册”；因为for是保留字，所以会报错
obj["for"] = “IT公司面试手册” 就不会报错
或者是通过:
//获取用户名对象的name属性的值
var nameVal = document.getElementById("inp1").getAttribute("name");
document.getElementById("inp1").setAttribute("class","ca1");
22、判断文本框内容是不是英文、中文、非中文？
答：
Gb2312
JS代码检查是否是中文：
Function isChinese(s,msg){
Var reg = /[^\u4E00-\u9FA5]/g;
If(reg.test(s.value)){
s.focus();
s.select();
alert(msg?msg:’改栏只能输入中文，请改正！’);
return false;
}
Return true;
}
js代码检查是否是非中文 :
function isNoChinese(s,msg){
var reg = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
if (reg.test(s.value)){s.select()
alert((msg?msg:’该栏不能输入中文及全角符号﹐请改正！’));
return false;
}
return true;
}
js代码检查是否是英文字 :
function isEnglish(s,msg){
var reg=/^[a-z]*$/gi
if(reg.test(s.value))return true
else {
alert((msg?msg:’该栏目只能输入英文字符﹐请改正’));
s.focus();
s.select();
return false;
}
}
21、Jquery的基础选择器有哪几种？ 层次过滤器、内容过滤器、表单过滤器分别列举至少三种？
基础选择器：ID选择器、类选择器、标签选择器
层次过滤器：$(“祖先选择器 所有的后代选择器”)
$(“指定的父代对象 > 对应的直系后代”)
同辈选择器：
$(“A ~ B ”)： 指定与A同辈的同级的B对象
相邻选择器：
$(“A +B”):指定与A相邻的下一个B对象
//内容过滤器：
$(“:empty”) :空内容或者不含子元素的对象
$(“A:has(选择器)”)
$(“:contains(文本内容)”)：根据内容来过滤对象
$(“:parent”):获取含有文本内容或者含有子元素的**对象
//表单选择器
$(“:input”):获取所有表单控件对象
$(“:text”):获取输入类型type=“text”的表单控件
$(“:radio”)：获取单选框的对象
$(“:checkbox”)：获取多选框的对象
$(“:file”):获取上传文件的对象type=’file’
$(“:checked”) :获取被选中的单选框或者多选框对象
$(“:selected”) ：获取下拉框被选中的对象
等等。。。
22、Jquery对dom对象追加有几种方式？
分别列举？
$(对象).append()
$(对象).appendTo(“要被追加的对象”);
Before()/ after()/prepend()/prependTo()/ html()
23、Jquery的初始化方法有几种？
有三种：
//常用的有两种：
$(function(){})
$(document).ready(function(){})
//第三种：
jQuery(function(){})
//第三种另一种写法：
jQuery(document).ready(function(){})
(注意：Jquery对象的标识符：$ 等价于 jQuery)
24、Jquery对象获取html元素的内容有哪两种？区别是什么？ Jquery对象如何对表单控件赋值或者获取表单控件的值？
Jquery对象获取元素内容的方法：$(对象).html()/ $(对象).text()
Html():可以为选中的Jquery对象设置包含html标签的内容。
Text():只能设置文本内容。
Jquery对象获取表单控件的内容：$(表单控件对象).val();
//赋值：$(表单控件对象).val(赋值);
25、通过js自定义对象，创建一个学生对象，包含姓名、性别、年龄以及学习的方法等，并写入到html页面中。如何使用原型prototype为数组Array对象添加一个构造方法？
//通过原型为Array对象添加一个add方法：
Array.prototype.add = function(参数)
{
函数体操作。
}
26、window对象下，页面跳转的几种方式？
//window对象下的页面跳转方式：
Window.open(“新打开页面的URL”,”_self/_blank/_top”,”规格”);
Window.location.href=””
Window.location.replace(“要替换的页面”);
27、Jquery对象的两种循坏方法？ Js的两种循坏遍历方法分别写案例？
Jquery对象循环的方法：
$(“选择器”).each(function(I,value)
{
});
//循环数组：
$.each(“数组对象”,function(I,value)
{})
//JS循环方法：
//第一种：
For(var i=0;i<对象.length;i++)
{
}
//第二种：
For(var I in 数组对象){}
28、如何在html页面上对一个动画元素设置样式？
通过动画过滤选择器来对动画元素设置样式：
$(“div:animated”).css({“”:””,””:””});
: 对正在动画的div元素设置样式。
前言
SortableJS是基于H5拖拽API实现的一个轻量级JS拖拽排序库，它适用于以下一些场景：
容器项目拖动排序：容器列表内的子项目，通过拖动进行位置调换，且具有动画效果；
容器间的项目移动：将一个容器列表中的子项目，拖动到另一个容器列表中（移动/克隆）。
不论是容器内元素顺序排序，或是两个容器内的元素进行移动，本质上是在通过操作DOM来实现。
下面我们先熟悉一下SortableJS基本使用。
示例1、HTML结构：
<divclass="row"><divid="leftContainer"class="list-groupcol-6"><divclass="list-group-item">Item1</div><divclass="list-group-item">Item2</div><divclass="list-group-item">Item3</div><divclass="list-group-item">Item4</div><divclass="list-group-item">Item5</div><divclass="list-group-item">Item6</div></div><divid="rightContainer"class="list-groupcol-6"><divclass="list-group-itemtinted">Item1</div><divclass="list-group-itemtinted">Item2</div><divclass="list-group-itemtinted">Item3</div><divclass="list-group-itemtinted">Item4</div><divclass="list-group-itemtinted">Item5</div><divclass="list-group-itemtinted">Item6</div></div></div>2、为容器实例化：
newSortable(leftContainer,{group:{name:'group',pull:'clone',put:true},});newSortable(rightContainer,{group:'group',});现在，就可以在容器内进行排序拖动，或者拖动左侧容器元素，添加到右侧容器中。
思路分析在看源码之前，还是需要对H5拖拽用法有一定了解，如果不熟悉，直接去看源码很容易就放弃。
若你对H5拖拽API比较熟悉，就可以根据SortableJS的视图呈现效果，想出个大概思路。
拖拽，首先要搞清楚两个词汇对象：
拖动元素：作为拖拽元素被拖起（下文叫dragEl）；
目标元素：作为拖拽元素即将被放置时的参照物（下文叫target）；
在SortableJS中，拖拽离不开以下几个事件：
dragstart：作为拖拽元素，按下鼠标开始拖动元素时触发（拖拽周期只触发一次）；
dragend：作为拖拽元素，当鼠标松开拖放元素时触发（拖拽周期只触发一次）；
dragover：作为拖拽元素，当拖动元素进行移动，会持续触发，需要在这里取消默认事件，否则元素无法被拖动（松开时元素的预览幽灵图又回去了）；
drop：作为目标元素，当鼠标松开拖放元素时触发（拖拽周期只触发一次）；
下面我们一起去分析SortableJS具体实现。
源码实例构造函数从上面的示例使用上得知，SortableJS是一个构造函数，接收容器元素和配置项：
constexpando='Sortable'+(newDate).getTime();functionSortable(el,options){this.el=el;//rootelementthis.options=options=Object.assign({},options);el[expando]=this;constdefaults={group:null,sort:true,//默认容器可以排序animation:0,removeCloneOnHide:true,//将一个容器元素拖动至另一个容器后，默认setData:function(dataTransfer,dragEl){dataTransfer.setData('Text',dragEl.textContent);}};//参数合并for(varnameindefaults){!(nameinoptions)&&(options[name]=defaults[name]);}//规范group_prepareGroup(options);//绑定原型方法为私有方法for(varfninthis){if(fn.charAt(0)==='_'&&typeofthis[fn]==='function'){this[fn]=this[fn].bind(this);}}//绑定指针触摸事件，类似mousedownon(el,'pointerdown',this._prepareDragStart);on(el,'dragover',this);on(el,'dragenter',this);}初始化示例做了以下几件事件：
将传入的参数与提供的默认参数进行合并；
规范传入的group格式；
将原型上的方法绑定在实例对象上，便于使用；
绑定pointerdown、dragover、dragenter事件，其中pointerdown可以看作是dragstart事件，做了一些拖拽前的准备工作。
group用于两个容器元素的相互拖拽场景，规范group核心代码如下：
function_prepareGroup(options){functiontoFn(value,pull){returnfunction(to,from){letsameGroup=to.options.group.name&&from.options.group.name&&to.options.group.name===from.options.group.name;if(value==null&&(pull||sameGroup)){returntrue;}elseif(value==null||value===false){returnfalse;}elseif(pull&&value==='clone'){returnvalue;}else{returnvalue===true;}};}letgroup={};letoriginalGroup=options.group;if(!originalGroup||typeoforiginalGroup!='object'){originalGroup={name:originalGroup};}group.name=originalGroup.name;group.checkPull=toFn(originalGroup.pull,true);group.checkPut=toFn(originalGroup.put);options.group=group;}_prepareDragStart拖动前的准备工作当鼠标按下触发pointerdown事件时，会保存拖动元素的信息，提供后续使用，并且注册dragstart事件：
letoldIndex,newIndex;letdragEl=null;//拖拽元素letrootEl=null;//容器元素letparentEl=null;//拖拽元素的父节点letnextEl=null;//拖拽元素下一个元素letactiveGroup=null;//options.groupSortable.prototype={_prepareDragStart(evt){lettarget=evt.target,el=this.el,options=this.options;oldIndex=index(target);rootEl=el;dragEl=target;parentEl=dragEl.parentNode;nextEl=dragEl.nextSibling;activeGroup=options.group;dragEl.draggable=true;//设置元素拖拽属性on(dragEl,'dragend',this);on(rootEl,'dragstart',this._onDragStart);on(document,'mouseup',this._onDrop);},}on就是addEventListener，index方法用于获取元素在父容器内的索引：
functionon(el,event,fn){el.addEventListener(event,fn);}functionoff(el,event,fn){el.removeEventListener(event,fn);}functionindex(el){if(!el||!el.parentNode)return-1;letindex=0;//返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）while(el=el.previousElementSibling){if(el!==Sortable.clone)index++;}returnindex;}_onDragStart用于处理dragstart事件逻辑，_onDrop用于处理拖拽结束逻辑，比如这里执行了dragEl.draggable=true;，那么在mouseup鼠标松开后需将draggable=false。
这里有趣的一点是dragend事件，它的处理函数绑定的是this即Sortable实例本身，我们都知道实例对象是一个对象，怎么能作为函数使用呢？
其实addEventListener第二参数可以是函数，也可以是对象，当为对象时，需要提有一个handleEvent方法来处理事件：
Sortable.prototype={handleEvent:function(evt){switch(evt.type){case'dragend':this._onDrop(evt);break;case'dragover':evt.stopPropagation();evt.preventDefault();break;case'dragenter':if(dragEl){this._onDragOver(evt);}break;}},}到这里，整个拖拽流程功能函数都暴露在了眼前：
_onDragStart处理dragstart拖拽开始工作；
_onDragOver处理拖拽移动到别的元素时工作；
_onDrop处理鼠标拖动结束的收尾工作。
dragstart这里做了两件事情：
clone一个dragEl元素副本，用于两个容器项目移动时使用；
触发外部传入的clone和dragstart事件；
letcloneEl=null,cloneHidden=null;//clone元素_onDragStart(evt){letdataTransfer=evt.dataTransfer;letoptions=this.options;cloneEl=clone(dragEl);cloneEl.removeAttribute("id");cloneEl.draggable=false;//设置拖拽数据if(dataTransfer){dataTransfer.effectAllowed='move';options.setData&&options.setData.call(this,dataTransfer,dragEl);}Sortable.active=this;Sortable.clone=cloneEl;_dispatchEvent({sortable:this,name:'clone'});_dispatchEvent({sortable:this,name:'start',originalEvent:evt});},functionclone(el){returnel.cloneNode(true);}_dispatchEvent会通过newwindow.CustomEvent构造一个事件对象，将拖拽元素的信息添加到自定义事件对象上，传递给外部的注册事件函数，大体代码如下：
functiondispatchEvent(...params){//sortable没有传，就根据rootEl获取sortable。sortable=(sortable||(rootEl&&rootEl[expando]));if(!sortable)return;letevt,options=sortable.options,onName='on'+name.charAt(0).toUpperCase()+name.substr(1);//自定义事件，拿到事件对象，满足外部用户传入的事件正常使用if(window.CustomEvent){evt=newCustomEvent(name,{bubbles:true,cancelable:true});}else{evt=document.createEvent('Event');evt.initEvent(name,true,true);}evt.to=toEl||rootEl;evt.from=fromEl||rootEl;evt.item=targetEl||rootEl;evt.clone=cloneEl;evt.oldIndex=oldIndex;evt.newIndex=newIndex;//执行外部传入的事件if(options[onName]){options[onName].call(sortable,evt);}}可见，拖拽的核心逻辑不在dragstart中，下面我们去看dragenter的处理函数_onDragOver。
dragenterSortableJS的核心逻辑在_onDragOver中，拿容器内项目排序为例：当拖动dragEl元素，移动到另一个元素上时，会发生两者的位置交换，可见，Sort的逻辑在这里。
首先，在实例化对象时绑定了dragover和dragenter事件，并且通过handleEvent将事件逻辑交由_onDragOver来处理：
on(el,'dragover',this);on(el,'dragenter',this);handleEvent:function(evt){switch(evt.type){case'dragover':evt.stopPropagation();evt.preventDefault();break;case'dragenter':if(dragEl){this._onDragOver(evt);}break;}},在_onDragOver中，需要注意一点是：假如有两个容器，那就有两个newSortable实例对象，isOwner将为false，这是就需要判断拖动容器的activeGroup.pull（是否允许被移动）和group.put（是否允许添加拖动过来的元素）。
newSortable(leftContainer,{group:{name:'group',pull:'clone',put:true},});newSortable(rightContainer,{group:'group',});0上面的核心在于下面这一行代码：
newSortable(leftContainer,{group:{name:'group',pull:'clone',put:true},});newSortable(rightContainer,{group:'group',});1如果拖拽元素的位置小于目标元素的位置，说明是从上往下拖动，那么将dragEl移动到target.nextSibling之前；
如果拖拽元素的位置大于目标元素的位置，说明是从下往上拖动，那么只需将dragEl移动到target之前即可；
整个移动过程均采用DOM操作insertBefore来实现。
另外如果是两个容器的场景（isOwner=false），并且拖动元素的容器activeGroup.pull=clone，需要将dragstart创建的clone元素渲染到容器中：
newSortable(leftContainer,{group:{name:'group',pull:'clone',put:true},});newSortable(rightContainer,{group:'group',});2dropdrop主要做一些收尾工作，如将dragEl.draggable=false，移除绑定的mouseup、dragstart、dragend事件，触发用户传入的sort、end事件等。
不过注意，虽然起名叫drop，触发的事件确是dragend。
newSortable(leftContainer,{group:{name:'group',pull:'clone',put:true},});newSortable(rightContainer,{group:'group',});3动画如果想在拖动排序中有一定的animation动画效果，可以配置动画属性，属性值是动画持续时长：
newSortable(leftContainer,{group:{name:'group',pull:'clone',put:true},});newSortable(rightContainer,{group:'group',});4动画的时机也是在dragenter中，大致的思路如下：
1、记录：记录容器子项位置信息
在操作DOM移动dragEl之前，记录容器内所有子项的位置；
进行DOM操作进行位置交换，DOM操作本身没有动画；
这时再去记录一次移动后的容器内所有子项的位置；
2、执行：有了上面几步的操作，接下来就可以根据移动前后的位置进行动画操作
通过translate先让元素立刻回到移动前的位置；
此时给元素自身设置过度效果transform；
这时候就可以通过translate让元素回到移动之后的位置。
大致实现如下：
newSortable(leftContainer,{group:{name:'group',pull:'clone',put:true},});newSortable(rightContainer,{group:'group',});5最后本文以探索SortableJS拖拽思路为主线，去了解业界开源拖拽库的设计与思路。感谢阅读。
原文：文章已关闭评论！
2025-05-09 23:05:13
2025-05-09 22:45:22
2025-05-09 22:33:25
2025-05-09 22:22:51
2025-05-09 22:01:11
2025-05-09 21:15:02
2025-05-09 21:02:22
2025-05-09 20:43:13
