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>
参考学习使用
如有侵权，请联系本人