仅供学习使用的一些样式+行为

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>css特效1霓虹</title>
 6         <style type="text/css">
 7             #neon-btn {
 8                 display: flex;
 9                 align-items: center;
10                 justify-content: space-around;
11                 height: 100vh;
12                 background: #031628;
13             }
14 
15             .btn {
16                 border: 1px solid;
17                 background-color: transparent;
18                 text-transform: uppercase;
19                 font-size: 14px;
20                 padding: 10px 20px;
21                 font-weight: 300;
22             }
23 
24             .one {
25                 color: #4cc9f0;
26             }
27 
28             .two {
29                 color: #f038ff;
30             }
31 
32             .three {
33                 color: #b9e769;
34             }
35 
36             .btn:hover {
37                 color: white;
38                 border: 0;
39             }
40 
41             .one:hover {
42                 background-color: #4cc9f0;
43                 -webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
44                 -moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
45                 box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
46             }
47 
48             .two:hover {
49                 background-color: #f038ff;
50                 -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
51                 -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
52                 box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
53             }
54 
55             .three:hover {
56                 background-color: #b9e769;
57                 -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
58                 -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
59                 box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
60             }
61         </style>
62     </head>
63     <body>
64         <div id="neon-btn">
65             <button class="btn one">Hover me</button>
66             <button class="btn two">Hover me</button>
67             <button class="btn three">Hover me</button>
68         </div>
69     </body>
70 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>css特效2边框</title>
 6         <style type="text/css">
 7             #draw-border {
 8                 display: flex;
 9                 align-items: center;
10                 justify-content: center;
11                 height: 100vh;
12             }
13 
14             button {
15                 border: 0;
16                 background: none;
17                 text-transform: uppercase;
18                 color: #4361ee;
19                 font-weight: bold;
20                 position: relative;
21                 outline: none;
22                 padding: 10px 20px;
23                 box-sizing: border-box;
24             }
25 
26             button::before,
27             button::after {
28                 box-sizing: inherit;
29                 position: absolute;
30                 content: '';
31                 border: 2px solid transparent;
32                 width: 0;
33                 height: 0;
34             }
35 
36             button::after {
37                 bottom: 0;
38                 right: 0;
39             }
40 
41             button::before {
42                 top: 0;
43                 left: 0;
44             }
45 
46             button:hover::before,
47             button:hover::after {
48                 width: 100%;
49                 height: 100%;
50             }
51 
52             button:hover::before {
53                 border-top-color: #4361ee;
54                 border-right-color: #4361ee;
55                 transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
56             }
57 
58             button:hover::after {
59                 border-bottom-color: #4361ee;
60                 border-left-color: #4361ee;
61                 transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
62             }
63         </style>
64     </head>
65     <body>
66         <div id="draw-border">
67             <button>Hover me</button>
68         </div>
69     </body>
70 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>css特效3圆形</title>
 6         <style type="text/css">
 7             #circle-btn {
 8                 display: flex;
 9                 align-items: center;
10                 justify-content: center;
11                 height: 100vh;
12             }
13 
14             .btn-container {
15                 position: relative;
16             }
17 
18             button {
19                 border: 0;
20                 border-radius: 50px;
21                 color: white;
22                 background: #5f55af;
23                 padding: 15px 20px 16px 60px;
24                 text-transform: uppercase;
25                 background: linear-gradient(to right, #f72585 50%, #5f55af 50%);
26                 background-size: 200% 100%;
27                 background-position: right bottom;
28                 transition: all 2s ease;
29             }
30 
31             svg {
32                 background: #f72585;
33                 padding: 8px;
34                 border-radius: 50%;
35                 position: absolute;
36                 left: 0;
37                 top: 0%;
38             }
39 
40             button:hover {
41                 background-position: left bottom;
42             }
43         </style>
44     </head>
45     <body>
46         <div id="circle-btn">
47             <div class="btn-container">
48 
49                 <button>Hover me</button>
50             </div>
51         </div>
52     </body>
53 </html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css特效4圆角</title>
        <style type="text/css">
            #border-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
            }

            button {
                border: 0;
                border-radius: 10px;
                background: #2ec4b6;
                text-transform: uppercase;
                color: white;
                font-size: 16px;
                font-weight: bold;
                padding: 15px 30px;
                outline: none;
                position: relative;
                transition: border-radius 3s;
                -webkit-transition: border-radius 3s;
            }

            button:hover {
                border-bottom-right-radius: 50px;
                border-top-left-radius: 50px;
                border-bottom-left-radius: 10px;
                border-top-right-radius: 10px;
            }
        </style>
    </head>
    <body>
        <div id="border-btn">
            <button>Hover me</button>
        </div>
    </body>
</html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>css特效5冰冻</title>
 6         <style type="text/css">
 7             #frozen-btn {
 8                 display: flex;
 9                 align-items: center;
10                 justify-content: center;
11                 height: 100vh;
12             }
13 
14             button {
15                 border: 0;
16                 margin: 20px;
17                 text-transform: uppercase;
18                 font-size: 20px;
19                 font-weight: bold;
20                 padding: 15px 50px;
21                 border-radius: 50px;
22                 color: white;
23                 outline: none;
24                 position: relative;
25             }
26 
27             button:before {
28                 content: '';
29                 display: block;
30                 background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
31                 background-size: 210% 100%;
32                 background-position: right bottom;
33                 height: 100%;
34                 width: 100%;
35                 position: absolute;
36                 top: 0;
37                 bottom: 0;
38                 right: 0;
39                 left: 0;
40                 border-radius: 50px;
41                 transition: all 1s;
42                 -webkit-transition: all 1s;
43             }
44 
45             .green {
46                 background-image: linear-gradient(to right, #25aae1, #40e495);
47                 box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
48             }
49 
50             .purple {
51                 background-image: linear-gradient(to right, #6253e1, #852D91);
52                 box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
53             }
54 
55             .purple:hover:before {
56                 background-position: left bottom;
57             }
58 
59             .green:hover:before {
60                 background-position: left bottom;
61             }
62         </style>
63     </head>
64     <body>
65         <div id="frozen-btn">
66             <button class="green">Hover me</button>
67             <button class="purple">Hover me</button>
68         </div>
69     </body>
70 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>css特效6闪亮</title>
 6         <style type="text/css">
 7             #shiny-shadow {
 8                 display: flex;
 9                 align-items: center;
10                 justify-content: center;
11                 height: 100vh;
12                 background: #1c2541;
13             }
14 
15             button {
16                 border: 2px solid white;
17                 background: transparent;
18                 text-transform: uppercase;
19                 color: white;
20                 padding: 15px 50px;
21                 outline: none;
22                 overflow: hidden;
23                 position: relative;
24             }
25 
26             span {
27                 z-index: 20;
28             }
29 
30             button:after {
31                 content: '';
32                 display: block;
33                 position: absolute;
34                 top: -36px;
35                 left: -100px;
36                 background: white;
37                 width: 50px;
38                 height: 125px;
39                 opacity: 20%;
40                 transform: rotate(-45deg);
41             }
42 
43             button:hover:after {
44                 left: 120%;
45                 transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
46                 -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
47             }
48         </style>
49     </head>
50     <body>
51         <div id="shiny-shadow">
52             <button><span>Hover me</span></button>
53         </div>
54     </body>
55 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>css特效7加载</title>
 6         <style type="text/css">
 7             #loading-btn {
 8                 display: flex;
 9                 align-items: center;
10                 justify-content: center;
11                 height: 100vh;
12             }
13 
14             button {
15                 background: transparent;
16                 border: 0;
17                 border-radius: 0;
18                 text-transform: uppercase;
19                 font-weight: bold;
20                 font-size: 20px;
21                 padding: 15px 50px;
22                 position: relative;
23             }
24 
25             button:before {
26                 transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
27                 content: '';
28                 width: 1%;
29                 height: 100%;
30                 background: #ff5964;
31                 position: absolute;
32                 top: 0;
33                 left: 0;
34             }
35 
36             button span {
37                 mix-blend-mode: darken;
38             }
39 
40             button:hover:before {
41                 background: #ff5964;
42                 width: 100%;
43             }
44         </style>
45     </head>
46     <body>
47         <div id="loading-btn">
48             <button><span>Hover me</span></button>
49         </div>
50     </body>
51 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>四周边框发光</title>
 6         <style type="text/css">
 7             #one{
 8                 width: 9.375rem;
 9                 height: 6.375rem;
10                 border: 0.3125rem;
11                 border-radius: 0.3125rem;
12                 box-shadow: 0 0 0.9375rem red;
13             }
14         </style>
15     </head>
16     <body>
17         <div id="one">
18             
19         </div>
20     </body>
21 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6         <title>新拟态UI</title>
 7         <style type="text/css">
 8             html {
 9                 /* 定义变量 */
10                 --bgColor: #ff5353;
11 
12                 /* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(A) */
13                 --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
14                 --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
15 
16                 --whiteShadow2: 15px 15px 25px rgba(255, 117, 117, .5);
17                 --blackShadow2: -15px -15px 25px rgba(110, 40, 40, .2);
18             }
19 
20             /* 设置一些页面的布局样式 */
21             body {
22                 display: flex;
23                 margin: 0;
24                 padding: 0;
25                 width: 100vw;
26                 height: 100vh;
27                 justify-content: center;
28                 align-items: center;
29                 background-color: var(--bgColor);
30             }
31 
32             .card {
33                 width: 30vh;
34                 height: 30vh;
35                 /* margin: 45px; */
36                 background-color: var(--bgColor);
37                 border-radius: 30px;
38             }
39 
40             /* 主要部分 */
41             .left {
42                 box-shadow: inset var(--blackShadow),
43                     inset var(--whiteShadow);
44             }
45 
46             .right {
47                 box-shadow: var(--blackShadow),
48                     var(--whiteShadow);
49                 padding: 5px;
50             }
51 
52             .left2 {
53                 box-shadow: inset var(--blackShadow2),
54                     inset var(--whiteShadow2);
55             }
56 
57             .right2 {
58                 box-shadow: var(--blackShadow),
59                     var(--whiteShadow);
60                 padding: 5px;
61                 margin: 50px;
62             }
63         </style>
64     </head>
65     <body>
66         <div class="card right">
67             <div class="card left"></div>
68         </div>
69 
70         <div class="card right2">
71             <div class="card left2"></div>
72         </div>
73 
74     </body>
75 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6         <title>新拟态 Document</title>
 7         <style type="text/css">
 8             html {
 9                 /* 定义变量 */
10                 --bgColor: #ff5353;
11 
12                 /* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(A) */
13                 --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
14                 --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
15             }
16 
17             /* 设置一些页面的布局样式 */
18             body {
19                 display: flex;
20                 margin: 0;
21                 padding: 0;
22                 width: 100vw;
23                 height: 100vh;
24                 justify-content: center;
25                 align-items: center;
26                 background-color: var(--bgColor);
27             }
28 
29             .card {
30                 width: 30vh;
31                 height: 30vh;
32                 margin: 45px;
33                 background-color: var(--bgColor);
34                 border-radius: 30px;
35             }
36 
37             /* 主要部分 */
38             .left {
39                 /* 设置外阴影 */
40                 box-shadow: var(--blackShadow),
41                     var(--whiteShadow);
42             }
43 
44             .right {
45                 /* 设置内阴影 */
46                 box-shadow: inset var(--blackShadow),
47                     inset var(--whiteShadow);
48             }
49         </style>
50     </head>
51     <body>
52         <div class="card left"></div>
53         <div class="card right"></div>
54     </body>
55 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6         <title>新拟态UI</title>
 7         <style type="text/css">
 8             html {
 9                 /* 定义变量 */
10                 --bgColor: #ff5353;
11 
12                 /* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(A) */
13                 --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
14                 --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
15 
16                 --whiteShadow2: 15px 15px 25px rgba(255, 117, 117, .5);
17                 --blackShadow2: -15px -15px 25px rgba(110, 40, 40, .2);
18             }
19 
20             /* 设置一些页面的布局样式 */
21             body {
22                 display: flex;
23                 margin: 0;
24                 padding: 0;
25                 width: 100vw;
26                 height: 100vh;
27                 justify-content: center;
28                 align-items: center;
29                 background-color: var(--bgColor);
30             }
31 
32             .card {
33                 width: 30vh;
34                 height: 30vh;
35                 margin: 45px;
36                 background-color: var(--bgColor);
37                 border-radius: 30px;
38             }
39 
40             /* 主要部分 */
41             .left {
42                 box-shadow: inset var(--blackShadow2),
43                     inset var(--whiteShadow2);
44             }
45 
46             .right {
47                 box-shadow: var(--blackShadow2),
48                     var(--whiteShadow2);
49             }
50         </style>
51     </head>
52     <body>
53         <div class="card left"></div>
54         <div class="card right"></div>
55 
56     </body>
57 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>加载中</title>
 6     </head>
 7     <body>
 8         
 9         <style type="text/css">
10         .loading:after {
11         overflow: hidden;
12         display: inline-block;
13         vertical-align: content;
14         animation: ellipsis 2s infinite;
15         content: "\2026";
16         font-weight: 900;
17         }
18         
19         @keyframes ellipsis {
20         from {
21         width: 2px;
22         }
23         to {
24         width: 20px;
25         }
26         }
27         </style>
28         <span class="loading" style="font-weight: 800;">加载中</span>
29         
30     </body>
31 </html>

行为

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>三角形+闭包函数</title>
 6         <style type="text/css">
 7             .11 {
 8                 width: 0;
 9                 height: 0;
10                 border: 40px solid;
11                 border-color: transparent transparent red;
12             }
13 
14 
15             .div1 {
16                 width: 0px;
17                 height: 0px;
18                 text-align: center;
19                 border-top: 54px solid transparent;
20                 border-bottom: 0px solid transparent;
21                 border-right: 0px solid transparent;
22                 border-left: 46px solid pink;
23             }
24 
25             .div2 {
26                 width: 0px;
27                 height: 0px;
28                 text-align: center;
29                 border-top: 0100px solid skyblue;
30                 border-bottom: 100px solid pink;
31                 border-right: 100px solid lightgreen;
32                 border-left: 100px solid yellow;
33                 margin-top: 20px;
34             }
35         </style>
36     </head>
37     <body>
38         <div id="11">
39 
40         </div>
41 
42 
43         <div class="div1">三角形</div>
44         <div class="div2"></div>
45 
46         <script type="text/javascript">
47             var generateClosure = function() {
48                 var count = 0;
49                 var get = function() {
50                     count++;
51                     return count;
52                 };
53                 return get;
54             };
55 
56             var counter1 = generateClosure();
57             var counter2 = generateClosure();
58             console.log(counter1());
59             console.log(counter1());
60             console.log(counter1());
61             console.log(counter2());
62             console.log(counter2());
63             console.log(counter2());
64         </script>
65     </body>
66 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>查看斐波那契数列</title>
 6         <!-- <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> -->
 7         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 8     </head>
 9     <body>
10         <input type="text" name="" id="inp" /><br />
11         <button type="button" id="fibs">查看斐波那契数列</button>
12         <div id="one">
13         </div>
14         <script type="text/javascript">
15             $(document).ready(function() {
16                 // alert(1);
17                 let a = 0;
18                 let arr = [0, 1]
19                 $("#fibs").click(function() {
20                     var inp = $("#inp").val();
21                     $("#one").html("")
22                     fib(inp);
23                     //                    alert(inp)
24                 });
25                 //                 fib(8);
26                 function fib(x) {
27                     var num1 = 0;
28                     var num2 = 1;
29                     var sum;
30                     // let g=x;
31                     for (let i = 0; i < x; i++) {
32                         if (i < 2) {
33                             if (i == 0) {
34                                 sum = 0;
35                                 console.log(0);
36                                 $("#one").prepend(0 + "<br/>" + "斐波那契数列" + "<br/>");
37                                 a++;
38                                 console.log("循环了：" + a + "次");
39                                 // return 0;
40                             } else if (i == 1) {
41                                 sum = 1;
42                                 console.log(1);
43                                 $("#one").prepend(1 + "<br/>");
44                                 a++;
45                                 console.log("循环了：" + a + "次");
46                                 // return 1;
47                             };
48                         } else if (i >= 2) {
49                             sum = num1 + num2;
50                             num1 = num2;
51                             num2 = sum;
52                             $("#one").prepend(sum + "<br/>");
53                             console.log(sum);
54                             a++;
55                             console.log("循环了：" + a + "次");
56                         }
57                     };
58                 };
59             })
60         </script>
61     </body>
62 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>斐波那契数列</title>
 6         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 7         
 8     </head>
 9     <body>
10         <div id="one">
11             
12         </div>
13         <script type="text/javascript">
14             let fib = n => n > 1 ? fib(n-1) + fib(n-2) : n;
15             console.log(fib(7));
16             
17             console.log("手动换行");
18         var mem = [0,1];
19         var f = function(n){
20         var res = mem[n];
21             if(typeof res !== 'number'){
22                     mem[n] = f(n-1) + f(n-2);
23                     console.log(mem[n])
24                     res = mem[n];
25                 }
26                 return res;
27         }
28  
29     console.log(f(10))
30         </script>
31     </body>
32 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>页面监听 滚动条</title>
 6         <style type="text/css">
 7             #one{
 8                 height: 2000px;
 9             }
10         </style>
11         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
12     </head>
13     <body>
14         <div id="one">
15             
16         </div>
17         <script type="text/javascript">
18             $(window).scroll(function(){   //页面监听，当页面的滚动条滑到底部时使用该方法。
19                     var scrollTop = $(this).scrollTop();      //页面已经滑过的高度。
20                     var scrollHeight = $(document).height();      //获取页面的文档总高度 。
21                     var windowHeight = $(this).height();      //目前页面显示内容的高度。
22                     
23                     if (scrollTop + windowHeight == scrollHeight ) {    //当页面已滑过的高度 '加上' 现在显示在屏幕的高度  '等于'  整个页面文档html的高度时，启动下面的方法 
24                       alert(scrollHeight); //当页面底部时弹出当前页面文档的最大高度
25                     };
26               });
27         </script>
28     </body>
29 </html>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>拿取本网页路径</title>
 6         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <div class="a2">
10             哈哈哈哈
11         </div>
12         <script type="text/javascript">
13             $(function(){
14                 
15                 //接收值的方法，我的理解就是通过页面的url，然后提取页面url里面自己需要的某一个或者一组数据，然后根据这个数据进行当前页面的显示设置
16                 //下面是一些拿取网页url内部所需数据的一些简单语句，更多还需努力发现。
17                 
18                 console.log("本网页的url字符串为："+window.location.href);//拿取到本页面的url所有字符，
19                 //因为我的页面url内有中文所以会出现http://127.0.0.1:8848/tiaoshi/ajax%E6%94%B6%E5%88%B0%E5%80%BC.html?enid=endid?ling=lingyigezhi?js=js  这种情况。
20                 //我的中文字符  收到值 在url内的显示为%E6%94%B6%E5%88%B0%E5%80%BC
21                 
22                 console.log("本网页的端口号"+window.location.port);
23                 //拿取到本页面url的端口号
24                 
25                 console.log("本网页的url协议为："+window.location.protocol);
26                 //拿取到本页面的url协议
27                 
28                 console.log("本网页的href属性中跟在问号后面的部分为："+window.location.search);
29                 //拿取到url内？后面的内容，他会拿取第一个？后面的所有内容，入股不是自己需要的就需要自己对内容进行提取了
30                 
31                 console.log("本网页的host "+window.location.host);
32                 //拿取到本页面的host名
33                 
34                 
35                 var zijiurl=window.location.search;
36                 var urlDeDengHao=zijiurl.substring(zijiurl.lastIndexOf('=')+1,zijiurl.length);
37                 console.log("本网页变量的值，等号后面的部分"+urlDeDengHao);
38                 //拿取本页面url内=后面的值，我是从别的地方看到的，不太清楚他的原理。。。
39                 //显示的是最后一个等号后面的值
40                 
41                 console.log("本网页的url路径"+window.location.pathname);
42                 //拿取本网页的url路径
43                 
44                 console.log("本网页# 后面的内容"+window.location.hash);
45                 //拿取本网页的url路径里面#后面的内容，包括#
46                 
47             })
48         </script>
49     </body>
50 </html>

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>ajax</title>
  6     </head>
  7     <body>
  8         <button type="button" id="btn">点一下</button>
  9         <button type="button" id="btn1">点一下2</button>
 10         <div id="ce">
 11 
 12         </div>
 13         <script type="text/javascript">
 14             var oBtn = document.getElementById('btn');
 15             var oBtn1 = document.getElementById("btn1");
 16 
 17             // 第一种请求
 18             oBtn.onclick = function() { //基础ajax请求开始
 19 
 20 
 21                 //第一步        //可以先判断在创建    var xhr = new XMLHttpRequest();//创建Ajax对象
 22                 var xhr = null; //创建Ajax对象
 23                 if (window.XMLHttpRequest) { //通过判断浏览器内部是否有request方法来创建对象
 24                     xhr = new XMLHttpRequest();
 25                 } else {
 26                     xhr = new ActiveXObject('Microsoft.XMLHTTP');
 27                 }
 28 
 29 
 30                 //第二步
 31                 xhr.open('get', '路径', true); // "设置" 请求信息
 32                 //open的三个参数，第一个请求的方式get/post；第二个请求的路径，第三个请求是否异步
 33 
 34                 //第三步
 35                 xhr.send(); // "提交" 请求
 36 
 37                 //第四步
 38                 //等待服务器返回内容
 39                 xhr.onreadystatechange = function() {
 40                     if (xhr.readyState == 0) { //判断当前的请求状态，0代表（初始化）还没有调用open()方法
 41                         alert(xhr.responseText); //弹出内容
 42                         alert("（初始化）还没有调用open()方法") //弹出提示
 43                     };
 44                     if (xhr.readyState == 1) { //判断当前的请求状态，1代表（载入）已调用send()方法，正在发送请求
 45                         alert(xhr.responseText); //弹出内容
 46                         alert("（载入）已调用send()方法，正在发送请求") //弹出提示
 47                     };
 48                     if (xhr.readyState == 2) { //判断当前的请求状态，2代表（载入完成）send()方法完成，已收到全部响应内容
 49                         alert(xhr.responseText); //弹出内容
 50                         alert("（载入完成）send()方法完成，已收到全部响应内容") //弹出提示
 51                     };
 52                     if (xhr.readyState == 3) { //判断当前的请求状态，3代表（解析）正在解析响应内容（因为收到的内容 并不是人能看懂的内容，所以需要解析）
 53                         alert(xhr.responseText); //弹出内容
 54                         alert("（解析）正在解析响应内容（因为收到的内容 并不是人能看懂的内容，所以需要解析）") //弹出提示
 55                     };
 56                     if (xhr.readyState == 4) { //判断当前的请求状态，4代表后端已经处理完成 （完成）响应内容解析完成，可以在客户端调用了
 57 
 58                         if (xhr.status == 200) { //请求完成，并且后台的状态码是200时，才算完成一个请求。
 59 
 60                             alert(xhr.responseText); //弹出内容，此时可以将内容赋到外部对象，外部引入对象内容达到使用数据
 61                             alert("（完成）响应内容解析完成，可以在客户端调用了") //弹出提示
 62 
 63                         }
 64 
 65 
 66                     };
 67                 }
 68             }; //基础ajax请求结束。
 69 
 70             //第二种请求   使用
 71             oBtn1.onclick = function() {
 72                 var xhr = null;
 73                 if (window.XMLHttpRequest) {
 74                     xhr = new XMLHttpRequest();
 75                 } else {
 76                     xhr = new ActiveXObject('Microsoft.XMLHTTP');
 77                 }
 78                 xhr.open('GET', '路径', true); //post出错，可能是因为本地文件
 79                 xhr.send();
 80                 xhr.onreadystatechange = function() {
 81                     if (xhr.readyState == 4) {
 82                         if (xhr.status == 200) { //红色标识为成功后执行的任务
 83 
 84 
 85                             var ce = document.getElementById('ce'); // 获取显示新闻列表的节点
 86                             var html = '';
 87                             html += xhr.responseText;
 88 
 89                             //     var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型  每一个json里面有两个键：title和date
 90                             // for (var i=0; i<data.length; i++) {   // 循环所有的json数据，并把每一条添加到列表中
 91                             // html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
 92                             // html +=data[i];
 93                             // }
 94 
 95                             ce.innerHTML = html; //把内容放在页面里
 96                             alert(1)
 97                         } else {
 98                             alert('出错了,Err：' + xhr.status);
 99                         }
100                     }
101 
102                 }
103 
104             };
105         </script>
106     </body>
107 </html>

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>ajax 下滑加载</title>
  6         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  7         <style type="text/css">
  8             * {
  9                 margin: 0;
 10                 padding: 0;
 11             }
 12 
 13             .one {
 14                 width: 1200px;
 15                 margin: 0 auto;
 16                 height: 800px;
 17                 border: 1px solid greenyellow;
 18             }
 19 
 20             .discussList {
 21                 width: 1200px;
 22                 height: 600px;
 23                 border: 1px solid red;
 24                 position: relative;
 25 
 26             }
 27 
 28             .loading {
 29                 width: 90px;
 30                 color: #6c6c6c;
 31                 margin: 0 auto;
 32                 position: absolute;
 33                 bottom: 5px;
 34                 left: calc(50% - 45px);
 35             }
 36 
 37             .loading:after {
 38                 overflow: hidden;
 39                 display: inline-block;
 40                 vertical-align: content;
 41                 animation: ellipsis 2s infinite;
 42                 content: "\2026";
 43                 font-weight: 900;
 44             }
 45 
 46             @keyframes ellipsis {
 47                 from {
 48                     width: 2px;
 49                 }
 50 
 51                 to {
 52                     width: 20px;
 53                 }
 54             }
 55         </style>
 56     </head>
 57     <body>
 58         <button type="button" onclick="">测试ajax</button>
 59 
 60         <div class="one">
 61             <div class="discussList">
 62 
 63             </div>
 64             <!-- <div class="loading">
 65 
 66             </div> -->
 67         </div>
 68         <script type="text/javascript">
 69             $(window).scroll(function() {
 70                 var scrollTop = $(this).scrollTop(); //
 71                 var scrollHeight = $(document).height(); //获取页面的文档高度 
 72                 var windowHeight = $(this).height();
 73                 if (scrollTop + windowHeight == scrollHeight) {
 74                     loadMore();
 75                 }
 76 
 77             })
 78 
 79             function loadMore() {
 80                 $(".discussList").append('<div class=loading>加载中</div>'); //插入加载中的提示框
 81                 var stop = true; //默认停止加载
 82                 // 页数
 83                 var page = 0;
 84                 // 每页展示5个
 85                 var size = 5;
 86                 var bottomH = 10; //距离底部多少像素开始加载
 87                 $(window).scroll(function() {
 88 
 89                     totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop() + bottomH);
 90                     if ($(document).height() <= totalheight) {
 91                         if (stop == true) {
 92                             stop = false;
 93                             $(".loading").show(); //显示加载中提示
 94 
 95                             $.ajax({
 96                                 // url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
 97                                 url: '路径',
 98                                 type: 'post',
 99                                 // contentType: "application/json; charset=utf-8",
100                                 dataType: "json",
101                                 success: function(data) {
102                                     var dateLength = data.data.length; //数据长度
103                                     if (dateLength > 0) {
104                                         $(".loading").before('456')
105                                         $('.loading').hide();
106                                         page++;
107                                         stop = true;
108                                     } else {
109                                         $(".loading").text("暂无数据")
110                                     }
111                                 },
112                                 error: function(xhr, type) {
113                                     setTimeout(function() {
114                                         $(".loading").remove();
115                                     }, 3000)
116                                     // alert("ajax error!");
117 
118                                 }
119                             });
120                             //
121                             $.ajax({
122                                 url: "路径",
123                                 methods: 'post',
124                                 dataType: 'json',
125                                 data: {
126                                     // id: menu_id,
127                                     page: 0,
128                                 },
129                                 success: function(res) {
130                                     console.log(123);
131                                     console.log(res.data);
132                                     var lengths = res.data.length;
133                                     // for (let i = 0; i < lengths; i++) {
134                                     //     var ls = res.data[i];
135                                     //     $(".bannerTwo_box>ul").append('<li><a href=' + "/index.php/index/casezj/detail.html?casezj_id=" + ls.id +
136                                     //         "&id=" + ls.menu_id + '><img src= ' + ls.img + ' alt="测试图"></li></a>');
137                                     //     console.log(ls);
138                                     // }
139 
140                                     // setTimeout(function() {
141                                     //     for (let i = 0; i < 4; i++) {
142                                     //         $(".bannerTwo_box>ul").append(
143                                     //             "<li><a><img src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2876369716,3684387852&fm=26&gp=0.jpg' " +
144                                     //             "alt='测试图'></li></a>");
145                                     //     }
146                                     // }, 500);
147                                 }
148                             });
149 
150                             //
151 
152 
153                             //
154                         }
155 
156                     }
157                 });
158             }
159         </script>
160     </body>
161 </html>

参考学习使用

如有侵权，请联系本人

posted @ 2020-12-05 10:47 伊人兮明眸秋水阅读(71) 评论(0) 编辑收藏举报

刷新页面返回顶部

伊人兮明眸秋水

仅供学习使用的一些样式+行为

公告