html
html
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
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body id="body">
<div>
<h1 id="time">Loading...</h1>
</div>
<h3 id="control" class="center" onclick="openControls()">Setting</h3>
<div id="controls">
<!--<b>Display time in(in seconds)</b> <input id="displayTimeIn" type="number" placeholder="..." value="1" />
<br /><br />-->
<b>Background color for body</b><br /><input id="bodyBg" type="text" placeholder="hex value(with '#') or name of the color" value="royalBlue" />
<br /><br />
<b>Background color for time</b><br /><input id="timeBg" type="text" placeholder="hex value(with '#') or name of the color" value="navy" />
<br /><br />
<b>Color for time</b><br /><input id="timeColor" type="text" placeholder="hex value(with '#') or name of the color" value="#ffffff"/>
<br /><br />
<b>Color for "Setting" button</b><br /><input id="settingColor" type="text" placeholder="hex value(with '#') or name of the color" value="#fff000"/>
<button class="apply center" onclick="applyChanges()">Apply</button>
</div>
</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
26
27
28
body {
background-color: royalBlue;
}
#time {
color: #fff;
background-color: navy;
text-align: center;
position: relative;
top: 8em;
/*border: 1px groove black;*/
width: 50%;
margin-left: 25%;
border-radius: 10px;
/*display: none;*/
}
.center {
text-align: center;
}
#control {
text-decoration: underline;
color: #fff000;
}
#controls {
display: none;
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
22
23
24
25
26
27
28
function getAndSetTime() {
var time = new Date();
var hours = time.getHours(); //getting the hours.
var minutes = time.getMinutes(); //getting the minutes.
var seconds = time.getSeconds(); //getting the seconds.
var day = time.getDay(); //getting the day(as numbers).
minutes = addZero(minutes); //calling the addZero function.
seconds = addZero(seconds); //calling the addZero function.
if (day == 1) {
day = "Monday";
}
else if (day == 2) {
day = "Tuesday";
}
else if (day == 3) {
day = "Wednesday";
}
else if (day== 4) {
day = "Thursday";
}
else if (day == 5) {
day = "Friday";
}
else if (day == 6) {
day = "Saturday"
}
else {
day = "Sunday";
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run