<!DOCTYPE html>
|
<html lang="zh-cn">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<title>Flip Card Clock</title>
|
|
<link rel="stylesheet" href="style.css">
|
<style>
|
|
</style>
|
</head>
|
<body>
|
|
<div class="clock">
|
<div class="flip">
|
<div class="digital front" data-number="0"></div>
|
<div class="digital back" data-number="1"></div>
|
</div>
|
<div class="flip">
|
<div class="digital front" data-number="0"></div>
|
<div class="digital back" data-number="1"></div>
|
</div>
|
<em class="divider">:</em>
|
<div class="flip">
|
<div class="digital front" data-number="0"></div>
|
<div class="digital back" data-number="1"></div>
|
</div>
|
<div class="flip">
|
<div class="digital front" data-number="0"></div>
|
<div class="digital back" data-number="1"></div>
|
</div>
|
<em class="divider">:</em>
|
<div class="flip">
|
<div class="digital front" data-number="0"></div>
|
<div class="digital back" data-number="1"></div>
|
</div>
|
<div class="flip">
|
<div class="digital front" data-number="0"></div>
|
<div class="digital back" data-number="1"></div>
|
</div>
|
</div>
|
|
<script src="script.js"></script>
|
<script inline="javascript">
|
if(screen.width == 1280){
|
var clock = document.getElementsByClassName("clock");
|
for(var i=0;i<clock.length;i++){
|
clock[i].style.marginTop = "28px";
|
}
|
|
|
var divider = document.getElementsByClassName("divider");
|
for(var i=0;i<divider.length;i++){
|
divider[i].style.fontSize = "24px";
|
divider[i].style.lineHeight = "35px";
|
}
|
|
|
var flip = document.getElementsByClassName("flip");
|
for(var i=0;i<flip.length;i++){
|
flip[i].style.width = "24px";
|
flip[i].style.height = "35px";
|
flip[i].style.position = "relative";
|
flip[i].style.fontSize = "24px";
|
flip[i].style.lineHeight = "35px";
|
}
|
}
|
</script>
|
</body>
|
</html>
|
