| | |
|---|
| | | <!DOCTYPE html>
|
|---|
| | | <html lang="zh-CN">
|
|---|
| | | <html lang="zh-cn">
|
|---|
| | | <head>
|
|---|
| | | <meta charset="UTF-8">
|
|---|
| | | <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>
|
|---|
| | |
|
|---|
| | | <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> |
|---|
