html页面
<body id="body">
<div id="div">
<input type="text" id="txt1" value="" />
</div>
</body>
CSS样式
* {
margin: 0;
padding: 0;
}
#body {
background-color: #000000;
}
input {
border-radius: 20px;
text-align: center;
width: 707px;
height: 196px;
font-size: 78px;
box-shadow: -5px 0 100px 0px #168CFA;
-webkit-box-reflect: below 4px linear-gradient(transparent, transparent 20%, #000);
}
#div {
width: 707px;
margin-left: auto;
margin-right: auto;
margin-top: 400px;
}
js代码
var myVar = setInterval(function() {
myTimer()
}, 1000);
function myTimer() {
var d = new Date();
var h = d.toLocaleTimeString();
var txt = document.getElementById("txt1");
txt.value = h;
}
展示效果