JS书写位置

行内式

你点我一下试试
<a href="javascript: alert('kick your ass');">你点我一下试试</a>

  1. a 标签
    • 因为 a 标签本身就有行为出现
    • 当我点击的时候, 需要区分你是跳转连接还是执行 JS 代码
    • 在 href 属性里面书写一个 javascript: JS代码 。
  2. 非 a 标签
    • 因为没有自己的行为, 我们需要给他加一个行为
    • 写一个 onclick 属性, 表示当点击时
    • 属性值的位置书写 JS 代码
你再点我一下试试

<div onclick=" alert('kick your fu*king ass') " style="color:skyblue ;cursor:pointer ">你再点我一下试试</div>

内嵌式

  1. 在页面内书写一个 script 标签
  2. 把 JS 代码书写再标签对内部

注意: 不需要任何行为, 只要打开页面就会执行

1
2
3
4
5
<body>
<script>
alert('hello world')
</script>
</body>

外链式

1
2
3
<body>
<script src="./test.js"></script>
</body>
  1. 把 JS 代码写在一个 .js 后缀的文件里面
  2. 在页面上通过 script 标签的 src 属性引入页面

注意: 不需要任何行为, 只要打开页面就会执行

JS的输出语法

  1. alert()

    以浏览器弹出层的形式展示内容

    小括号里面书写你要输出的内容

  2. console.log()

    再浏览器控制台打印你要输出的内容

    小括号里面书写你要输出的内容

  3. document.write()

    再页面直接写入你要输出的内容

    小括号里面书写你要输出的内容

    image-20211116134308575

条件分支语句

if

  • 写法一

    1
    2
    3
    4
    5
    var money = 1000
    // 满足条件就执行, 不满足就不执行
    if (money >= 500) {
    console.log('吃大餐')
    }
  • 写法二

    1
    2
    3
    4
    5
    6
    7
    var money = 1000
    // 满足条件就执行 if 的 {}, 不满足就执行 else 的 {}
    if (money >= 500) {
    console.log('吃大餐')
    } else {
    console.log('我只能选择回家吃饭了')
    }
  • 写法三

    1
    2
    3
    4
    5
    6
    7
    8
    var money =1500
    // 满足哪一个 if 的条件, 就执行哪一个条件后面的 {}
    // 前面的如果满足了, 就不去考虑后面的内容了
    if (money >= 1000) {
    console.log('吃大餐')
    } else if (money >= 500) {
    console.log('我可以去吃快餐')
    }
  • 写法四

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var money = 1000
    // 满足哪一个 if 的条件, 就执行哪一个条件后面的 {}
    // 前面的如果满足了, 就不去考虑后面的内容了
    if (money >= 500) {
    console.log('吃大餐')
    } else if (money >= 500) {
    console.log('我可以去吃快餐')
    } else {
    console.log('我只能选择回家。')
    }

平年闰年判断

1
2
3
4
5
6
7
8
9
// 案例判断平年还是闰年。只有当年份是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

1
2
3
4
5
6
7
8
9
10
11
12
13
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穿透
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    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中”==”和”===”的区别

“==” 的比较规则

  1. 先检查两个操作数的数据类型是否相同

  2. 如果相同,则比较两个数是否相等

  3. 如果不同,则先将两个数转换为相同数据类型,再进行比较

    compare

    这里可以看到,数字型的 1 竟然与字符型的 ‘1’ 、数组 [1] 布尔值 true 相等了,这是因为js自动进行了一次数据类型转换,将字符串、数组、布尔值转为数字,再进行比较。

    “===”的比较规则

    1. 先检查两个操作数的数据类型是否相同
    2. 若不同,直接返回false
    3. 若相同,则比较二者是否相等

    compare2

跟==不同,当数据类型不同时, 不进行数据类型转换,直接返回false

此处参考作者xiao xu

循环结构语句

while循环

1
2
3
4
5
6
7
8
9
var a=1
var b=1
while(a<=10)
{ b=b*a
a++

}

document.write(b)

dowhile循环

1
2
3
4
5
6
do {
var result = prompt('你爱不爱我 ? ')
} while (result !== 'yes')

// 如果输入了 yes 就会执行到这里
alert('我也爱你')

先执行,后循环。

九九乘法表

1
2
3
4
5
6
for (var j = 1; j <= 9; j++) {
for (var i = 1; i <= j; i++) {
document.write(i + '*' + j + '=' + i*j + ' ')
}
document.write('</br>')
}

for循环

最大公约数

1
2
3
4
5
6
7
8
9
var max=24
var min=12
for(var i=min;i>=1;i--)
{
if(max % i === 0 && min % i === 0
}{
console.log(i)
break
}

最小公倍数

1
2
3
4
5
6
7
var max=24 
var min=12
for var(i=max;i<=min *max;i+=max){
if(i%min===0)
console.log(i)
break
}

函数

1
2
3
4
5
6
function fn(a,b){
console.log('我是大帅哥')
console.log(a)
console.log(b)
}
fn(10,20)

函数求10的阶乘

1
2
3
4
5
6
7
8
9
10
function fn(n){
var sum = 1
while (n>=1){
sum *= n
n--
}
console.log(sum)
}
fn(12)
fn(10)

对象数据类型

对象的创建

1
2
3
4
5
6
7
8
var obj = {
a: 100,
b: true,
c: 'hello world'
}


console.log( obj )

1
2
3
4
5
6
7
8
9
10
11
12
// 对象的操作 - 增
// 准备一个空对象
var obj = { }
// 输出看一下
console.log( obj )
// 增加一个 键值对
// 语法一
obj.name = '小灰狼'
// 语法二
obj['age'] = 18
// 再次输出看一下
console.log( obj )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 对象的操作 - 删
// 准备一个空 对象
var obj = { }
// 增加一些成员
obj.name = 'jny'
obj['age'] = 21
obj.gender = '男'
// 输出看一下
console.log( obj )
// 删除一个 键值对
// 语法一
delete obj.name
// 语法二
delete obj['age']
// 再次输出看一下
console.log( obj )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 对象的操作 - 改

// 准备一个空 对象
var obj = { }
// 增加一些成员
obj.name = 'jny'
obj['age'] = 21
obj.gender = '男'
// 输出看一下
console.log( obj )

// 修改一个 键值对 的值
// 语法一
obj.name = 'ch'
// 语法二
obj['age'] = 22

// 再次输出看一下
console.log( obj )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 对象的操作 - 改

// 准备一个空 对象
var obj = { }
// 增加一些成员
obj.name = '小灰狼'
obj['age'] = 18
obj.gender = '男'
// 输出看一下
console.log( obj )

// 修改一个 键值对 的值
// 语法一
console.log( obj.name )
// 语法二
console.log( obj['age'] )

冒泡排序

1
2
3
4
5
6
7
8
9
10
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)

选择排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  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)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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(): 把字符串转为小写,返回新的字符串。
1
2
3
4
var str="Hello World";
var str1=str.toLowerCase();
console.log(str); //Hello World
console.log(str1); //hello world
  • toUpperCase(): 把字符串转为大写,返回新的字符串。
1
2
3
4
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)之间,返回空字符串。
1
2
3
var str="hello world";
var str1=str.charAt(6);
console.log(str1);
  • charCodeAt(): 返回指定下标位置的字符的unicode编码,这个返回值是 0 - 65535 之间的整数。
1
2
3
4
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(): 返回某个指定的子字符串在字符串中第一次出现的位置
1
2
3
4
5
6
7
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(): 返回某个指定的子字符串在字符串中最后出现的位置。
1
2
3
4
5
6
7
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(): 返回字符串中提取的子字符串。
1
2
3
4
5
6
7
8
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(): 提取字符串中介于两个指定下标之间的字符。
1
2
3
4
5
6
7
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(): 返回从指定下标开始指定长度的的子字符串
1
2
3
4
5
6
7
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,返回从下标开始处结尾处的所有字符串。

  1. split(): 把字符串分割成字符串数组。
1
2
3
4
5
6
7
8
9
10
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(): 在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
1
2
3
4
var str="hello WORLD";
var reg=/o/ig; //o为要替换的关键字,不能加引号,否则替换不生效,i忽略大小写,g表示全局查找。
var str1=str.replace(reg,"**")
console.log(str1); //hell** W**RLD
  • match(): 返回所有查找的关键字内容的数组。
1
2
3
4
5
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

取最小值

1
console.log(Math.min(10,2,0,2,2,4,5,78));
  • max

取最大值

1
console.log(Math.max(10,2,0,2,2,4,5,78));
  • ceil

向上取整

1
console.log(Math.ceil(12.1));
  • floor

向下取整

1
console.log(Math.floor(12.1));
  • round

四舍五入

1
2
console.log(Math.round(12.1));
console.log(Math.round(12.5));
  • abs

绝对值

1
2
console.log(Math.abs(12.1));
console.log(Math.abs(-12.5));
  • sqrt

开方

1
console.log(Math.sqrt(9));
  • pow

m的n次方

1
console.log(Math.pow(9,2));
  • random

0-1的随机数

1
2
3
4
function getRandom(n,m){
return Math.trunc(Math.random()*(m-n)+n);
}
console.log(getRandom(2,14));
  • Number

转化为数字,只能处理为整数、小数
带字母的字符串不能处理,会转为NaN

1
2
3
console.log(Number("12.12"));//12.12
console.log(Number("12"));//12
console.log(Number("12.12aa"));//NaN
  • parseInt

转化为数字,只能处理为整数
字母开头的字符串不能处理,会转为NaN

1
2
3
4
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

1
2
3
4
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

保留几位小数
会改变成字符串类型

1
2
3
const num=12.12;
console.log(num.toFixed(3))//12.120
console.log(num.toFixed(1))//12.1
  • toString
转变成字符串类型
1
2
3
const num=12.12;
console.log(num.toString())//12.12
console.log(num.toString())//12

获取时间如期常用方法

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
<!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">&nbsp;&nbsp;<font color="green">0-11,0代表一月份</font>
<br>
当前日:<input type="text" name="getDate">
<br>
当前星期:<input type="text" name="getDay">&nbsp;&nbsp;<font color="green">0-6,0代表周日</font>
<br>
当前时间戳(精确毫秒):<input type="text" name="getTime">&nbsp;&nbsp;<font color="green">从1970.1.1开始的毫秒数</font>
<br>
当前小时:<input type="text" name="getHours">&nbsp;&nbsp;<font color="green">0-23</font>
<br>
当前分钟:<input type="text" name="getMinutes">&nbsp;&nbsp;<font color="green">0-59</font>
<br>
当前秒数:<input type="text" name="getSeconds">&nbsp;&nbsp;<font color="green">0-59</font>
<br>
当前毫秒数:<input type="text" name="getMilliseconds">&nbsp;&nbsp;<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">&nbsp;&nbsp;(YY/yy):<input type="text" name="formatYear2">
<br/>
月份(MM):<input type="text" name="formatMonth1">&nbsp;&nbsp;(M):<input type="text" name="formatMonth2">
<br/>
星期(W/w):<input type="text" name="formatWeek">
<br/>
日(DD/dd):<input type="text" name="formatDay1">&nbsp;&nbsp;(D/d):<input type="text" name="formatDay2">
<br/>
时(HH/hh):<input type="text" name="formatHour1">&nbsp;&nbsp;(H/h):<input type="text" name="formatHour2">
<br/>
分(mm):<input type="text" name="formatMinute1">&nbsp;&nbsp;(m):<input type="text" name="formatMinute2">
<br/>
秒(SS/S):<input type="text" name="formatSecond1">&nbsp;&nbsp;(ss/s):<input type="text" name="formatSecond2">
<br/>
<p></p>
日期天数差:日期格式YYYY-MM-dd
<br>
起始日期:<input type="text" name="s_date" value="2018-08-01" />&nbsp;
截止日期:<input type="text" name="e_date" value="2018-08-06" />&nbsp;
日期差天数:<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">&nbsp;&nbsp;
<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">&nbsp;&nbsp;
<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>