JavaScript基础①
JS书写位置
行内式
你点我一下试试
<a href="javascript: alert('kick your ass');">你点我一下试试</a>
- a 标签
- 因为 a 标签本身就有行为出现
- 当我点击的时候, 需要区分你是跳转连接还是执行 JS 代码
- 在 href 属性里面书写一个 javascript: JS代码 。
- 非 a 标签
- 因为没有自己的行为, 我们需要给他加一个行为
- 写一个 onclick 属性, 表示当点击时
- 属性值的位置书写 JS 代码
你再点我一下试试
<div onclick=" alert('kick your fu*king ass') " style="color:skyblue ;cursor:pointer ">你再点我一下试试</div>
内嵌式
- 在页面内书写一个 script 标签
- 把 JS 代码书写再标签对内部
注意: 不需要任何行为, 只要打开页面就会执行
<body>
<script>
alert('hello world')
</script>
</body>外链式
<body>
<script src="./test.js"></script>
</body>- 把 JS 代码写在一个 .js 后缀的文件里面
- 在页面上通过 script 标签的 src 属性引入页面
注意: 不需要任何行为, 只要打开页面就会执行
JS的输出语法
- alert() 以浏览器弹出层的形式展示内容 小括号里面书写你要输出的内容
- console.log() 再浏览器控制台打印你要输出的内容 小括号里面书写你要输出的内容
- document.write() 再页面直接写入你要输出的内容 小括号里面书写你要输出的内容
image-20211116134308575
条件分支语句
if
写法一
var money = 1000
// 满足条件就执行, 不满足就不执行
if (money >= 500) {
console.log('吃大餐')
}写法二
var money = 1000
// 满足条件就执行 if 的 {}, 不满足就执行 else 的 {}
if (money >= 500) {
console.log('吃大餐')
} else {
console.log('我只能选择回家吃饭了')
}写法三
var money =1500
// 满足哪一个 if 的条件, 就执行哪一个条件后面的 {}
// 前面的如果满足了, 就不去考虑后面的内容了
if (money >= 1000) {
console.log('吃大餐')
} else if (money >= 500) {
console.log('我可以去吃快餐')
}写法四
var money = 1000
// 满足哪一个 if 的条件, 就执行哪一个条件后面的 {}
// 前面的如果满足了, 就不去考虑后面的内容了
if (money >= 500) {
console.log('吃大餐')
} else if (money >= 500) {
console.log('我可以去吃快餐')
} else {
console.log('我只能选择回家。')
}平年闰年判断
// 案例判断平年还是闰年。只有当年份是4的倍数且年份不是100倍数或年份是400的倍数时，才是闰年。
// 定义一个变量表示年份信息
var year = 2078
// 书写 if 语句进行判断
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
console.log(year + ' 是闰年')
} else {
console.log(year + ' 不是闰年')
}switch
switch (foot) {
case 37:
console.log('买一双 37 号的鞋')
case 40:
console.log('买一双 40 号的鞋')
case 42:
console.log('买一双 42 号的鞋')
case 45:
console.log('买一双 45 号的鞋')
break
default:
console.log('我去别家店里看一看')
}在JavaScript中利用switch-case的穿透特性
- case穿透就是：当在switch语句中，执行case分支语句，如果满足case1，但是在case1的语句块中，没有加break;，即使case1，满足条件，程序仍然会向下执行case2，即使case2不满足条件，除非case2语句块中有break;，程序会跳出switch选择结构，否则继续执行case3，一直这样执行下去，直到整个switch语句全部执行完毕，才能结束！
练习要求: 使用输入框 prompt 接收一个输入的年份和月份和日期 判断输入的这一天 是这一年的第几天 将结果打印到控制台 大月份 1 3 5 7 8 10 12 小月份 4 6 9 11 利用switch穿透
var year = parseInt(prompt('请输入一个年份'));
var month = parseInt(prompt('请输入一个月份'));
var date= parseInt(prompt('请输入一个日期'));
var sum=0;
switch(month) {
case 12:
sum +=30;
case 11:
sum +=31;
case 10:
sum +=30;
case 9:
sum +=31;
case 8:
sum +=31;
case 7:
sum +=30;
case 6:
sum +=31;
case 5:
sum +=30;
case 4:
sum +=31;
case 3:
if(year % 4 ===0 &&year %100!==0 ||year %400===0){
sum+=29;
}
else{
sum+=28;
}
case 2:
sum+=31
case 1:
sum+=date;
}
document.write('今年是一年里的第'+sum+'天');- 从case2-12是1月到11月累加，case1代表本月天数。
- 如计算1月21日天数只需要case1。
- 如计算12月21日天数则需要前11月整月天数和本月天数，12月份天数是用不到的，31号加上31即可。
JS中”==”和”===”的区别
“==” 的比较规则
- 先检查两个操作数的数据类型是否相同
- 如果相同，则比较两个数是否相等
- 如果不同，则先将两个数转换为相同数据类型，再进行比较
compare
这里可以看到，数字型的 1 竟然与字符型的 ‘1’ 、数组 [1] 布尔值 true 相等了，这是因为js自动进行了一次数据类型转换，将字符串、数组、布尔值转为数字，再进行比较。 “===”的比较规则
- 先检查两个操作数的数据类型是否相同
- 若不同，直接返回false
- 若相同，则比较二者是否相等
compare2
跟==不同，当数据类型不同时， 不进行数据类型转换，直接返回false
此处参考作者xiao xu
循环结构语句
while循环
var a=1
var b=1
while(a<=10)
{ b=b*a
a++
}
document.write(b)dowhile循环
do {
var result = prompt('你爱不爱我 ? ')
} while (result !== 'yes')
// 如果输入了 yes 就会执行到这里
alert('我也爱你')先执行，后循环。
九九乘法表
for (var j = 1; j <= 9; j++) {
for (var i = 1; i <= j; i++) {
document.write(i + '*' + j + '=' + i*j + ' ')
}
document.write('</br>')
}for循环
最大公约数
var max=24
var min=12
for(var i=min;i>=1;i--)
{
if(max % i === 0 && min % i === 0
}{
console.log(i)
break
}最小公倍数
var max=24
var min=12
for var(i=max;i<=min *max;i+=max){
if(i%min===0)
console.log(i)
break
}函数
function fn(a,b){
console.log('我是大帅哥')
console.log(a)
console.log(b)
}
fn(10,20)函数求10的阶乘
function fn(n){
var sum = 1
while (n>=1){
sum *= n
n--
}
console.log(sum)
}
fn(12)
fn(10)对象数据类型
对象的创建
var obj = {
a: 100,
b: true,
c: 'hello world'
}
console.log( obj )增
// 对象的操作 - 增
// 准备一个空对象
var obj = { }
// 输出看一下
console.log( obj )
// 增加一个 键值对
// 语法一
obj.name = '小灰狼'
// 语法二
obj['age'] = 18
// 再次输出看一下
console.log( obj )删
// 对象的操作 - 删
// 准备一个空 对象
var obj = { }
// 增加一些成员
obj.name = 'jny'
obj['age'] = 21
obj.gender = '男'
// 输出看一下
console.log( obj )
// 删除一个 键值对
// 语法一
delete obj.name
// 语法二
delete obj['age']
// 再次输出看一下
console.log( obj )改
// 对象的操作 - 改
// 准备一个空 对象
var obj = { }
// 增加一些成员
obj.name = 'jny'
obj['age'] = 21
obj.gender = '男'
// 输出看一下
console.log( obj )
// 修改一个 键值对 的值
// 语法一
obj.name = 'ch'
// 语法二
obj['age'] = 22
// 再次输出看一下
console.log( obj )查
// 对象的操作 - 改
// 准备一个空 对象
var obj = { }
// 增加一些成员
obj.name = '小灰狼'
obj['age'] = 18
obj.gender = '男'
// 输出看一下
console.log( obj )
// 修改一个 键值对 的值
// 语法一
console.log( obj.name )
// 语法二
console.log( obj['age'] )冒泡排序
var arr=[9,3,6,2,4,1,8,5,7]
for(var j=0;j<arr.length-1;j++)
for(var i=0;i<arr.length-1-j;i++){
if(arr[i+1]<arr[i]){
var temp =arr[i+1]
arr[i+1]=arr[i]
arr[i]=temp
}
}
console.log(arr)选择排序
var arr1 = [ 9, 3, 6, 2, 4, 1, 8, 5, 7 ]
function selectsort(arr){
for(var i=0;i<arr.length-1;i++){
var minindex=i
for(var j=i+1;j<arr.length;j++)
{
if(arr[j]<arr[minindex]){
minindex=j}
}//先用[i+1]和[i]比，确定minindex,再用[i+2]到[arr.length-i-2]比，确定最小的minindex
var temp =arr[i]//保留arr[i]数组内准备被替换的值
arr[i]=arr[minindex]//交换i和mindex的最小索引
arr[minindex]=temp//将被替换的arr[i]和minindex交换位置
}
}
selectsort(arr1)
console.log(arr1)数组的常用方法
- Array.push()，向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。
img
- Array.pop()，删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。
img
- Array.unshift()，向数组的开头添加一个或多个元素，并返回新的数组长度。原数组改变。
img
- Array.shift()，删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。
img
- Array.concat(arr1,arr2…)，合并两个或多个数组，生成一个新的数组。原数组不变。
img
- Array.join()，将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。
img
- Array.reverse()，将数组倒序。原数组改变。
img
- Array.sort()，对数组元素进行排序。按照字符串UniCode码排序，原数组改变。
①从小到大
img
②从大到小
img
③按照数组对象中的某个值进行排序
img
- Array.map(function)，原数组的每一项执行函数后，返回一个新的数组。原数组不变。（注意该方法和forEach的区别）。
- Array.slice(start,end)，从start开始，end之前结束，不到end；如果不给end值，从start开始到数组结束。start可以给负值，-1表示数组最后位置，-2表示倒数第二个，以此类推，顾前不顾后。* *
img
Array.splice(index,howmany,arr1,arr2…) ，删除元素并添加元素，从index位置开始删除howmany个元素，并将arr1、arr2…数据从index位置依次插入。howmany为0时，则不删除元素。原数组改变。
Array.forEach(function)，用于调用数组的每个元素，并将元素传递给回调函数。原数组不变。（注意该方法和map的区别，若直接打印Array.forEach，结果为undefined）。
<script type="text/javascript">
// 分别对应：数组元素，元素的索引，数组本身
var arr = ['a','b','c'];
arr.forEach(function(value,index,array){
console.log(value);
console.log(index);
console.log(array);
})
</script>
在这里插入图片描述
Array.filter(function)，过滤数组中，符合条件的元素并返回一个新的数组。
image-20211217170121246
img
- Array.every(function)，对数组中的每一项进行判断，若都符合则返回true，否则返回false。
- Array.some(function)，对数组中的每一项进行判断，若都不符合则返回false，否则返回true。
- Array.reduce(function)，reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
img
字符串的常用方法
- toLowerCase(): 把字符串转为小写，返回新的字符串。
var str="Hello World";
var str1=str.toLowerCase();
console.log(str); //Hello World
console.log(str1); //hello world- toUpperCase(): 把字符串转为大写，返回新的字符串。
var str="hello world";
var str1=str.toUpperCase();
console.log(str); //hello world
console.log(str1); //HELLO WORLD- charAt(): 返回指定下标位置的字符。如果index不在0-str.length(不包含str.length)之间，返回空字符串。
var str="hello world";
var str1=str.charAt(6);
console.log(str1); - charCodeAt(): 返回指定下标位置的字符的unicode编码,这个返回值是 0 - 65535 之间的整数。
var str="hello world";
var str1=str.charCodeAt(1);
var str2=str.charCodeAt(-2); //NaN
console.log(str1); //101注意：如果index不在0-str.length(不包含str.length)之间，返回NaN。
- indexOf(): 返回某个指定的子字符串在字符串中第一次出现的位置
var str="Hello World";
var str1=str.indexOf("o");
var str2=str.indexOf("world");
var str3=str.indexOf("o",str1+1);
console.log(str1); //4 默认只找第一个关键字位置，从下标0开始查找
console.log(str2); //-1 没有找到
console.log(str3); //7注意：indexOf()方法对大小写敏感，如果子字符串没有找到，返回-1。第二个参数表示从哪个下标开始查找，没有写则默认从下标0开始查找。
- lastIndexOf(): 返回某个指定的子字符串在字符串中最后出现的位置。
var str="Hello World";
var str1=str.lastIndexOf("o");
var str2=str.lastIndexOf("world");
var str3=str.lastIndexOf("o",str1-1);
console.log(str1); //7
console.log(str2); //-1
console.log(str3); //4注意：lastIndexOf()方法对大小写敏感，如果子字符串没有找到，返回-1。第二个参数表示从哪个下标开始查找，没有写则默认从最后一个字符处开始查找。
- slice(): 返回字符串中提取的子字符串。
var str="Hello World";
var str1=str.slice(2); //如果只有一个参数，则提取开始下标到结尾处的所有字符串
var str2=str.slice(2,7); //两个参数，提取下标为2，到下标为7但不包含下标为7的字符串
var str3=str.slice(-7,-2); //如果是负数，-1为字符串的最后一个字符。提取从下标-7开始到下标-2但不包含下标-2的字符串。前一个数要小于后一个数，否则返回空字符串
console.log(str1); //llo World
console.log(str2); //llo W
console.log(str3); //o Wor- substring(): 提取字符串中介于两个指定下标之间的字符。
var str="Hello World";
var str1=str.substring(2)
var str2=str.substring(2,2);
var str3=str.substring(2,7);
console.log(str1); //llo World
console.log(str2); //如果两个参数相等，返回长度为0的空串
console.log(str3); //llo W注意：substring()用法与slice()一样，但不接受负值的参数。
- substr(): 返回从指定下标开始指定长度的的子字符串
var str="Hello World";
var str1=str.substr(1)
var str2=str.substr(1,3);
var str3=str.substr(-3,2);
console.log(str1); //ello World
console.log(str2); //ell
console.log(str3); //rl注意：如果没有指定length,返回从下标开始处结尾处的所有字符串。
- split(): 把字符串分割成字符串数组。
var str="AA BB CC DD";
var string1="1:2:3:4:5";
var str1=str.split("");//如果把空字符串 ("")用作分割符，那么字符串的每个字符之间都会被分割
var str2=str.split(" "); //以空格为分隔符
var str3=str.split("",4); //4指定返回数组的最大长度
var str4=string1.split(":");
console.log(str1); // ["A", "A", " ", "B", "B", " ", "C", "C", " ", "D", "D"]
console.log(str2); //["AA" "BB" "CC" "DD"]
console.log(str3); //["A", "A", " ", "B"]
console.log(str4); // ["1", "2", "3", "4", "5"]- replace(): 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str="hello WORLD";
var reg=/o/ig; //o为要替换的关键字，不能加引号，否则替换不生效，i忽略大小写，g表示全局查找。
var str1=str.replace(reg,"**")
console.log(str1); //hell** W**RLD- match(): 返回所有查找的关键字内容的数组。
var str="To be or not to be";
var reg=/to/ig;
var str1=str.match(reg);
console.log(str1); //["To", "to"]
console.log(str.match("Hello")); //null数字的常用方法
- min
取最小值
console.log(Math.min(10,2,0,2,2,4,5,78));- max
取最大值
console.log(Math.max(10,2,0,2,2,4,5,78));- ceil
向上取整
console.log(Math.ceil(12.1));- floor
向下取整
console.log(Math.floor(12.1));- round
四舍五入
console.log(Math.round(12.1));
console.log(Math.round(12.5));- abs
绝对值
console.log(Math.abs(12.1));
console.log(Math.abs(-12.5));- sqrt
开方
console.log(Math.sqrt(9));- pow
m的n次方
console.log(Math.pow(9,2));- random
0-1的随机数
function getRandom(n,m){
return Math.trunc(Math.random()*(m-n)+n);
}
console.log(getRandom(2,14));- Number
转化为数字，只能处理为整数、小数 带字母的字符串不能处理，会转为NaN
console.log(Number("12.12"));//12.12
console.log(Number("12"));//12
console.log(Number("12.12aa"));//NaN- parseInt
转化为数字，只能处理为整数 字母开头的字符串不能处理，会转为NaN
console.log(parseInt("12.12"));//12
console.log(parseInt("12"));//12
console.log(parseInt("12.12aa"));//12
console.log(parseInt("aa12.12"));//NaN- parseFloat
转化为数字，只能处理为整数、小数 字母开头的字符串不能处理，会转为NaN
console.log(parseFloat("12.12"));//12.12
console.log(parseFloat("12"));//12
console.log(parseFloat("12.12aa"));//12.12
console.log(parseFloat("aa12.12"));//NaN- tofixed
保留几位小数 会改变成字符串类型
const num=12.12;
console.log(num.toFixed(3))//12.120
console.log(num.toFixed(1))//12.1- toString
转变成字符串类型
const num=12.12;
console.log(num.toString())//12.12
console.log(num.toString())//12获取时间如期常用方法
img
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS获取时间的方法及常用类</title>
<style type="text/css">
input{
color:red;
min-width: 250px;
}
/*设置placeholder的颜色*/
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}
p{
width:100%;height:0px;border-top:1px orange dashed;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<h2>JS获取时间的方法及常用类</h2>
<h4>获取当前日期+时间</h4>
<input type="text" name="myDate">
<hr>
<h4>使用内置的Date函数获取javascript时间</h4>
当前年：<input type="text" name="getFullYear">
<br>
当前月：<input type="text" name="getMonth"> <font color="green">0-11,0代表一月份</font>
<br>
当前日：<input type="text" name="getDate">
<br>
当前星期：<input type="text" name="getDay"> <font color="green">0-6,0代表周日</font>
<br>
当前时间戳(精确毫秒)：<input type="text" name="getTime"> <font color="green">从1970.1.1开始的毫秒数</font>
<br>
当前小时：<input type="text" name="getHours"> <font color="green">0-23</font>
<br>
当前分钟：<input type="text" name="getMinutes"> <font color="green">0-59</font>
<br>
当前秒数：<input type="text" name="getSeconds"> <font color="green">0-59</font>
<br>
当前毫秒数：<input type="text" name="getMilliseconds"> <font color="green">0-999</font>
<br>
当前日期：<input type="text" name="nowDate">
<br>
当前时间：<input type="text" name="nowTime">
<br>
当前日期+时间：<input type="text" name="nowDateAddNowTime">
<br>
<hr>
<h4>日期时间脚本库方法列表</h4>
判断闰年：
<input type="radio" name="isLeapYears" value="1">闰年
<input type="radio" name="isLeapYears" value="0">非闰年
<p></p>
日期格式化：
<br/>
年份(YYYY/yyyy):<input type="text" name="formatYear1"> (YY/yy)：<input type="text" name="formatYear2">
<br/>
月份(MM):<input type="text" name="formatMonth1"> (M):<input type="text" name="formatMonth2">
<br/>
星期(W/w):<input type="text" name="formatWeek">
<br/>
日(DD/dd):<input type="text" name="formatDay1"> (D/d)：<input type="text" name="formatDay2">
<br/>
时(HH/hh):<input type="text" name="formatHour1"> (H/h)：<input type="text" name="formatHour2">
<br/>
分(mm):<input type="text" name="formatMinute1"> (m)：<input type="text" name="formatMinute2">
<br/>
秒(SS/S):<input type="text" name="formatSecond1"> (ss/s)：<input type="text" name="formatSecond2">
<br/>
<p></p>
日期天数差:日期格式YYYY-MM-dd
<br>
起始日期:<input type="text" name="s_date" value="2018-08-01" />
截止日期:<input type="text" name="e_date" value="2018-08-06" />
日期差天数:<input type="text" name="diff_date">
<p></p>
日期计算:返回对象数据格式:"2018-08-06T06:29:49.000Z",可以调用对象的方法，比如getFullYear();
<br>
当前日期:<input type="text" name="date_now"><br/>
2秒后的时间:<input type="text" name="second_now"><br/>
2小时后的时间:<input type="text" name="hour_now"><br/>
2天后的时间:<input type="text" name="day_now"><br/>
2周后的时间:<input type="text" name="week_now"><br/>
一季度后的时间:<input type="text" name="quarter_now"><br/>
一个月后的时间:<input type="text" name="month_now"><br/>
一年后的时间:<input type="text" name="year_now"><br/>
<p></p>
重载toString方法:"一"=====>"星期一"
<br>
<input type="text" name="reset_string">
<P></P>
日期合法性校验(年月日):正确格式YYYY-MM-DD 或者 YYYY/MM/DD
<br>
输入日期：
<input type="text" name="checkDate" placeholder="YYYY-MM-DD或YYYY/MM/DD">
<input type="button" name="checkInputDate" value="检验" style="width:50px;">
<p></p>
日期合法性校验(年月日 时分秒):正确格式YYYY-MM-DD HH:II:SS
<br>
输入日期：
<input type="text" name="checkDate1" placeholder="YYYY-MM-DD HH:II:SS">
<input type="button" name="checkInputDate1" value="检验1" style="width:50px;">
<hr>
日期分割成数组:
<input type="text" name="splitDate"> <font color="green">取年份</font>
<script type="text/javascript">
$(function(){
//获取当前日期+时间
var myDate = new Date();
var t = myDate.toLocaleString();
inputToValue('text','myDate',t);
//============================================================
//使用内置的Date函数获取javascript时间
var newDate = new Date();
var getFullYear = newDate.getFullYear();//当前年
inputToValue('text','getFullYear',getFullYear);
var getMonth = newDate.getMonth();//当前月
inputToValue('text','getMonth',getMonth);
var getDate = newDate.getDate();//当前日
inputToValue('text','getDate',getDate);
var getDay = newDate.getDay();//当前星期
inputToValue('text','getDay',getDay);
var getTime = newDate.getTime();//当前时间戳(精确毫秒)
inputToValue('text','getTime',getTime);
var getHours = newDate.getHours();//当前小时
inputToValue('text','getHours',getHours);
var getMinutes = newDate.getMinutes();//当前分钟
inputToValue('text','getMinutes',getMinutes);
var getSeconds = newDate.getSeconds();//当前秒数
inputToValue('text','getSeconds',getSeconds);
var getMilliseconds = newDate.getMilliseconds();//当前毫秒数
inputToValue('text','getMilliseconds',getMilliseconds);
var nowDate = newDate.toLocaleDateString();//当前日期
inputToValue('text','nowDate',nowDate);
var nowTime = newDate.toLocaleTimeString();//当前时间
inputToValue('text','nowTime',nowTime);
var nowDateAddNowTime = newDate.toLocaleString();//当前时间
inputToValue('text','nowDateAddNowTime',nowDateAddNowTime);
//============================================================
//检测是否为闰年，方法一
Date.prototype.isLeapYears = function(){
return (this.getYear() % 4 == 0) && (this.getYear() % 100 != 0 || this.getYear() % 400 == 0);
}
var dd1 = new Date();
//检测是否为闰年，方法二
function checkYear(year){
return (year % 4 == 0 && (year % 100 !=0 || year % 400 !=0));
}
if(dd1.isLeapYears()){//checkYear(2018)
$("input[type='radio'][name='isLeapYears'][value='1']").prop("checked",true);
}else{
$("input[type='radio'][name='isLeapYears'][value='0']").prop("checked",true);
}
//日期格式化
Date.prototype.Format = function(formatStr){
var str = formatStr;
var Week = ['日','一','二','三','四','五','六'];
str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));
str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth());
str=str.replace(/M/g,this.getMonth());
str=str.replace(/w|W/g,Week[this.getDay()]);
str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
str=str.replace(/d|D/g,this.getDate());
str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
str=str.replace(/m/g,this.getMinutes());
str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds());
return str;
}
var dd2 = new Date();
inputToValue('text','formatYear1',dd2.Format('YYYY'));//YYYY/yyyy
inputToValue('text','formatYear2',dd2.Format('YY'));//YY/yy
inputToValue('text','formatMonth1',dd2.Format('MM'));//MM
inputToValue('text','formatMonth2',dd2.Format('M'));//M
inputToValue('text','formatWeek',dd2.Format('W'));//W/w
inputToValue('text','formatDay1',dd2.Format('DD'));//DD/dd
inputToValue('text','formatDay2',dd2.Format('d'));//dd/d
inputToValue('text','formatHour1',dd2.Format('HH'));//HH/hh
inputToValue('text','formatHour2',dd2.Format('h'));//H/h
inputToValue('text','formatMinute1',dd2.Format('mm'));//mm
inputToValue('text','formatMinute2',dd2.Format('m'));//m
inputToValue('text','formatSecond1',dd2.Format('SS'));//SS/ss
inputToValue('text','formatSecond2',dd2.Format('s'));//S/s
//日期天数差:日期格式YYYY-MM-dd
var s_date = $("input[type='text'][name='s_date']").val();
var e_date = $("input[type='text'][name='e_date']").val();
function daysBetween(DateOne,DateTwo)
{
var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-'));
var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1);
var OneYear = DateOne.substring(0,DateOne.indexOf ('-'));
var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-'));
var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1);
var TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-'));
var cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000);
return Math.abs(cha);
}
inputToValue('text','diff_date',daysBetween(s_date,e_date));
//日期计算，返回一段日期时间后的对象
Date.prototype.DateAdd = function(strInterval, Number) {
var dtTmp = this;
switch (strInterval) {
case 's' :return new Date(Date.parse(dtTmp) + (1000 * Number));
case 'n' :return new Date(Date.parse(dtTmp) + (60000 * Number));
case 'h' :return new Date(Date.parse(dtTmp) + (3600000 * Number));
case 'd' :return new Date(Date.parse(dtTmp) + (86400000 * Number));
case 'w' :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));
case 'q' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());//一个季度
case 'm' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());//一个月
case 'y' :return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
}
}
var dd3 = new Date();
inputToValue('text','date_now',dd3.DateAdd('s',0));
inputToValue('text','second_now',dd3.DateAdd('s',2));//2秒后
inputToValue('text','hour_now',dd3.DateAdd('h',2));//2小时后
inputToValue('text','day_now',dd3.DateAdd('d',2));//2天后
inputToValue('text','week_now',dd3.DateAdd('w',2));//2周后
inputToValue('text','quarter_now',dd3.DateAdd('q',1));//一季度后
inputToValue('text','month_now',dd3.DateAdd('m',1));//一个月后
inputToValue('text','year_now',dd3.DateAdd('y',1));//一个年后
//重载系统的toString方法
Date.prototype.toString = function(showWeek)
{
var myDate= this;
var str = myDate.toLocaleDateString();//保留年/月/日
if (showWeek)
{
var Week = ['日','一','二','三','四','五','六'];
str += ' 星期' + Week[myDate.getDay()];
}
return str;
}
var dd4 = new Date();
inputToValue('text','reset_string',dd4.toString("一"));
//日期合法性校验，格式:YYYY-MM-DD或者YYYY/MM/DD,特殊情况如YYYY-MM/DD也能通过，后期处理
function checkAndGetValue(DateStr)
{
var sDate=DateStr.replace(/(^\s+|\s+$)/g,''); //去两边空格;
if(sDate=='')
return false;
//正则表达式
patter = /^[\d]{4,4}[-/]{1}[\d]{1,2}[-/]{1}[\d]{1,2}$/;//不能加双引号
if(patter.test(sDate)){
var t = new Date(sDate.replace(/\-/g,'/'));
var ar = sDate.split(/[-/:]/);
if(ar[0] != t.getFullYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate()){
return false;
}else{
return ar.join("-");
}
}else{
return false;
}
}
$("input[type='button'][name='checkInputDate']").click(function(){
$_a = $("input[type='text'][name='checkDate']");
var getCheckDateValue = $_a.val();
if(checkAndGetValue(getCheckDateValue)){
alert("校验通过：" + checkAndGetValue(getCheckDateValue));
}else{
$_a.val("");//不通过，清空输入的值
alert("校验不通过");
}
});
//日期合法性校验 YYYY-MM-DD HH:II:SS
function CheckDateTime(DateStr)
{
var reg = /^(\d+)-(\d{1,2})-(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
var r = DateStr.match(reg);
if(r==null) return false;
r[2] = r[2]-1;
var d = new Date(r[1],r[2],r[3],r[4],r[5],r[6]);
if(d.getFullYear() != r[1]) return false;
if(d.getMonth() != r[2]) return false;
if(d.getDate() != r[3]) return false;
if(d.getHours() != r[4]) return false;
if(d.getMinutes() != r[5]) return false;
if(d.getSeconds() != r[6]) return false;
return true;
}
$("input[type='button'][name='checkInputDate1']").click(function(){
$_a = $("input[type='text'][name='checkDate1']");
var getCheckDateValue1 = $_a.val();
if(CheckDateTime(getCheckDateValue1)){
alert("校验通过");
}else{
$_a.val("");//不通过，清空输入的值
alert("校验不通过");
}
});
//把日期分割成数组
Date.prototype.toArray = function()
{
var myDate = this;
var myArray = Array();
myArray[0] = myDate.getFullYear();
myArray[1] = myDate.getMonth() + 1;
myArray[2] = myDate.getDate();
myArray[3] = myDate.getHours();
myArray[4] = myDate.getMinutes();
myArray[5] = myDate.getSeconds();
return myArray;
}
var dd5 = new Date();
$("input[name='splitDate']").val(dd5.toArray()[0]);
//通用函数
function inputToValue(type,name,value){
$("input[type="+ type +"][name="+ name +"]").val(value);
}
})
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-11-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录