Develop Reference

Wrap function into loop

I have script that updates time for one tag if I use querySelector and updateTime(inputTime.value); but how do I create loop so it works for all elements using querySelectorAll.
I've tried for, foreach, but I just can't understand what's my mistake. I'm using moment js, timezone detection.
JS
if (!sessionStorage.getItem('timezone')) {
var tz = jstz.determine() || 'UTC';
sessionStorage.setItem('timezone', tz.name());
}
var currTz = sessionStorage.getItem('timezone');
var inputTime = document.querySelectorAll(".input-time");
var output = document.querySelectorAll(".local");
function updateTime(theTime) {
var date = moment().format("YYYY-MM-DD");
var stamp = date + "T" + theTime + "Z";
var momentTime = moment(stamp);
var tzTime = momentTime.tz(currTz);
var formattedTime = tzTime.format('h:mm A');
output.textContent = "Time in " + currTz + ": " + formattedTime;
}
var i;
for (i = 0; i < inputTime.length; ++i) {
updateTime(inputTime[i].value);
}
HTML
<label for="input-time">Time in UTC: </label>
<input value="12:30" type="time" class="input-time">
<p class="local">x</p>
<label for="input-time">Time in UTC: </label>
<input value="12:30" type="time" class="input-time">
<p class="local">x</p>

Problems with Datetime Periods In es-AR browser

i have a problem with datetime using javascript in es-AR browser.
It is a select that changes period every 15 days or so.
The problem is when I want to spend a date in a browser in Argentine Spanish, given that the format of:
M / d / yyyy to d / M / yyyy then it breaks my date.
I already tried an "If (es-AR)" but it is not the best solution for me. I would like to have a good answer about some feasible solution.
Here I leave the code thank you very much.
function InitializeDropdownlistOfFirstOption(dropdownName, step) {
$('#fromPeriodValidation').hide();
$('#toPeriodValidation').hide();
var dropdownList = $('#' + dropdownName);
var timeperiod = dropdownList.val();
var reg = new RegExp("\\.|-", "g");
var userLang = navigator.language || navigator.userLanguage;
if (String(userLang) == 'es-AR') {
alert(String(cultureInfo));
var formattimeperiod = timeperiod.replace(reg, "/");
if (formattimeperiod.split("/")[0] > 12) {
var tempDay = formattimeperiod.split("/")[0];
var tempMonth = formattimeperiod.split("/")[1];
var tempYear = formattimeperiod.split("/")[2];
formattimeperiod = tempMonth + "/" + tempDay + "/" + tempYear;
}
timeperiod = formattimeperiod;
}
var timeperioddate = new Date(timeperiod);
var month = timeperioddate.getMonth();
var day = timeperioddate.getDate();
var year = timeperioddate.getFullYear();
var option;
dropdownList.get(0).remove(0);
if (day <= 15) {
switch (step) {
case 1:
day = new Date(new Date(year, (month + 1) % 12, 1).getTime() - 1000 * 60 * 60 * 24).getDate();
option = new Date(year, month, day).format(pattern);
dropdownList.prepend("<option value='" + option + "'>" + option + "</option>");
break;
case -1:
month--;
if (month < 1) {
month += 12;
year--;
}
if (month == 12) {
day = 31;
} else {
day = new Date(new Date(year, (month + 1) % 12, 1).getTime() - 1000 * 60 * 60 * 24).getDate();
}
option = new Date(year, month, day).format(pattern);
dropdownList.prepend("<option value='" + option + "'>" + option + "</option>");
break;
}
} else {
switch (step) {
case 1:
month++;
if (month > 12) {
month = 1;
year++;
}
if (month == 12) {
day = 31;
} else {
day = new Date(new Date(year, (month) % 12, 1).getTime() - 1000 * 60 * 60 * 24).getDate();
}
option = new Date(year, month, 15).format(pattern);
dropdownList.prepend("<option value='" + option + "'>" + option + "</option>");
break;
case -1:
option = new Date(year, month, 15).format(pattern);
dropdownList.prepend("<option value='" + option + "'>" + option + "</option>");
break;
}
}
dropdownList.get(0).selectedIndex = 0;
}
<div class="timeperiod" id="timeperiod">
<div style="width: 40%;float: left">
<label class="lblTime"><b>From Time Period</b></label>
<form class="form">
<button type="button" class="btn btn-primary button" onclick="InitializeDropdownlistOfFirstOption('drpfromdatePeriod', -1)">< </button>
<select name="drpfromdatePeriod" class="drpdateperiod" id="drpfromdatePeriod" onchange="SelectPeriod('drpfromdatePeriod')"></select>
<button type="button" class="btn btn-primary button" onclick="InitializeDropdownlistOfFirstOption('drpfromdatePeriod', 1)">> </button>
<img src="#Url.ImportContent("~/Content/images/time_period_calendar.png")" class="imgCalendar" id="imgFromdate" />
</form>
<label class="lblTime"><b>To Time Period</b></label>
<form class="form">
<button type="button" class="btn btn-primary button" onclick="InitializeDropdownlistOfFirstOption('drptodatePeriod', -1)">< </button>
<select name="drptodatePeriod" class="drpdateperiod" id="drptodatePeriod" onchange="SelectPeriod('drptodatePeriod')"></select>
<button type="button" class="btn btn-primary button" onclick="InitializeDropdownlistOfFirstOption('drptodatePeriod', 1)">> </button>
<img src="#Url.ImportContent("~/Content/images/time_period_calendar.png")" class="imgCalendar" id="imgTodate" />
</form>
</div>
<div>
<input type="checkbox" id="cbVat" value="Only return expense receipts with VAT" onclick="SelectVat(this.checked)"/>
<label class="lblTime" id="lbVatMessage"> <b>Only return expense receipts with VAT</b></label>
<img src="#Url.ImportContent("~/Content/images/info.gif")" class="imgInfo" title="If this checkbox is selected, the application will only return receipts for expenses with VAT." />
</div>
</div>
I appreciate any help :D
enter image description hereenter image description here

Trying to globally solve the time format problem by yourself would not be the best approach.
Libraries such as MomentJs implement methods such as moment.parseZone(), which appears to solve these problems for you.

How can I auto-generate years in a calendar?

So, I'm doing a project which includes having a calendar on it.
So I downloaded a template and I customized it.
The problem is, the calendar only has the year "2017" implemented.
My question is, can I auto-generate the following years?
And if I can, how?
Downhere I'm showing you my code (html and Js)
index.html:
<script>
// fill the month table with column headings
function day_title(day_name) {
document.write("<div class='c-cal__col'>" + day_name + "</div>");
}
// fills the month table with numbers
function fill_table(month, month_length, indexMonth) {
day = 1;
// begin the new month table
document.write("<div class='c-main c-main-" + indexMonth + "'>");
//document.write("<b>"+month+" "+year+"</b>")
// column headings
document.write("<div class='c-cal__row'>");
day_title("Dom");
day_title("Seg");
day_title("Ter");
day_title("Qua");
day_title("Qui");
day_title("Sex");
day_title("Sab");
document.write("</div>");
// pad cells before first day of month
document.write("<div class='c-cal__row'>");
for (var i = 1; i < start_day; i++) {
if (start_day > 7) {
} else {
document.write("<div class='c-cal__cel'></div>");
}
}
// fill the first week of days
for (var i = start_day; i < 8; i++) {
document.write(
"<div data-day='2019-" +
indexMonth +
"-0" +
day +
"'class='c-cal__cel'><p>" +
day +
"</p></div>"
);
day++;
}
document.write("</div>");
// fill the remaining weeks
while (day <= month_length) {
document.write("<div class='c-cal__row'>");
for (var i = 1; i <= 7 && day <= month_length; i++) {
if (day >= 1 && day <= 9) {
document.write(
"<div data-day='2019-" +
indexMonth +
"-0" +
day +
"'class='c-cal__cel'><p>" +
day +
"</p></div>"
);
day++;
} else {
document.write(
"<div data-day='2017-" +
indexMonth +
"-" +
day +
"' class='c-cal__cel'><p>" +
day +
"</p></div>"
);
day++;
}
}
document.write("</div>");
// the first day of the next month
start_day = i;
}
document.write("</div>");
}
</script>
<br>
<header>
<div class="wrapper">
<div class="c-monthyear">
<div class="c-month">
<span id="prev" class="prev fa fa-angle-left" aria-hidden="true"></span>
<div id="c-paginator">
<span class="c-paginator__month">JANEIRO</span>
<span class="c-paginator__month">FEVEREIRO</span>
<span class="c-paginator__month">MARÇO</span>
<span class="c-paginator__month">ABRIL</span>
<span class="c-paginator__month">MAIO</span>
<span class="c-paginator__month">JUNHO</span>
<span class="c-paginator__month">JULHO</span>
<span class="c-paginator__month">AGOSTO</span>
<span class="c-paginator__month">SETEMBRO</span>
<span class="c-paginator__month">OUTUBRO</span>
<span class="c-paginator__month">NOVEMBRO</span>
<span class="c-paginator__month">DEZEMBRO</span>
</div>
<span id="next" class="next fa fa-angle-right" aria-hidden="true"></span>
</div>
<span class="c-paginator__year">2019</span>
</div>
</div>
</header>
<div class="c-calendar">
<div class="c-calendar__style c-aside">
<a class=" o-btn " >Anular Senha </a>
<div class="c-aside__day">
<span class="c-aside__num"></span> <span class="c-aside__month"></span>
</div>
</div>
<div class="c-cal__container c-calendar__style">
<script>
// CAHNGE the below variable to the CURRENT YEAR
year = 2017;
// first day of the week of the new year
today = new Date("Janeiro 1, " + year);
start_day = today.getDay() + 1;
fill_table("Janeiro", 31, "01");
fill_table("Fevereiro", 28, "02");
fill_table("Março", 31, "03");
fill_table("Abril", 30, "04");
fill_table("Maio", 31, "05");
fill_table("Junho", 30, "06");
fill_table("Julho", 31, "07");
fill_table("Agosto", 31, "08");
fill_table("Setembro", 30, "09");
fill_table("Outubro", 31, "10");
fill_table("Novembro", 30, "11");
fill_table("Dezembro", 31, "12");
</script>
index.js:
//global variables
var monthEl = $(".c-main");
var dataCel = $(".c-cal__cel");
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1;
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var monthText = [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
];
var indexMonth = month;
var todayBtn = $(".c-today__btn");
var addBtn = $(".js-event__add");
var saveBtn = $(".js-event__save");
var closeBtn = $(".js-event__close");
var winCreator = $(".js-event__creator");
var inputDate = $(this).data();
today = year + "-" + month + "-" + day;

If you're looking for a quick solution you don't need to code yourself, you could use something like https://fullcalendar.io/.

You can manually create an Array of years based on the current year and the number of years you want in your template.
The following code should cover the basics for what you need, change variables depending on your requirements.
let currentYear = new Date().getUTCFullYear();
let startYear = 2016;
let endYearIncrement = 3;
let years = [];
for (let i = 0; i <= currentYear - startYear + endYearIncrement; i++) years.push(startYear + i);
The example should generate an array with the following values.
[2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023]
You could also generate the same array using Javascript's Array built-in function Array.from().
let years = Array.from( {length: currentYear - startYear + endYearIncrement + 1}, (v, i) => i + startYear )
Again, you can update the code so that you cover the years that you need.

Calculate Percentage in HTML Table - jQuery

I am just trying to get the percentage in html table in second row
Database Consensus.
So just tried that jQuery
var TableData = new Array();
jQuery('#myTable tr').each(function(row, tr){
TableData[row]={
"1st" : jQuery.trim(jQuery(tr).find('td:eq(2)').text())
, "2nd" :jQuery.trim(jQuery(tr).find('td:eq(3)').text())
, "3rd" : jQuery.trim(jQuery(tr).find('td:eq(4)').text())
, "4th" : jQuery.trim(jQuery(tr).find('td:eq(5)').text())
}
});
TableData.shift();
TableData.sort();
var First = [];
var Second = [];
var Third = [];
var Fourth = [];
for (var i = 0; i < TableData.length - 1; i++) {
if (TableData[i + 1]['1st'] == TableData[i]['1st']) {
First.push(TableData[i]['1st']);
}
if (TableData[i + 1]['2nd'] == TableData[i]['2nd']) {
Second.push(TableData[i]['2nd']);
}
if (TableData[i + 1]['3rd'] == TableData[i]['3rd']) {
Third.push(TableData[i]['3rd']);
}
if (TableData[i + 1]['4th'] == TableData[i]['4th']) {
Fourth.push(TableData[i]['4th']);
}
}
var first = First.length;
var total = TableData.length;
var percent = first/total * 100;
jQuery('.1st').text(First[0] + "\n" + "(" + percent + "%"+")");
var second = Second.length;
var percent = second/total * 100;
jQuery('.2nd').text(Second[0] + "\n" + "(" + percent + "%"+")");
var third = Third.length;
var percent = third/total * 100;
jQuery('.3rd').text(Third[0] + "\n" + "(" + percent + "%"+")");
var fourth = Fourth.length;
var percent = fourth/total * 100;
jQuery('.4th').text(Fourth[0] + "\n" + "(" + percent + "%"+")");
But i am not getting right percentage :(
I am not have very good experience in jQuery but tried Here is demo
http://jsfiddle.net/bcHsy/33/

I am not much of a Fiddler, so I'm not sure that the link will even work, but I think that this might work:
Fiddle Link
I mostly changed the HTML in one section:
<tr>
<td align="center" valign="middle" bgcolor="#ffffff">
<p align="left">
<span style="color: #d89b5a;"><strong>Database Consensus</strong></span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;">-------</span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;" class="1st">L.Tunsil</span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;" class="2nd">C.Wentz</span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;" class="3rd">J.Ramsey</span>
</p>
</td>
<td>
<p align="center">
<span style="color: #d89b5a;" class="4th">M.Jack</span>
</p>
</td>
</tr>
and some of the JS:
var TableData = new Array();
var Picks = new Array();
jQuery('#myTable tr').each(function(row, tr){
if (row == 1) {
Picks[0] = jQuery.trim(jQuery(tr).find('td:eq(2)').text());
Picks[1] = jQuery.trim(jQuery(tr).find('td:eq(3)').text());
Picks[2] = jQuery.trim(jQuery(tr).find('td:eq(4)').text());
Picks[3] = jQuery.trim(jQuery(tr).find('td:eq(5)').text());
}
TableData[row]={
"1st" : jQuery.trim(jQuery(tr).find('td:eq(2)').text())
, "2nd" :jQuery.trim(jQuery(tr).find('td:eq(3)').text())
, "3rd" : jQuery.trim(jQuery(tr).find('td:eq(4)').text())
, "4th" : jQuery.trim(jQuery(tr).find('td:eq(5)').text())
}
});
TableData.shift();
TableData.shift();
TableData.sort();
var First = [];
var Second = [];
var Third = [];
var Fourth = [];
for (var i = 0; i < TableData.length; i++) {
if (TableData[i]['1st'] == Picks[0]) {
First.push(TableData[i]['1st']);
}
if (TableData[i]['2nd'] == Picks[1]) {
Second.push(TableData[i]['2nd']);
}
if (TableData[i]['3rd'] == Picks[2]) {
Third.push(TableData[i]['3rd']);
}
if (TableData[i]['4th'] == Picks[3]) {
Fourth.push(TableData[i]['4th']);
}
}
var first = First.length;
var total = TableData.length;
var percent = first/total * 100;
jQuery('.1st').text(First[0] + "\n" + "(" + percent + "%"+")");
var second = Second.length;
var percent = second/total * 100;
jQuery('.2nd').text(Second[0] + "\n" + "(" + percent + "%"+")");
var third = Third.length;
var percent = third/total * 100;
jQuery('.3rd').text(Third[0] + "\n" + "(" + percent + "%"+")");
var fourth = Fourth.length;
var percent = fourth/total * 100;
jQuery('.4th').text(Fourth[0] + "\n" + "(" + percent + "%"+")");

Why does my alarmclock script stop working?

It only works once. At second button click, nothing occurs.
If I change budilnik variable at i_budilnik or var budilnik, it doesn't work even once!
Where is the problem?
<div>
<form name="alert">
<input type="text" name="hour" />
<input type="text" name="min" />
<input type="button" value="ok" onclick="budilnik(this.form)">
</form><font color=#660000 size=20 face=Tahoma><span id="hours"></span>
</div>
<script type="text/javascript">
function budilnik(form) {
budilnik = 1;
min = form.min.value;
hour = form.hour.value;
}
obj_hours = document.getElementById("hours");
function wr_hours() {
time = new Date();
time_min = time.getMinutes();
time_hours = time.getHours();
time_wr = ((time_hours < 10) ? "0" : "") + time_hours;
time_wr += ":";
time_wr += ((time_min < 10) ? "0" : "") + time_min;
time_wr = time_wr;
obj_hours.innerHTML = time_wr;
if (i_budilnik == 1) {
if (min == time_min) {
if (hour == time_hours) {
alert('welldone');
budilnik = 0;
}
}
}
}
wr_hours();
setInterval("wr_hours();", 1000);
</script>

You call the function wr_hours(); only once... with the onclick budilnik is called, but that doesn't touch wr_hours again. The first time the code is run, because the page is loaded, but after that, with the onclick only the values of min and hour are set again.
edit: you shouldn't call your form "alert", since that's a reserved word in javascript, same for the variable min. also: the variables min and hour are defined in the function budilnik, but they're not known outside this scope. I also renamed the variable budilnik to a global variable justonce to make sure you can check it outside the scope of budilnik. I rewrote your code a bit:
<html>
<body>
<div>
<form name="frm">
<input type="text" name="hour" />
<input type="text" name="mins"/>
<input type="button" value="ok" onclick="justonce=1;">
</form>
<font color=#660000 size=20 face=Tahoma><span id="hours"></span></font>
</div>
</body>
</html>
<script type="text/javascript">
obj_hours=document.getElementById("hours");
justonce=0;
function wr_hours()
{
time=new Date();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
obj_hours.innerHTML=time_wr;
if (justonce==1 && frm.mins.value==time_min && frm.hour.value==time_hours) {
alert('welldone');
justonce=0;
}
}
setInterval("wr_hours();",1000);
</script>
Your function wr_hours could be a lot shorter by the way:
function wr_hours()
{
time=new Date();
obj_hours.innerHTML=("%02d",time.getHours())+":"+("%02d",time.getMinutes());
if (justonce==1
&& frm.mins.value==time.getMinutes()
&& frm.hour.value==time.getHours()) {
alert('welldone');
justonce=0;
}
}

How about this?
You can't hear the"alarm" in this code, so you have to download the sound you like, rewrite a part of the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<bgsound id="bgm" src="２２２.mid" loop="-1">
<TITLE>Yokai clock～The digital clock changes to the analogue one！？～</TITLE>
<SCRIPT type="text/javascript">
<!--
var flg =0;
function timeCheck(){
Now = new Date();
Hour = Now.getHours();
Min = Now.getMinutes();
Sec = Now.getSeconds();
if(Hour <= 9) {
Hour = "\u0020" + Hour;
　　}
　　　　if(Min <= 9) {
Min = "0" + Min;
　　}
if(Sec <= 9) {
Sec = "0" + Sec;
　　}
document.sampleForm.dspTime.value=Hour + ":" + Min + ":" + Sec;
if((flg == 1)&&(document.sampleForm.alarmH.value == Hour)&&(document.sampleForm.alarmM.value == Min)){
document.getElementById('bgCol').value="３３３.wav", selectBgm(document.getElementById('bgCol')),
document.getElementById('star_clock').style.visibility="hidden", document.getElementById('clock').style.visibility="visible";
flg=-1; //＊One figure other than 0 and 1
　　}
}
function changeFlg(){
if(flg == 0){
　　　　document.sampleForm.setAlarm.value=" alarmOFF ";
document.getElementById("bgCol").value="";
　　　　　　　　selectBgm(document.getElementById('bgCol'));
　　　　 flg =1;
}else{
document.sampleForm.setAlarm.value=" alarm ON ";
document.getElementById("bgms").reset();
selectBgm(document.getElementById('bgCol'));
document.getElementById('star_clock').style.visibility="visible";
document.getElementById('clock').style.visibility="hidden";
　　　　　　 flg =0;
}
}
setInterval(timeCheck,100);
window.onload = timeCheck;
//-->
</SCRIPT>
<script type="text/javascript">
<!--
function selectBgm(e){
var selectedIndex = e.selectedIndex;
document.getElementById("bgCol").style.background=e[selectedIndex].style.backgroundColor;
bgm.src= e[selectedIndex ].value;
document.getElementById("bgCol").value=e[selectedIndex].value;
}
//-->
</script>
</head>
<BODY color="gold" bgcolor="black">
<div id="clock" style="visibility:hidden">
<div id="Od" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Of" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Oh" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Om" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
<div id="Os" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
</div>
</div>
</div>
<script type="text/javascript">
(function(){
"use strict";
function $(sel)
{
return document.getElementById(sel);
}
function $$(sel)
{
if (typeof document.getElementsByClassName === 'undefined')
{
return document.getElementsByName(sel);
}
return document.getElementsByClassName(sel);
}
var dCol = '00ff00', //date colour.
sCol = 'ff0000', //seconds colour.
mCol = '008000', //minutes colour.
hCol = '008000', //hours colour.
fCol = '0000ff', //face color
ClockHeight = 40,
ClockWidth = 40,
ClockFromMouseY = 0,
ClockFromMouseX = 100,
d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
m = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
date = new Date(),
day = date.getDate(),
year = date.getYear() + 1900;
var TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
var D = TodaysDate.split('');
var H = '...';
H = H.split('');
var M = '....';
M = M.split('');
var S = '.....';
S = S.split('');
var Face = '1 2 3 4 5 6 7 8 9 10 11 12',
font = 'Helvetica, Arial, sans-serif',
size = 1,
speed = 0.6;
Face = Face.split(' ');
var n = Face.length;
var a = size * 10;
var ymouse = 0,
xmouse = 0,
scrll = 0,
props = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + fCol + '">',
props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';
var Split = 360 / n;
var Dsplit = 360 / D.length;
var HandHeight = ClockHeight / 4.5;
var HandWidth = ClockWidth / 4.5;
var HandY = -7,
HandX = -2.5,
step = 0.06,
currStep = 0,
y = [],
x = [],
Y = [],
X = [],
Dy = [],
Dx = [],
DY = [],
DX = [];
var i;
for (i = 0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
}
for (i = 0; i < D.length; i++)
{
Dy[i] = 0;
Dx[i] = 0;
DY[i] = 0;
DX[i] = 0;
}
var wrapper = $('clock');
var html = ''
// Date wrapper
html = '';
for (i = 0; i < D.length; i++)
{
html += '<div class="Date" name="Date" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] + '</span></div>';
}
$('Od').children[0].innerHTML = html;
// Face wrapper
html = '';
for (i = 0; i < n; i++)
{
html += '<div class="Face" name="Face" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props + Face[i] + '</span></div>';
}
$('Of').children[0].innerHTML = html;
// Hours wrapper
html = '';
for (i = 0; i < H.length; i++)
{
html += '<div class="Hours" name="Hours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hCol + ';text-align:center;font-weight:bold">' + H[i] + '</div>';
}
$('Oh').children[0].innerHTML = html;
// Minute wrapper
html = '';
for (i = 0; i < M.length; i++)
{
html += '<div class="Minutes" name="Minutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + mCol + ';text-align:center;font-weight:bold">' + M[i] + '</div>';
}
$('Om').children[0].innerHTML = html;
// Seconds wrapper
html = '';
for (i = 0; i < S.length; i++)
{
html += '<div class="Seconds" name="Seconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + sCol + ';text-align:center;font-weight:bold">' + S[i] + '</div>';
}
$('Os').children[0].innerHTML = html;
// Mouse move event handler
function Mouse(evnt)
{
if (typeof evnt === 'undefined')
{
ymouse = event.Y + ClockFromMouseY;
xmouse = event.X + ClockFromMouseX;
}
else
{
ymouse = evnt.clientY + ClockFromMouseY;
xmouse = evnt.clientX + ClockFromMouseX;
}
}
document.onmousemove = Mouse;
function ClockAndAssign()
{
var time = new Date();
var secs = time.getSeconds();
var sec = -1.57 + Math.PI * secs / 30;
var mins = time.getMinutes();
var min = -1.57 + Math.PI * mins / 30;
var hr = time.getHours();
var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes(), 10) / 360;
$('Od').style.top = window.document.body.scrollTop;
$('Of').style.top = window.document.body.scrollTop;
$('Oh').style.top = window.document.body.scrollTop;
$('Om').style.top = window.document.body.scrollTop;
$('Os').style.top = window.document.body.scrollTop;
for (i = 0; i < n; i++)
{
var F = $$('Face')[i];
F.style.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
F.style.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
}
for (i = 0; i < H.length; i++)
{
var HL = $$('Hours')[i];
HL.style.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
HL.style.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
}
for (i = 0; i < M.length; i++)
{
var ML = $$('Minutes')[i].style;
ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
}
for (i = 0; i < S.length; i++)
{
var SL = $$('Seconds')[i].style;
SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
}
for (i = 0; i < D.length; i++)
{
var DL = $$('Date')[i].style;
DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
}
currStep -= step;
}
function Delay()
{
scrll = 0;
Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
for (i = 1; i < D.length; i++) {
Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
}
y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
for (i = 1; i < n; i++) {
y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
}
ClockAndAssign();
setTimeout(Delay, 20);
}
Delay();
}());
</script>
<form id="bgms" style="text-align:right">
<SELECT id="bgCol" style="background:#87cefa"; onchange="selectBgm(this);">
<OPTION style="background:silver" value="" >STOP</OPTION>
<OPTION style="background:#87cefa" value="２２２.mid" selected>CLASSIC</OPTION>
<OPTION style="background:yellowgreen" value="３３３.wav">ALARM</OPTION>
</SELECT>
</form>
<FORM NAME="sampleForm" style="text-align:center">
　<font id="star_clock">
<INPUT id="Alarmy" type="text"STYLE="color:deeppink; background-color:black; font-size:25px; border:none;" size=7 NAME="dspTime">
　</font>
<br><br>
<br><br>
　<div>
★
<INPUT type="text" name="alarmH" size=2 value="00">
<INPUT type="text" name="alarmM" size=2 value="00">
<INPUT type="button" id="setAlarm" name="setAlarm" value=" alarm ON " onClick="changeFlg();">
★
　</div>
</FORM>
</BODY>
</HTML>