生活随笔
收集整理的這篇文章主要介紹了
京东秒杀活动模拟
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
京東秒殺活動模擬
效果展示：
代碼實現：
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><meta http
-equiv
="X-UA-Compatible" content
="IE=edge"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><title
>Document
</title
><style
>* {font
-size
: 20px
;color
: white
;}.container
{margin
-top
: 100px
;margin
-left
: 100px
;width
: 150px
;height
: 200px
;background
-color
: rgb(202, 10, 10);display
: flex
;border
-radius
: 10px
;flex
-direction
: column
;}.header
{text
-align
: center
;height
: 20px
;padding
-top
: 50px
;}p
{margin
-top
: 50px
;text
-align
: center
;}span
{display
: inline
-block
;width
: 42px
;height
: 42px
;background
-color
: black
;text
-align
: center
;line
-height
: 42px
;border
-radius
: 10px
;}</style
>
</head
><body
><div
class="container"><div
class="header">京東秒殺
</div
><p
><span
class="hours">00</span
><span
class="minutes">00</span
><span
class="second">00</span
></p
></div
><script
>function fn(params
) {var span
= document
.querySelectorAll('span');var data1
= new Date().getTime();var data2
= new Date("2022-3-18 12:32:30").getTime();var data
= data1
- data2
;var h
= parseInt(data
/ 1000 / 3600 % 24);h
= h
<10 ? '0'+h
:h
; var m
= parseInt(data
/ 1000 / 60 % 60);m
= m
<10 ? '0'+m
:m
; var s
= parseInt(data
/ 1000 % 60);s
= s
<10 ? '0'+s
:s
; span
[0].innerHTML
= h
;span
[1].innerHTML
= m
;span
[2].innerHTML
= s
;}setInterval(fn
,1000);</script
></body
></html
>
注意事項：
1，關于：怎么樣將一個過去的時間轉化為一個時間戳：
注意Date(這里的書寫格式要相同)
2，關于：怎么樣將一個段時間間隔轉化為小時分鐘和秒數
3，關于：怎么樣將時間顯示到瀏覽器并且要間隔一秒更新一下倒計時。
setInterval(fn,1000);//間隔一秒更新
函數fn間隔一秒執行，并且保持重復執行，和 setTimeout() 區別。
4，關于布局
可以使用彈性布局來實現。
總結
以上是生活随笔為你收集整理的京东秒杀活动模拟的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
