Show Your Home Screens

Jimbo1971 · Jan 17, 2015

Can someone help me with some HTML editing got this from someone else but clock too small

Here it is

<html>

<head>

<title>DW Clock</title>
<style type="text/css">

* {

margin: 0;

padding: 0;

}

body {

background-image: url('bg.png');
background-size: 100%;

}

.hidden {

display: none;

}

#clock-container {

margin: 180px 0 0 0;

}

div.clock {

margin: 80;

width: 150px;

background-image: url('uhr.png');

background-size: 100%;

}

#clock-minute {

margin: -150px 0 0 0;

}

#clock-second {

margin: -150px 0 0 0;

}

div#date {

font-family: Helvetica, sans-serif;

font-size: 14px;

font-weight: 800;

color: #c8c8c8;

text-align: center;

margin: -237px 0 0 0px;

}

p#time-placeholder {

margin: 2px 0 0 0;

}

img {

width: 150px;

height: 150px;

}

</style>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">

</head>

<body id="body">

<div id="clock-container">

<div class="clock">

<img src="hour.png" id="clock-hour" />

<img src="minute.png" id="clock-minute" />

<img src="second.png" id="clock-second" />

</div>

<div id="date" class="hidden">

<p id="date-placeholder"></p>

</div>

</div>

<script type="text/javascript">

String.prototype.format = function() {

var formatted = this;

for (var i = 0; i < arguments.length; i++) {

var regexp = new RegExp('\\{'+i+'\\}', 'gi');

formatted = formatted.replace(regexp, arguments);

}

return formatted;

};

function getHourAngle() {

var currentDate = new Date();

return Math.round((currentDate.getHours() * 30) + (currentDate.getMinutes() / 2) + (currentDate.getSeconds() / 120));

}

function getMinuteAngle() {

var currentDate = new Date();

return Math.round((currentDate.getMinutes() * 6) + (currentDate.getSeconds() / 10));

}

function getSecondAngle() {

var currentDate = new Date();

return Math.round((currentDate.getSeconds() * 6));

}

function updateClock() {

document.getElementById("clock-hour").setAttribute("style", "-webkit-transform: rotate(" + getHourAngle() + "deg);");

document.getElementById("clock-minute").setAttribute("style", "-webkit-transform: rotate(" + getMinuteAngle() + "deg);");

document.getElementById("clock-second").setAttribute("style", "-webkit-transform: rotate(" + getSecondAngle() + "deg);");

}

function calculateStatusbar() {

var Make_It_12_Hour = false;

var currentTime = new Date();

var day = currentTime.getDate();

var month = currentTime.getMonth() + 1;

var hours = currentTime.getHours();

var minutes = currentTime.getMinutes();

var outputTemplate = "";

if (Make_It_12_Hour) {

hours = hours % 12;

hours = hours ? hours : 12;

// 'murica mode. I really don't know who came up with this bullshit

outputTemplate = "";

} else {

outputTemplate = "";

}

if (day < 10) { day = "0" + day; }

if (month < 10) { month = "0" + month; }

if (hours < 10) { hours = "0" + hours; }

if (minutes < 10) { minutes = "0" + minutes; }

document.getElementById("date-placeholder").innerText = outputTemplate.format(day, month, hours, minutes);

}

function showDate() {

document.getElementById('date').setAttribute("class", "");

}

function hideDate() {

document.getElementById('date').setAttribute("class", "hidden");

}

calculateStatusbar();

updateClock();

setInterval(updateClock, 1000);

setInterval(calculateStatusbar, 1000);

document.getElementById('clock-container').addEventListener('touchstart', showDate, false);

document.getElementById('clock-container').addEventListener('touchend', hideDate, false);

</script>

</body>

</html>

Also would like date, day and month. Here is what i want it to look like. If you need more details just reply.

Bacchus · Jan 17, 2015

I don't do code, HTML or otherwise, but I copied your inquiry and sent it to a friend to see if he could help. He sent something which I'll post below. Please understand that I haven't a clue as to whether it's even applicable much less whether it'll help. But, hey, we tried.....

. Here it is:

Not sure if I'm understanding correctly, but if he wants to change the size of the clock, the coding below should affect the size of the clock.

But all he can do is play with the width and heighth numbers and any px numbers and see if it is what he wants.

I would suspect this would be the area to change.
Code: [Select]
div.clock {

margin: 80;

width: 150px;

background-image: url('uhr.png');

background-size: 100%;
But since all of the background-size are set at 100%, it might not increase it. To increase the clock size, he might have to set them to 125%.
Not sure.