商品搶購倒計時效果

原創 Return_KB 2020-06-24 23:20

現在比較流行商品搶購活動，爲了達到比較人性化的效果，通常有一個倒計時。

下面分享一個比較簡陋的商品搶購倒計時效果。

代碼實例如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品搶購倒計時效果</title>
<style>
#demo {
  text-align: center;
  color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
  var demo = document.getElementById("demo");
  var outTime = new Date("2016/12/12 12:00:00");
  setInterval(fun, 1000);
  
  function fun() {
    var newTime = new Date();
    var ms = parseInt((outTime.getTime() - newTime.getTime()) / 1000);
    var d = parseInt(ms / 3600 / 24); //
    var h = parseInt(ms / 3600 % 24);
    var m = parseInt(ms / 60 % 60);
    var s = parseInt(ms % 60);
    d < 10 ? "d" + 0 : d;
  
    h < 10 ? "h" + 0 : h;
    m < 10 ? "m" + 0 : m;
    s < 10 ? "s" + 0 : s;
  
    demo.innerHTML = "距離搶購時間還有" + d + "天" + h + "時" + m + "分" + s + "秒";
  }
}
</script>
</head>
<body>
  <div id="demo">
  </div>
</body>
</html>

















發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








前端js Aes對本地存儲數據進行加密解密






1、npm install crypto-js
2、編寫LocalStorage類
const CryptoJS = require('crypto-js');
class LocalStorage {
construct






IT~少年人

2020-07-08 00:02:52









JavaScript 獲取當前站點的域名和端口號






例：本地IP形式：  http://127.0.0.1:8083/admin          線上域名： https://www.csdn.net/
獲取域名（第一種方法）：location.host   =    127.0.0.1:






花化世界

2020-06-30 05:30:26









ajax異步下載文件並判斷狀態






今日需要對公司的代碼進行更新，發現之前有的文件丟失導致下載不到直接跳轉到一個空的頁面，第一反應是應該沒有用異步請求，直接用a標籤或者表單之類的處理下載文件請求了。
但是ajax似乎是不支持下載文件的，會把流信息當初文本類處理。。。自然不能






哔哔小子

2020-06-27 23:32:30









ajax請求實用的封裝方法






個人身爲一個java後端開發，對js的閉包簡單理解爲跨方法訪問變量值，放到java裏就是方法A能使用方法B中的變量。
今天寫代碼時看到公司之前同事寫的ajax到處都是，沒有任何封裝，需要優化一下。
 
項目中的ajax到處都是這類代碼：






哔哔小子

2020-06-27 23:32:30









Js實時監聽input輸入框值變化






<input oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" >
<script>
// 監聽input輸入框信






itfallrain

2020-06-26 15:58:21









VUE 常規截取和特殊字符之前之後截取






1：平常使用的
let str = 'abcdef';
// 0
str = str.slice(0);//返回整個字符串 abcdef
str = str.substring(0);//返回整個字符串 abcdef
st






itfallrain

2020-06-26 15:58:16









Vue怎麼判斷對象是否爲空






1: Vue怎麼判斷對象是否爲空
JSON.stringify(evtValue)=='{}'
Object.keys(xxxx).length==0
2:js判斷對象是否爲空對象的幾種方法
1.將json對象轉






itfallrain

2020-06-26 15:58:16









firefox下JS動態創建的form表單元素獲取不到值的問題






今天遇到個問題，在Firefox下用Javascript動態創建input元素，在服務器端獲取不到值。
我一點點的刪代碼，刪到最後才發現嵌套的問題。
<table>
<form>
<tr><td></td></tr>
......
<






超级马里奥2020

2020-06-26 15:44:19









JavaScript圓形鐘錶效果代碼實例






分享一段代碼實例，它實現了利用js實現了自動讀取本地時間的圓形鐘錶效果。
代碼實例如下:
0010020030040050060070080090100110120130140150160170180190200210220230






Return_KB

2020-06-24 23:20:33









js點擊當前鏈接背景變色其他鏈接恢復原來背景色






可能大家都見過這樣的效果，點擊一個鏈接背景會變色，當再點擊其他鏈接的時候，之前被點擊的鏈接背景顏色又會恢復。下面就通過代碼實例介紹一下如何實現此效果。
代碼如下:
[HTML] 純文本查看 複製代碼運行代碼010203040506






Return_KB

2020-06-24 23:20:33









springboot開發環境下搭建ftp+nginx圖片服務器以及其他文件的存儲






一、在搭建一個ftp服務器用於存儲文件
二、下載nginx，安裝完成後更改配置文件
server {
listen 80;
server_name localhost;
#






Return_KB

2020-06-24 23:20:10









前端jq實現中英文切換（i18n國際化方式，apicloud打包後也適用）






1.項目文件及目錄
2.準備js
github下載地址：https://github.com/T-baby/jquery.i18n/releases
3.頁面代碼
<!DOCTYPE html>
<html>
<hea






木易66丶

2020-06-23 21:55:52









Ecahrts餅圖參數詳解






https://blog.csdn.net/sleepwalker_1992/article/details/82532210






木易66丶

2020-06-23 14:11:52









js粒子特效——particles






鏈接：https://pan.baidu.com/s/1KqsZ5I8Qjz_J7ysQtw8tMw 
提取碼：qy38 
1.下載並引入particles.js
2.<div class="linebox"><div id="parti






木易66丶

2020-06-23 14:11:39









jq遍歷input(type='text')，並實時監聽文本框內容是否爲空及全選反選






一.如下圖，監聽四個文本框，輸入任意三項即可進行查詢，否則無法進行查詢操作
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text






木易66丶

2020-06-23 14:11:38