html前端按钮效果 常见按钮特效整理：1 .zkbtn--上下抖动.zkbtn{animation:td 1.5s infinite; -webkit-animation:td 1.5s infinite; } @-webkit-keyframes td{ 0%,20%,50%,80%,100%{-webkit-transform:translateY(0);} 40%{-webkit-transform:translateY(-4px);} 60%{-webkit-transform:translateY(-8px);} } @keyframes td{ 0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0);} 40%{-webkit-transform:translateY(-4px);transform:translateY(-4px);} 60%{-webkit-transform:translateY(-8px);transform:translateY(-8px);}2 .amint-da---缓慢放大.amint-da{ animation: scaleOut 1s 1s infinite ease; } @-webkit-keyframes scaleOut { 0% { transform: scale(0.95); opacity: 0.9; } 50% { transform: scale(1); opacity: 0.95; } 100% { transform: scale(1.05); opacity: 1; } }3 鼠标悬停缓慢向上移动-5px;.p3{transition:all .2s linear; -webkit-transition:all .2s linear; -moz-transition:all .2s linear; -ms-transition:all .2s linear; -o-transition:all .2s } .p3 li:hover{transform:translateY(-5px);}4 .c_stykebrn按钮不停放大.c_stykebrn{ -moz-animation:fd 1s linear infinite backwards; -ms-animation:fd 1s linear infinite backwards; -o-animation:fd 1s linear infinite backwards; -webkit-animation:fd 1s linear infinite backwards; animation:fd 1s linear infinite backwards; } @keyframes fd{ 0%{ transform:scale(1); } 50%{ transform:scale(1.1); } 100%{ transform:scale(1); } }5 .animated around按钮左右移动.animated { animation-duration: 1s; /*动画时间*/ animation-fill-mode: both; /*播放后的状态*/ animation-duration: 2s; /*动画时间*/ animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/ } .around{ animation-name:aroundAnimation; /*动画的名称*/ transform-origin: center bottom; /*设置动画旋转元素的基点为*/ cursor: pointer; } @keyframes aroundAnimation{ 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); } 40%, 43%{ transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(-20px,0,,0); } 70%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(-10px,0px,0); } 80%{ transform: translate2d(10px,0,0); } } 2. .laybtn{animation: showb 2s .2s linear both infinite; -webkit-animation: showb 2s .2s linear both infinite; -moz-animation: showb 2s .2s linear both infinite; -o-animation: showb 2s .2s linear both infinite; -ms-animation: showh 1s .2s linear both infinite;} @-webkit-keyframes showb{ 0%,100%,20%,50%,80% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.9); transform: scale(0.9); } 60% { -webkit-transform: scale(0.9); transform: scale(0.9); } }6 .animate-hotspot-down按钮上下抖动@keyframes hotspot-down{25%{transform:translateY(-2px)}50%,100%{transform:translateY(0)}75%{transform:translateY(2px)}} .animate-hotspot-down{-webkit-animation:hotspot-down 2s linear infinite;animation:hotspot-down 2s linear infinite}7 .鼠标悬停刀片加抖动效果.banner_btn{display: block; width: 312px; height:78px ; background: url(images/banner_btn_03.png) no-repeat center top; position: absolute; left: 50%; margin-left: -420px; bottom: 155px; color: #fff; font-size: 48px; font-family: '方正'; font-weight: bold; text-align: center; line-height: 78px; overflow: hidden;transition:all .2s linear;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-ms-transition:all .2s linear;-o-transition:all .2s linear;} .banner_btn:before { content: ' '; position: absolute; background: #fff; width: 10px; height: 100px; top: 0; left: -200px; opacity: 0.2; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: skewX(-25deg); transform: skewX(-25deg); overflow: hidden; } .banner_btn:hover:before { width: 30px; left: 350px; } .banner_btn:hover{ color: #fff;transform:translateY(-2px);-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);-ms-transform:translateY(-2px);-o-transform:translateY(-2px); }8、按钮左右走动.junp img{ webkit-animation: jump 3s linear normal both infinite; -o-animation: jump 3s linear normal both infinite; animation: jump 3s linear normal both infinite; } @keyframes jump{ 0%{ transform: translateX(0); } 50%{ transform: translateX(15px); } 100%{ transform: translateX(0); } }9、晃动效果.sp1{ -webkit-animation: fan 2s infinite; animation: fan 2s infinite; } .sp1{ top:84px; right:173px; } @keyframes fan { 0%{ transform: rotateY(0deg); } 100%{ transform: rotateY(360deg); } }10、缩小放大.chatcar{ width:50px; height:50px; background:#000; animation:chatchars 2s ease;} @keyframes chatchars{ 0%{left: 120px; transform:scale(0.1);} 20%{left: 20px;} 40%{left: 40px;} 100%{left: 12px; transform:scale(1);}11、挂在绳索上摇摆动画.als { position: absolute; width: 5rem; height: 5rem; background:#000; -webkit-transform-origin: center -20rem; transform-origin: center -20rem; -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; } @keyframes swing { 0% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 12.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 25% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 37.5% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 62.5% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 75% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 87.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } }12.红包抖动效果.swt-float{z-index:2147483650;position:fixed;top:0;left:2%;width:100px;top:40%;-webkit-animation:tada 1.5s linear normal both infinite;-o-animation:tada 1.5s linear normal both infinite;animation:tada 1.5s linear normal both infinite} @-moz-keyframes tada{0%{-moz-transform:scale(1)} 10%,20%{-moz-transform:scale(.9) rotate(-3deg)} 30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)} 40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)} 100%{-moz-transform:scale(1) rotate(0)} } @-webkit-keyframes tada{0%{-webkit-transform:scale(1)} 10%,20%{-webkit-transform:scale(.9) rotate(-3deg)} 30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)} 40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)} 100%{-webkit-transform:scale(1) rotate(0)} }14.打字效果.shuru{animation:typing 4s steps(11,end) infinite,blink-caret .5s step-end infinite alternate} @keyframes typing{0%{width:0}25%{width:22ch}100%{width:22ch}} @keyframes blink-caret{50%{border-color:transparent}} @-webkit-keyframes anim1{0%{top:0;opacity:1}100%{top:-100px;opacity:1}}15.按钮不停旋转20度.btn{ -webkit-animation: swing 2s linear normal both infinite; -o-animation: swing 2s linear normal both infinite; animation: swing 2s linear normal both infinite; } @keyframes swing{ 0%{ transform: rotate(5deg); } 50%{ transform: rotate(-5deg); } 100%{ transform: rotate(5deg); } } @-webkit-keyframes swing{ 0%{ -webkit-transform: rotate(5deg); } 50%{ -webkit-transform: rotate(-5deg); } 100%{ -webkit-transform: rotate(5deg); } }16.鼠标悬停显示按钮html:<ul class="p4_cr"> <li> <a href="https://www.tpxhm.com/fdetail/7.html"> <a href="https://www.tpxhm.com/fdetail/7.html" class="pubtn p4_btn">按钮>></a> </a> </li> <li>css:.p4_btn{ display: block; width: 192px; height: 51px; font-size: 24px; color: #fff; line-height: 51px; background: linear-gradient(90deg, #fc6550, #f92676); border-radius: 45px; position: absolute; left: 35px;bottom:-30px;} .p4_cr li a.pubtn{transition: all 0.5s linear; -webkit-transition: all 0.5s linear; opacity: 0; } .p4_cr li:hover{transform:translate(0px,-20px);-webkit-transform:translate(0px,-20px); } .p4_cr li:hover a.pubtn{bottom: -30px;opacity: 1; color: #fff;}15.按钮上下动 目标{animation: float 4s ease infinite;} @keyframes float { 0%,100% { transform: translate3d(0,0,0) } 40% { transform: translate3d(0,-20px,0) } }16.从小大的圆形.mubiao{ width:5px;height:5px; margin: 300px auto; background: #000; border-radius:50%; animation:vs 3s linear infinite backwards} @keyframes vs{0%{box-shadow:0 0 156px #000} 25%{box-shadow:0 0 0 80px #000} 50%{box-shadow:0 0 0 156px #000} 25%{box-shadow:0 0 0 80px #000} 100%{box-shadow:0 0 156px #000} }17.放大隐藏.目标{ width: 50px; height: 50px; background: #000; -webkit-animation:scaleout 3.3s infinite ease-in-out; animation:scaleout 3.3s infinite ease-in-out;} @-webkit-keyframes scaleout { 0% { -webkit-transform:scale(1.0) } 100% { -webkit-transform:scale(2.1); opacity:0; } }@keyframes scaleout { 0% { transform:scale(1.0); -webkit-transform:scale(1.0); opacity:0; } 10% { transform:scale(1.0); -webkit-transform:scale(1.0); opacity:1; } 100% { transform:scale(2.1); -webkit-transform:scale(2.1); opacity:0; } }18.放大缩小.目标{ width: 50px; height: 50px; background: #000; animation:pulseScale 2s infinite;} .pulseScale{-webkit-animation-name:pulseScale;animation-name:pulseScale} @-webkit-keyframes pulseScale{50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 100%{-webkit-transform:translateZ(0)} } @keyframes pulseScale{50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 100%{transform:translateZ(0)} }19.鼠标悬停翻转.swtBtn{-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;} .swtBtn:hover{-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);-o-transform:rotateY(360deg);-webkit-transform:rotateY(360deg) ;transform:rotateY(360deg)}20.按钮放大效果<style> .btn{ display: block; width: 200px; height: 50px; background-color: #D72602; position: relative; color: #fff; text-decoration: none; text-align: center; line-height: 50px; font-size: 25px; border-radius: 45px;} .div2 { position: absolute; right: 0px; top: 0; bottom: 0; margin: auto; pointer-events: none; background-color: #ffffff; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; width: 200px; height: 150px; -webkit-animation: ball-scale 1s 0s ease-in-out infinite; -moz-animation: ball-scale 1s 0s ease-in-out infinite; -ms-animation: ball-scale 1s 0s ease-in-out infinite; -o-animation: ball-scale 1s 0s ease-in-out infinite; animation: ball-scale 1s 0s ease-in-out infinite; } @-webkit-keyframes ball-scale { 0% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } @keyframes ball-scale { 0% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } } </style> <a href="javascript:;" class="btn"> 了解详情 <div class="div2"></div> </a>

js 短信60秒倒计时 Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="javascript:void(0);" id="gSMS" onclick="get_sms_captcha('2')">获取短信验证码</a> </body> </html>Javascript代码：var countDownT = 60; function get_sms_captcha(type){ countDownT = 60; setTime(); //下方写业务 } function setTime(){ if (countDownT == 0){ $("#gSMS").attr("onclick","get_sms_captcha('2')"); $("#gSMS").text("获取短信验证码"); } else{ $("#gSMS").attr("onclick","#"); $("#gSMS").text("重新发送("+countDownT+")"); countDownT--; setTimeout(function () { setTime(); },1000) } }效果图：

JS 循环遍历JSON数据 JSON数据如：{"options":"[{/"text/":/"张三/",/"value/":/"9/"},{/"text/":/"李四/",/"value/":/"10/"},{/"text/":/"王五/",/"value/":/"13/"}]"}用js可以写成：var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; for(var o in data){ console.log("text:"+data[o].name+" value:"+data[o].age ); }实例：结合ajaxhtml代码：注意引入jquery<div class="lsit"> </div>$(function(){ $.ajax({ //请求方式 type:'GET', //发送请求的地址 url:'http://www.tpxhm.com/index/H5luck/h5_list', //服务器返回的数据类型 dataType:'json', //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式 data:'', success:function(data){ for(var p in data){ var arr=Number(p) + Number(1) ; $('.lsit').append('<p><img src="https://www.tpxhm.com/fdetail/123.html'+data[p].userimg+'" alt=""><span>'+data[p].nickname+'<i>'+data[p].tel+'</i><br><u>奖品：'+data[p].cons+'</u><b>'+arr+'</b></span></p>') } }, error:function(jqXHR){ //请求失败函数内容 } }); })

封装GetQueryString()方法来获取URL的值 代码如下：(说明：获取的是当前页面的URL；这里测试需要在后边自己手动添加 ?name=xiangruding&sex=nuuu&age=90)； <script type="text/javascript"> var name = GetQueryString("name"); var sex = GetQueryString("sex"); var age = GetQueryString("age"); console.log("name= "+name); console.log("sex= "+sex); console.log("sex= "+age); function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURI(r[2]); return null; } </script>

JavaScript异步加载，document.write页面空白问题如何解决？ 1、Dom元素加载是在文档流中执行的。当最后一行加载出来后。文档流就关闭了。document.close().2、文档流关闭后，如果再去执行document.write()。因为document没有文档流了无法write.所以就会重新document.open()一个新的文档流。导致之前的页面内容被清空。由此可知。在页面加载完毕后再次使用document.write()会导致页面空白。怎么办呢？以下提供解决方法：var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = 'https://www.tpxhm.com/fdetail/feature.js'; head.appendChild(script);例如，我们只想给那些满足一定条件的用户加载某个脚本，也就是经常提到的“懒加载”。