js基础

Posted 北方姆Q

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js基础相关的知识,希望对你有一定的参考价值。

1.滚动条

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="i1" style="background-color: pink;color: white;display: inline-block">北方姆Q</div>
 9     <script>
10         setInterval(f1(), 1000);
11         function f1() {
12             var tag = document.getElementById(i1);
13             var test = tag.innerText;
14             var a = test.charAt(0);
15             var sub = test.substring(1, test.length);
16             var new_str = sub + a;
17             tag.innerText = new_str;
18         }
19     </script>
20 </body>
21 </html>

2.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9 //        序列化
10         var d1 = {k1: v1, k2: v2};
11         var s1 = JSON.stringify(d1);
12         var d2 = JSON.parse(s1);
13 //        转义url中未转移的字符
14         var url = "https://www.baidu.com/s?wd=%E5%8C%97%E6%96%B9%E5%A7%86q&rsv_spt=1&rsv_iqid=0xebeece360003cc9c&issp=1&f=3&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=1&rsv_sug1=1&rsv_sug7=001&rsv_sug2=1&rsp=3&rsv_sug9=es_2_1&rsv_sug4=1549&rsv_sug=9";
15         var ret1 = encodeURI(url);
16         var u1 = decodeURI(ret);
17 //        转义url组件中未转移的字符
18         var ret2 = encodeURIComponent(url);
19         var u2 = decodeURIComponent(ret2);
20 //         时间处理
21         d = new Date();
22         d.getDate();
23         d.getUTCDay();
24         d.setDate(d.getDate()+3);
25     </script>
26 </body>
27 </html>

3.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         if (1 === 1){
10             XXXXXXX;
11         }
12         else if (1 === 1){
13             XXXXXXX;
14         }
15         else {
16             XXXXXXX;
17         }
18 
19 
20         switch (name){
21             case 1:
22                 age = 123;
23                 break;
24             case 2:
25                 age = 456;
26                 break;
27             default:
28                 age = 888;
29                 break
30         }
31 
32 
33         while (1 === 1){
34             XXXXXXX;
35             break;
36             XXXXXXX;
37             continue;
38         }
39 
40 
41         var names = [bfmq, dfmq, nfmq, xfmq];
42         for(var i = 0;i <names.length;i++){
43             console.log(i);
44             console.log(names[i]);
45         }
46 
47 
48         var names = {bfmq: 18, dfmq: 18};
49         for(var index in names){
50             console.log(i);
51             console.log(names[i]);
52         }
53 
54 
55         try{
56 //            执行try中的代码
57         }
58         catch (e){
59 //            如果捕获到了e错误,则执行这里的代码
60         }
61         finally {
62 //            最后不论怎么样都会执行的代码
63         }
64 //        主动丢出异常
65         throw new Error(wtf)
66     </script>
67 </body>
68 </html>

4.函数分类

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9 //        普通函数
10         function f1(arg) {
11             alert(arg);
12         }
13 //        自执行函数
14         (function (arg) {
15             alert(arg);
16         })(123);
17 //        匿名函数
18         setInterval(function () {
19             alert(123);
20         }, 1000)
21     </script>
22 </body>
23 </html>

5.闭包

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         (function () {
10             var a = 123;
11             function f1() {
12                 alert(a);
13             }
14             function f2() {
15                 alert(a);
16             }
17             function f3() {
18                 alert(a);
19             }
20         })()
21         (function () {
22             var a = 456;
23             function f1() {
24                 alert(a);
25             }
26             function f2() {
27                 alert(a);
28             }
29             function f3() {
30                 alert(a);
31             }
32         })()
33     </script>
34 </body>
35 </html>

 

以上是关于js基础的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

js常用代码片段(更新中)

js常用代码片段

Chrome-Devtools代码片段中的多个JS库