生活随笔
收集整理的這篇文章主要介紹了
京东秒杀活动模拟
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
京東秒殺活動(dòng)模擬
效果展示：
代碼實(shí)現(xiàn)：
<!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
>
注意事項(xiàng)：
1，關(guān)于：怎么樣將一個(gè)過(guò)去的時(shí)間轉(zhuǎn)化為一個(gè)時(shí)間戳：
注意Date(這里的書(shū)寫(xiě)格式要相同)
2，關(guān)于：怎么樣將一個(gè)段時(shí)間間隔轉(zhuǎn)化為小時(shí)分鐘和秒數(shù)
3，關(guān)于：怎么樣將時(shí)間顯示到瀏覽器并且要間隔一秒更新一下倒計(jì)時(shí)。
setInterval(fn,1000);//間隔一秒更新
函數(shù)fn間隔一秒執(zhí)行，并且保持重復(fù)執(zhí)行，和 setTimeout() 區(qū)別。
4，關(guān)于布局
可以使用彈性布局來(lái)實(shí)現(xiàn)。
總結(jié)
以上是生活随笔為你收集整理的京东秒杀活动模拟的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
