html
html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
</head>
<body>
<h1 id="clock"></h1>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
background-color: #111;
}
h1 {
color: teal;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
text-align: center;
font-size: 50px;
font-family: Orbitron, Helvetica;
border-radius: 25px;
padding: 40px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload=function(){
const DATE = () =>{
let d = new Date();
let h = d.getHours();
let m = d.getMinutes();
let s = d.getSeconds();
let set = "AM";
if(h>12){
set="PM";
}
h < 10 ? h = "0" + h : h;
s < 10 ? s = "0" + s : s;
m < 10 ? m = "0" + m : m;
document.getElementById("clock").innerText = h +":"+ m +":"+s+ " "+set;
}
DATE();
setInterval(DATE, 1000);
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run