Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQueryの最新のライブラリーを取り込みます。
ここではjQuery 3.6.0のライブラリーを取り込んでいます。
さらにSCRIPTタグを追加して、次のようなJavaScript/jQueryのコードを入力します。
Article012.aspx:
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script type="text/javascript">
// String.format()
String.prototype.format = String.prototype.f = function () {
var s = this,
i = arguments.length;
while (i--) {
s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
}
return s;
};
// jQuery Document Ready Event...
$(function () {
// Analog Clock
$('#btnClock').click(function () {
AnalogClockDemo();
});
$('#selWidth').on('change', function () {
AnalogClockDemo();
});
$('#selforeColor').on('change', function () {
AnalogClockDemo();
});
$('#selbgColor').on('change', function () {
AnalogClockDemo();
});
$('#selBorder').on('change', function () {
AnalogClockDemo();
});
function AnalogClockDemo() {
var clock = $('div#clock');
$(clock).empty();
var opt = new AnalogClockOption();
opt.width = $('#selWidth option:selected').val();
opt.foreColor = $('#selforeColor option:selected').val();
opt.bgColor = $('#selbgColor option:selected').val();
var clock1 = new AnalogClock("clock", opt);
clock1.panel.style.border = $('#selBorder option:selected').val();
}
});
// AnalogClock() Compact Version
function AnalogClockOption(width, foreColor, bgColor) {
this.foreColor = foreColor ? foreColor : "#000";
this.bgColor = bgColor ? bgColor : "#eee";
this.width = width ? width : 400;
}
function AnalogClock(id, option) {
var padZero = function(num) {
if (num < 10) {
num = '0' + num;
}
else {
num = num.toString();
}
return num;
}
var dateTimeFormat = function (time) {
var str = "";
str += time.getYear() + (time.getYear() > 1900 ? 0 : 1900) + "-";
str += padZero(time.getMonth() + 1) + "-";
str += padZero(time.getDate()) + "<br/> ";
str += padZero(time.getHours()) + ":";
str += padZero(time.getMinutes()) + ":";
str += padZero(time.getSeconds());
return str;
}
if (!option) {
option = {};
}
this.foreColor = option.foreColor ? option.foreColor : "#000";
this.bgColor = option.bgColor ? option.bgColor : "#eee";
this.width = option.width ? option.width : 400;
this.container = $('#' + id)[0];
if (!this.container) {
return;
}
this.container.style.fontcolor = this.foreColor;
// the outer panel of the clock, including the background
var divPanel = '<div style = "border-radius: 50%; background-color: {0}; border: 1px solid #ccc; width: {1}px; height: {2}px; position: relative;" >'
.format(this.bgColor, this.width, this.width);
this.panel = $.parseHTML(divPanel)[0];
this.container.appendChild(this.panel);
// the digital clock on the panel
var h4Tag = '<h4 style="width: 100%; text-align: center; font-weight: normal; font-size: {0}px; margin-top: {1}px; color: {2};"></h4>'
.format(this.width / 15, this.width * 0.6, this.foreColor);
var label = $.parseHTML(h4Tag)[0];
label.innerHTML = dateTimeFormat(new Date());
if (this.width >= 100) {
this.panel.appendChild(label);
}
// the container of hour numbers on the panel
var ulTag = '<ul style="height: 100%; padding: 0px; margin: 0px; list-style: none; position: absolute; width: 40px; top: 0px; left: {0}px; color: {1};">'
.format(this.width / 2 - 20, this.foreColor);
var ul = $.parseHTML(ulTag)[0];
this.panel.appendChild(ul);
// the list of hour numbers on the panel
for (var i = 0; i <= 5; i++) {
if (!localStorage) {
break;
}
// create li element
var liTag = '<li style="padding: 0px; margin: 0px; position: absolute; text-align: center; width: 40px; height: {0}px; font-size: {1}px; transform: rotate({2}deg);">'
.format(this.width, this.width / 10, 360 / 12 * (i + 1));
var list = $.parseHTML(liTag)[0];
ul.appendChild(list);
// a pair of numbers, such as 1 and 7, 3 and 9, etc.
var divTop = '<div style="width: 100%; position: absolute; text-align: center; transform: rotate({0}deg);">{1}</div>'
.format(-360 / 12 * (i + 1), i + 1);
var numTop = $.parseHTML(divTop)[0];
if (this.width < 100) {
numTop.innerHTML = "●";
}
list.appendChild(numTop);
var divBottom = '<div style="width: 100%; position: absolute; text-align: center; bottom: 0px; transform: rotate({0}deg);">{1}</div>'
.format(-360 / 12 * (i + 1), i + 7);
var numBottom = $.parseHTML(divBottom)[0];
if (this.width < 100) {
numBottom.innerHTML = "●";
}
list.appendChild(numBottom);
}
// hour hand
var hourWidth = this.width * 0.02;
var hourTop = this.width * 0.25 - (hourWidth * 0.5);
var hourleft = this.width * 0.5 - hourWidth * 0.5;
var divHour = '<div style="width: {0}px; height: {1}px; position: absolute; border-width: {2}px 0px; border-style: solid; border-color: #f60 transparent transparent; border-image: initial; left: {3}px; top: {4}px;"></div>'
.format(hourWidth, hourWidth, this.width * 0.5 - hourTop, hourleft, hourTop);
var hour = $.parseHTML(divHour)[0];
if (localStorage) {
this.panel.appendChild(hour);
}
// minute hand
var minWidth = this.width * 0.01;
var minTop = this.width * 0.1 - (minWidth * 0.5);
var minleft = this.width * 0.5 - minWidth * 0.5;
var divMin = '<div style="width: {0}px; height: {1}px; position: absolute; border-width: {2}px 0px; border-style: solid; border-color: #09f transparent transparent; border-image: initial; left: {3}px; top: {4}px;"></div>'
.format(minWidth, minWidth, this.width * 0.5 - minTop, minleft, minTop);
var min = $.parseHTML(divMin)[0];
if (localStorage) {
this.panel.appendChild(min);
}
// second hand
var secWidth = 1;
var secTop = this.width * 0.05;
var divSec = '<div style="width: {0}px; height: {1}px; position: absolute; border-width: {2}px 0px; border-style: solid; border-color: {3} transparent transparent; border-image: initial; left: {4}px; top: {5}px;"></div>'
.format(secWidth, secWidth, this.width * 0.5 - secTop, this.foreColor, this.width * 0.5 - secWidth, secTop);
var sec = $.parseHTML(divSec)[0];
if (localStorage) {
this.panel.appendChild(sec);
}
// the center point
var pointWidth = this.width * 0.05;
var divPoint = '<div style="width: {0}px; height: {1}px; position: absolute; background-color: {2}; left: {3}px; top: {4}px; border-radius: 50%;"></div>'
.format(pointWidth, pointWidth, this.foreColor, this.width * 0.5 - (pointWidth * 0.5), this.width * 0.5 - (pointWidth * 0.5));
var point = $.parseHTML(divPoint)[0];
if (localStorage) {
this.panel.appendChild(point);
}
// start the clock (the animation part)
this.loop = setInterval(function () {
var now = new Date();
label.innerHTML = dateTimeFormat(now);
sec.style.transform = 'rotate({0}deg)'.format(1.0 * 360 / 60 * now.getSeconds());
min.style.transform = 'rotate({0}deg)'.format(1.0 * 360 / 60 * now.getMinutes());
hour.style.transform = 'rotate({0}deg)'.format(1.0 * 360 / 12 * (now.getHours() % 12) + 1.0 * 360 / 12 * (now.getMinutes() / 60));
}, 1000);
}
</script>