首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js制作支付倒计时页面

Posted in Javascript onOctober 21, 2016

本文实例为大家分享了js支付倒计时页面制作代码，供大家参考，具体内容如下

js制作支付倒计时页面

（图一）

js制作支付倒计时页面

（图二）

js制作支付倒计时页面

（图三）

js制作支付倒计时页面

（图四）

实现目标

一、页面在图一时开始进行倒计时（可以点击取消订单按钮，支付页面消失）。

二、倒计时完毕，出现删除订单。

三、单击删除订单，弹出弹框，询问是否要真正删除订单。

四、单击确定，即可删除订单。

如上图所示效果展示，这里给出所有的源代码（如需运行，只需要修改EJS文件中引入的CSS路径和JS路径即可）.

这个页面其实是自己业余时间，写的东西。

但是里面涉及到，倒计时，弹框，以及字体图（可以参照“如何制作字体图”章节）的相关知识。

这里分享出来，希望大家能从中学到自己想要的知识。
代码很丑，但是基本效果都已经实现。
相关注释，会在代码后注释起来，方便参考。

JS代码

order_detail.js

/**
 * Created by mayouchen on 2016/10/20.
 */
 $(function () {    //加载完DOM的只执行函数 
 var intDiff = parseInt(60);  //倒计时总秒数量
 function timer(intDiff) {
  window.setInterval(function () {
  var day = 0,
   hour = 0,
   minute = 0,
   second = 0;//时间默认值
  if (intDiff > 0) {
   //计算相关的天，小时，还有分钟，以及秒
  day = Math.floor(intDiff / (60 * 60 * 24)); 
  hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
  minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
 second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
  }
  if (minute <= 9) minute = '0' + minute;
  if (second <= 9) second = '0' + second;
  $('#day_show').html(day + "天");
  $('#hour_show').html('<s id="h"></s>' + hour + '时');
  $('#minute_show').html('<s></s>' + minute + '分');
  $('#second_show').html('<s></s>' + second + '秒');
  intDiff--;
  }, 1000);
 //循环函数，是时钟运动起来
 setInterval(function(){
 if($('#minute_show').text() =='00分' && $('#second_show').text() =='00秒'){
  $('.pay-immediately-count').remove();
  $('.cancle-order').remove();
  $('.del-order').show();
  clearInterval();
 }
 },1000)

 //下面三个是跳转链接，本来是在node工程里面的路由配置的，这里大家可以换成自己的链接

 $("#dingdan").click(function () {
 location.href = "/hotel/order"; //这里跳转的是路由的路径
 });
 $("#mengdian").click(function () {
 location.href = "/hotel"; //这里跳转的是路由的路径
 });
 $(".set-detail").click(function () {
 location.href = "/hotel/detail"; //这里跳转的是路由的路径
 });

 //这里都是一些单击事件

 /* 点击删除按钮*/
 $('.del-order').click(function(){
 $(".arrow_mask").show();
 $(".cancel-order-dialog").show()
 })
 /* 弹框的设置---取消键*/
 $(".cancle-order-btn").click(function(){
 $(".cancel-order-dialog").hide();
 $(".arrow_mask").hide();
 });
 /* 弹框的设置---确定键*/
 $(".certain-order").click(function(){
 $(".section-first").remove();
 $(".cancel-order-dialog").remove();
 $(".arrow_mask").remove();
 $(".footer").css({"position":"fixed"});
 });
 /* 弹框的设置---取消键*/
 $(".cancle-order").click(function(){
 $(".section-first").remove();
 $(".footer").css({"position":"fixed"});
 });

}
 //执行上面的函数
 $(function () {
  timer(intDiff);
 });

 });

HTML页面

order_detail.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta charset="utf-8">
<meta content="" name="description">
<meta content="" name="keywords">
<meta content="eric.wu" name="author">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta property="qc:admins" />
<meta content="telephone=no, address=no" name="format-detection">

 <!--添加title前面的图片(这里换成你自己图片的路径即可)--> 
<link rel="shortcut icon" href="/images/hotel/zc.png" type="image/x-icon" />

 <!--页面初始化的样子（这个文件可以页面做初始化）-->
 <link href="/css/hotel/order_detail.css" rel="stylesheet" type="text/css" />

 <!--引入JQ文件-->
<script type="text/javascript" src="/javascripts/lib-cmd/jquery.min2.js"></script>

<!--引入页面操作的JS文件--> 
 </head>
 <body>
 <div class="section-first">
  <div class="date-head">
  <div class="date-head-statue">
   <ul class="date-head-state">
   <li>
    <div class="reservation-status">
    <div>订房状态</div>
    <div>2015-6-26</div>
    <div> 11:14:17</div>
    </div>
   </li>
   <div class="space-underline"></div>
   <li>
    <div class="order-number">
    <div>订单号: </div>
    <div>A23456623</div>
    </div>
   </li>
   <li>
    <div class="total-order">
    <div>订单总额: </div>
    <div>￥98</div>
    </div>
   </li>
   <li>
    <div class="order-status">
    <div>订单状态：</div>
    <div>处理中</div>
    </div>
   </li>
   <li>
    <div class="payment-status">
    <div>支付状态：</div>
    <div>线上支付 </div>
    <div>未支付</div>
    </div>
   </li>

  <li class="cancel-order">
  <div class="pay-immediately">
   <div class="pay-immediately-count">
    <div class="pay-immediately-count-num">立即支付
    <div class="time-item">
     还剩
     <!--<span id="day_show">0天</span>
     <strong id="hour_show">0时</strong>-->
     <span id="minute_show">0分</span>
     <span id="second_show">0秒</span>
    </div>
    </div>
   </div>
   <div class="cancle-order">取消订单</div>
   <span class="del-order">删除订单</span>
  </div>

   </ul>
  </div>
  </div>
 </div>
 <div class="wide-space_line">
 <div>入住信息</div>
 </div>
 <div class="check-information">
 <ul>
  <li>
  <div class="check-in-time">
   <div>入住时间:</div>
   <div>6月25日-6月26日 </div>
   <div>共1晚 </div>
  </div>
  </li>
  <li>
  <div class="room-type">
   <div>房间类型：</div>
   <div>标准间</div>
   <div>1间</div>
  </div>
  </li>
  <li>
  <div class="booking-person">
   <div>预订人：</div>
   <div>马优晨</div>
   <div>1500070188</div>
  </div>
  </li>
  <li>
  <div class="special-requirements">
   <div>特殊要求：</div>
   <div>房间整洁干净</div>
  </div>
  </li>
 </ul>
 </div>
 <div class="wide-space_line">
 <div>酒店信息</div>
 </div>
<div>
 <ul class="section-body">
 <div class="set-detail">
  <div>
  <a href=""><i class="font-name-icon first-icon"></i></a>
  <span class="set-text-detail">国际商务酒店（上海长江南路店）</span>
  </div>
  <div></div>
  <div class="set-text-button">酒店详情</div>
  <div class="greater-number"></div>
 </div>
 <div class="space-underline"></div>
 <div class="set-detail-number">
  <div><a href=""><i class="font-name-icon first-icon"></i></a></div>
  <div class="set-text-detail2"><a href="tel:120" class="aa">021-7893829878</a></div>
  <div class="set-text-button"><a href="tel:120" class="bb">联系我 </a></div>
  <div class="greater-number"></div>
 </div>
 <div class="space-underline"></div>
 <div class="set-detail-address">
  <div><a href=""><i class="font-name-icon first-icon"></i></a></div>
  <div class="set-text-detail set-text-shut">宝山区逸仙路2816号华滋奔腾大厦Ａ栋14楼</div>
  <div class="set-text-button">地图</div>
  <div class="greater-number"></div>
 </div>
 <!--<div class="space-underline"></div>-->
 </ul>
</div>

 <div class="arrow_mask"></div>
 <!--取消的弹框-->
 <div class="cancel-order-dialog">
 <div class="cancel-dialog">
  <div>你确定要取消该订单吗？</div>
  <div class="space-underline2"></div>
  <div class="shuxian"></div>
  <div class="cancel-dialog-btn">
  <div class="cancle-order-btn">取消</div>
  <div class="certain-order">确定</div>
  </div>
 </div>
 </div>

 <div>
 <div class="footer">
  <div id="mengdian"><i class="font-name-icon"></i><span>门店</span></div>
  <div id="dingdan"><i class="font-name-icon"></i><span>我的订单</span><span class="greater-number-bottom"></span><span class="ellipse">12</span></div>
 </div>
 </div>
 </body>
 </html>

CSS代码

order_detail.css

body{
 background: #eeeeee;
}
.date-head{
 width:100%;
}
.date-head-statue{
 width:100%;
 font-size:14px;
 border-radius:4px;
 padding-left:15px;
 padding-right:15px;
}
.date-head-state{
 background: #fff;
 height: 240px;
 border-radius: 10px;
 margin-top: 16px;
 padding-top: 14px;
 position: relative;
}
/*.set-detail-number a{
 color: #333333;
}*/
/*.section-body .set-text-button .set-text-button a{
 color: #1c94f7;
}*/
.reservation-status,.order-number,.total-order,.order-status,.payment-status,.pay-immediately,.pay-immediately-count{
 display: -moz-box;
 -moz-box-orient: horizontal;
 display: -webkit-box;
 -webkit-box-orient: horizontal;
}
.order-number,.total-order,.order-status,.payment-status{
 margin-top: 10px;
}
.pay-immediately{
 position: absolute;
 bottom: 0px;
 width: 100%;
 /* margin-top: 16px; */
}
.space-underline {
 border-bottom: 1px solid #999999;
 -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch;
 /*margin-top: 12px;*/
 -webkit-transform:scaleY(0.2);
 -moz-transform:scaleY(0.2);
 -o-transform:scaleY(0.2);
 }
.reservation-status div:nth-of-type(2){
 position: absolute;
 right: 0px;
 margin-right: 90px;
 color: #999999;
}
.reservation-status div:nth-of-type(3){
 position: absolute;
 right: 0px;
 margin-right: 26px;
 color: #999999;
}
.order-number div:nth-of-type(2),.total-order div:nth-of-type(2),.order-status div:nth-of-type(2),.payment-status div:nth-of-type(2) {
 position: absolute;
 left: 0px;
 margin-left: 130px;
}

.reservation-status,.order-number ,.total-order ,.order-status,.payment-status{
 /*position: absolute;
 left: 0px;
 margin-left: 130px;*/
 padding-left: 12px;
}
.payment-status div:nth-of-type(3) {
 position: absolute;
 left: 0px;
 margin-left: 200px;
 color: #1c94f7;
}
.cancel-order{
 width: 100%;
}
.pay-immediately div:nth-of-type(1){
 width: 70%;
 background: #1c94f7;
 height: 40px;
 line-height: 40px;
 text-align: center;
 border-radius: 0px 0px 0px 10px;
 color: #ffffff;
 paddingleft: 20p;
 padding-left: 20px;
 white-space: nowrap;
}
.pay-immediately div:nth-of-type(2){
 width: 30%;
 height: 40px;
 background: #097bd9;
 boder-radus: 5px;
 /* border-radius: 5px; */
 line-height: 40px;
 text-align: center;
 border-radius: 0px 0px 10px 0px;
 color: #ffffff;
}
.wide-space_line {
 height: 30px;
 width: 100%;
 background: #eeeeee;
 text-align: center;
}
.wide-space_line div:nth-of-type(1) {
 margin-top: 7px;
 position: absolute;
 left: 0px;
 margin-left: 16px;
 font-size: 15px;
 color: #999999;
}
.total-order div:nth-of-type(2){
 color:#ff5e38;
 font-size: 16px;
 font-weight: bold;
}
.order-status div:nth-of-type(2){
 color: #1c94f7;
}
.check-in-time,.room-type,.booking-person,.special-requirements{
 display: -moz-box;
 -moz-box-orient: horizontal;
 display: -webkit-box;
 -webkit-box-orient: horizontal;
 margin-left: 16px;
}
.check-in-time div:nth-of-type(1),.room-type div:nth-of-type(1),.booking-person div:nth-of-type(1),.special-requirements div:nth-of-type(1){
 color: #999999;
}
.check-in-time div:nth-of-type(2),.room-type div:nth-of-type(2),.booking-person div:nth-of-type(2),.special-requirements div:nth-of-type(2){
 color: #333;
 position: absolute;
 left: 0px;
 margin-left: 98px;
}
/*.check-in-time div:nth-of-type(3),.room-type div:nth-of-type(3),.booking-person div:nth-of-type(3){
 color: #333;
 position: absolute;
 left: 0px;
 margin-left: 60px;
}*/
.check-in-time div:nth-of-type(3){
 color: #333;
 position: absolute;
 left: 0px;
 margin-left: 222px;
}
.room-type div:nth-of-type(3){
 color: #333;
 position: absolute;
 left: 0px;
 margin-left: 152px;
}
.booking-person div:nth-of-type(3){
 color: #333;
 position: absolute;
 left: 0px;
 margin-left: 152px;
}
.check-information{
 background: #ffffff;
 height: 128px;
}
.check-in-time{
 padding-top: 10px;
 margin-top: 10px;
}
.room-type,.booking-person,.special-requirements{
 padding-top: 10px;
}

/*中间列表样式**************************************************************************/
.section-body .set-detail,.section-body .set-detail-number,.section-body .set-detail-address{
 display: -moz-box;
 -moz-box-orient: horizontal;

 display: -webkit-box;
 -webkit-box-orient: horizontal;

 margin-left: 10px;
}
.set-detail,.set-detail-number{
 padding-top: 13px;
 padding-bottom: 13px;
 text-align: center;
 /* border-bottom: 1px solid #999999;
 -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch;*/
}
.set-detail-address{
 padding-top: 10px;
 padding-bottom: 10px;
 text-align: center;
}
@font-face{
 font-family:"font-name-icon";
 src:url("../../fonts/icomoon.ttf") format("truetype"),
 url("../../fonts/icomoon.eot?#iefix") format("embedded-opentype"),
 url("../../fonts/icomoon.woff") format("woff"),
 url("../../fonts/icomoon.svg") format("svg");
 font-weight:normal;
 font-style:normal;
}
.font-name-icon{
 font-family: "font-name-icon";
 font-weight: normal;
 font-style: normal;
 font-size: 15px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

}
.first-icon{
 color: #999999;
}
.second-icon{
 margin-left: 5px;
}
.set-text-button{
 position: absolute;
 right: 0px;
 margin-right: 24px;
 font-size: 14px;
 color: #1c94f7;
}
.greater-number {
 position: absolute;
 right: 0;
 margin-right: 10px;
 margin-top: 4px;
 display: inline-block;
 width: 8px;
 height: 8px;
 border-top: 1px solid #999;
 border-right: 1px solid #999;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
}
.greater-number-bottom{
 position: absolute;
 right: 0;
 margin-right: 10px;
 margin-top: 7px;
 display: inline-block;
 width: 4px;
 height: 8px;
 border-top: 1px solid #999;
 border-right: 1px solid #999;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
}
.set-detail,.set-detail-number{
 padding-top: 13px;
 padding-bottom: 13px;
 text-align: center;
 /* border-bottom: 1px solid #999999;
 -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch;*/
}
.set-text-detail{
 margin-left: 10px;
 font-size: 13px;
}
.set-text-detail2 .aa{
 margin-left: 15px;
 font-size: 13px;
 color: #333333;
}
.set-detail-address{
 padding-top: 10px;
 padding-bottom: 10px;
 text-align: center;
}
.set-text-shut{
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 width: 221px;
}
.set-text-button{
 position: absolute;
 right: 0px;
 margin-right: 24px;
 font-size: 14px;
 color: #1c94f7;
}
.set-text-button .bb{
 color: #1c94f7;
}
.space_line{
 height: 10px;
 width: 100%;
 background: #eeeeee;
}
.section-body{
 background: #ffffff;
}
/*底部按钮样式**************************************************************************/
.footer{
 display: -moz-box;
 -moz-box-orient: horizontal;

 display: -webkit-box;
 -webkit-box-orient: horizontal;
}
.greater-number-bottom{
 position: absolute;
 right: 0;
 margin-right: 10px;
 margin-top: 6px;
 display: inline-block;
 width: 8px;
 height: 8px;
 border-top: 1px solid #999;
 border-right: 1px solid #999;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
}
.ellipse{
 width: 26px;
 height: 18px;
 display: block;
 border-radius: 8px;
 background: #1c94f7;
 color: #ffffff;
 position: absolute;
 right: 0px;
 margin-right: 18px;
 margin-top: -17px;
 padding-right: 6px;
 font-size: 10px;
 text-align: center;
 line-height: 18px;
}
.footer{
 display: -moz-box;
 -moz-box-orient: horizontal;
 display: -webkit-box;
 -webkit-box-orient: horizontal;
 position: relative;
 bottom: 0px;
 width: 100%;
 height: 40px;
 /* background: #fff; */
 margin-top: 50px;
 /* padding-top: 50px; */
}
.footer div:nth-of-type(1){
 padding-top: 11px;
 width: 50%;
 border-right: 1px solid #eeeeee;
 background-color: white;
 text-align: center;
}
.footer div:nth-of-type(2){
 padding-top: 12px;
 width: 50%;
 padding-left: 28px;
 background-color: white;
}
.footer span{
 padding-left: 5px;
}

.pay-immediately div:nth-of-type(3){
 display: none;
}
/*倒计时样式**************************************************************************/

.time-item {
 background: #C71C60;
 color: #fff;
 line-height: 40px;
 font-size: 14px;
 font-family: Arial;
 padding: 0 10px;
 border-radius: 5px;

}
#day_show {
 float:left;
 line-height:40px;
 color:#ffffff;
 font-size:14px;
 margin:0 10px;
 font-family:Arial,Helvetica,sans-serif;
}
.item-title .unit {
 background:none;
 line-height:40px;
 font-size:14px;
 padding:0 10px;
 float:left;
}
.pay-immediately-count-num{
 display: -moz-box;
 -moz-box-orient: horizontal;

 display: -webkit-box;
 -webkit-box-orient: horizontal;
}
.del-order{
 display: none;
 text-align: center;
 background: #999999;
 height: 40px;
 border-radius: 0px 0px 10px 10px;
 position: absolute;
 bottom: 0px;
 width: 100%;
 color: #fff;
 line-height: 40px;
}
//取消按钮弹出的对话框
.arrow_mask {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 z-index: 1;
 background: #333333;
 opacity: 0.55;
 display: none;
}
.cancel-order-dialog{
 display: none;
 width: 260px;
 height: 206px;
 background: #fff;
 border-radius: 6px;
 position: absolute;
 top: 0px;
 margin-top: 200px;
 left: 50%;
 margin-left: -130px;
 z-index: 1;
 padding-top: 33px;
}
.cancel-dialog div:nth-of-type(1){
 text-align: center;
 /* border-right: 1px solid #999;
 padding: 10px;
 border-top: 1px solid #999;*/
}
.cancel-dialog-btn{
 display: -moz-box;
 -moz-box-orient: horizontal;
 display: -webkit-box;
 -webkit-box-orient: horizontal;
 /* margin-top: -8px;*/
 }
.cancel-dialog-btn div:nth-of-type(1){
 width: 130px;
 border-right: 1px solid #999;
 padding: 10px;
 border-top: 1px solid #999;
}

.cancel-dialog-btn div:nth-of-type(2){
 width: 130px;
 text-align: center;
 padding: 10px;
 border-top: 1px solid #999;
}

.space-underline2 {
 margin-top: 116px;
}
.space-underline3 {
 width: 100%;
 height: 10px;
 -webkit-border-image: url(../../images/hotel/border.gif) 1 stretch;
 -webkit-transform: scaleX(0.2);
 -moz-transform: scaleX(0.2);
}

reset.css

@charset "utf-8";
*{margin:0;padding:0;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}

html {
 min-height: 100%;
 font-size: 100%;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
}

body {
 width: 100%;
 min-height: 100%;
 font-family:"Microsoft YaHei","微软雅黑","MicrosoftJhengHei","华文细黑","Helvetica", "Arial", "sans-serif";
 font-size: 14px;
 position: relative;
 word-break:break-all;
}

a {
 text-decoration: none;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);
 -webkit-box-sizing:border-box;
}

img {
 -ms-interpolation-mode: bicubic;
 vertical-align: middle;
}

img:not([src*="/"]) {
 display: none;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

textarea {
 resize: none;
}

input, button, select, textarea {
 -webkit-appearance:none;
 outline: none;
 border-radius: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none !important;
 margin: 0;
}
ul,ol,li {
 list-style: none;
 -webkit-margin-before: 0;
 -webkit-margin-after: 0;
 -webkit-margin-start: 0;
 -webkit-margin-end: 0;
 -webkit-padding-start: 0;
}
.section-body .text {
 margin-top: 24px;
 margin-left: 40px;
 margin-right: 35px;
 width: 84%;
 font-family: "宋体";
 font-size: 18px;
}
.section-body .textImg{
 margin-top: 45px;
 color: blue;
 text-align: center;
 vertical-align: middle;
}

更多关于倒计时的文章请查看专题：《倒计时功能》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js制作支付倒计时页面

- Author -

马优晨

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
AngularJS执行流程详解
Feb 17 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
JS表单提交验证、input（type=number） 去三角 刷新验证码
Jun 21 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
浅谈javascript中的三种弹窗
Oct 21 #Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 #Javascript
AngularJS 与百度地图的结合实例
Oct 20 #Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 #Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 #Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 #Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 #Javascript
cmd(1) 相对路径 (1) 面向对象(3) Mint UI(1) 慢日志(1) REST(1) mt-swipe(1) 相对路径(1) exists(2) 远程桌面(2)
You might like
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
js取得url地址参数实例
2013/02/22 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
星球大战与Python之间的那些事
2016/01/07 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
详解爬虫被封的问题
2019/04/23 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Vision Direct比利时：在线订购隐形眼镜
2019/08/27 全球购物
测试工程师职业规划书
2014/02/06 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
督导岗位职责范本
2015/04/10 职场文书
小学毕业感言200字
2015/07/30 职场文书
大学生党课感想
2015/08/11 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
golang语言指针操作
2022/04/14 Golang
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers