API tools faq
paste
Guest User

Untitled

a guest
Apr 23rd, 2018
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. font-family: Helvetica, Arial, sans-serif;
  7. }
  8.  
  9. .Face {
  10. position: absolute;
  11. height: 10;
  12. widdth: 10;
  13. text-align: center;
  14. font-size: 1em;
  15. color: #0000ff;
  16. }
  17.  
  18. .Hours {
  19. position: absolute;
  20. width: 16px;
  21. height: 16px;
  22. font-family: Arial;
  23. font-size: 16px;
  24. color: #000000;
  25. text-align: center;
  26. font-weight: bold;
  27. }
  28.  
  29. .Minutes {
  30. position: absolute;
  31. width: 16px;
  32. height: 16px;
  33. font-family: Arial;
  34. font-size: 16px;
  35. color: #000000;
  36. text-align: center;
  37. font-weight: bold;
  38. }
  39.  
  40. .Seconds {
  41. position: absolute;
  42. width: 16px;
  43. height: 16px;
  44. font-family: Arial;
  45. font-size: 16px;
  46. color: #ff0000;
  47. text-align: center;
  48. font-weight: bold;
  49. }
  50.  
  51. .Date {
  52. position: absolute;
  53. height: 10;
  54. width: 10;
  55. font-size: 1em;
  56. color:;
  57. }
  58. </style>
  59. <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
  60. </head>
  61. <body>
  62. <div id="clock">
  63. <div id="Od" style="position:absolute;top:0px;left:0px">
  64. <div style="position:relative">
  65. </div>
  66. </div>
  67. <div id="Of" style="position:absolute;top:0px;left:0px">
  68. <div style="position:relative">
  69. </div>
  70. </div>
  71. <div id="Oh" style="position:absolute;top:0px;left:0px">
  72. <div style="position:relative">
  73. </div>
  74. </div>
  75. <div id="Om" style="position:absolute;top:0px;left:0px">
  76. <div style="position:relative">
  77. </div>
  78. </div>
  79. <div id="Os" style="position:absolute;top:0px;left:0px">
  80. <div style="position:relative">
  81. </div>
  82. </div>
  83. </div>
  84. <script type="text/javascript">
  85.  
  86. (function(){
  87. "use strict";
  88.  
  89. function $(sel) {
  90. return document.getElementById(sel);
  91. }
  92.  
  93. function $$(sel) {
  94. return document.getElementsByClassName(sel);
  95. }
  96.  
  97. function setPosition(element, y, x) {
  98. element.style.top = y + 'px';
  99. element.style.left = x + 'px';
  100. }
  101.  
  102. const CLOCK_HEIGHT = 40,
  103. CLOCK_WIDTH = 40,
  104. CLOCK_FROM_MOUSE_Y = 0,
  105. CLOCK_FROM_MOUSE_X = 100;
  106.  
  107. const H = '...'.split('');
  108. const M = '....'.split('');
  109. const S = '.....'.split('');
  110. const SPEED = 0.6,
  111. FACES = '1 2 3 4 5 6 7 8 9 10 11 12'.split(' ');
  112. const HAND_HEIGHT = CLOCK_HEIGHT / 4.5;
  113. const HAND_WIDTH = CLOCK_WIDTH / 4.5;
  114. const HAND_Y = -7,
  115. HAND_X = -2.5,
  116. STEP = 0.06;
  117.  
  118. var ymouse = 0,
  119. xmouse = 0;
  120. var currStep = 0;
  121. var lastBasePositions = [];
  122.  
  123. function initialize() {
  124. for (var i = 0; i < FACES.length; ++i) {
  125. lastBasePositions[i] = {x:0, y:0};
  126. }
  127.  
  128. var html = '';
  129. // Face wrapper
  130. html = '';
  131. for (var i = 0; i < FACES.length; ++i) {
  132. html += '<div class="Face">' + FACES[i] + '</div>';
  133. }
  134. $('Of').children[0].innerHTML = html;
  135.  
  136. // Hours wrapper
  137. html = '';
  138. for (var i = 0; i < H.length; ++i) {
  139. html += '<div class="Hours">' + H[i] + '</div>';
  140. }
  141. $('Oh').children[0].innerHTML = html;
  142.  
  143. // Minute wrapper
  144. html = '';
  145. for (var i = 0; i < M.length; ++i) {
  146. html += '<div class="Minutes">' + M[i] + '</div>';
  147. }
  148. $('Om').children[0].innerHTML = html;
  149.  
  150. // Seconds wrapper
  151. html = '';
  152. for (var i = 0; i < S.length; ++i) {
  153. html += '<div class="Seconds">' + S[i] + '</div>';
  154. }
  155. $('Os').children[0].innerHTML = html;
  156.  
  157. // Mouse move event handler
  158. document.onmousemove = function(evnt) {
  159. ymouse = evnt.clientY + CLOCK_FROM_MOUSE_Y;
  160. xmouse = evnt.clientX + CLOCK_FROM_MOUSE_X;
  161. };
  162.  
  163. requestAnimationFrame(ClockAndAssign);
  164. }
  165.  
  166. var lastYearPositions = [{x:0, y:0}];
  167. var lastYearString = ' ';
  168. var lastYearLocale = '';
  169. function updateYear(currentDate, scrll) {
  170. var yearString = lastYearString;
  171. if (currentDate.getMinutes() % 2 == 0) {
  172. if (lastYearLocale != 'ja'){
  173. yearString = currentDate.toLocaleDateString("ja-JP-u-ca-japanese", { era: "long", year: "numeric" }).
  174. replace(/u200e/g, "").replace(" ", "");
  175. lastYearLocale = 'ja';
  176. }
  177. } else {
  178. if (lastYearLocale != 'en'){
  179. yearString = currentDate.toLocaleDateString("en-US", { era: "long", year: "numeric" }).
  180. replace(/u200e/g, "") + "年";
  181. lastYearLocale = 'en';
  182. }
  183. }
  184.  
  185. var yearLength = lastYearPositions.length;
  186. if (yearString != lastYearString) {
  187. lastYearString = yearString;
  188. var yearCharacters = yearString.split('');
  189. yearLength = yearCharacters.length;
  190.  
  191. // Date wrapper
  192. var html = '';
  193. for (var i = 0; i < yearLength; ++i) {
  194. html += '<div class="Date">' + yearCharacters[i] + '</div>';
  195. }
  196. $('Od').children[0].innerHTML = html;
  197.  
  198.  
  199. if ( currentDate.getMinutes() % 2 == 0 ) {
  200.  
  201. var divChildren = $('Od').children[0].children;
  202. for (var i = 0; i < divChildren; ++i) {
  203. var divEl = divChildren[i];
  204.  
  205. if ((i >= 0) && (i < 2)) {
  206. divEl.children[0].style.color="red";
  207.  
  208. }
  209. }
  210. }
  211.  
  212. }
  213. var positions = [{}];
  214. var lastPosition = lastYearPositions[0];
  215. positions[0].y = lastPosition.y + ((ymouse) - lastPosition.y) * SPEED;
  216. positions[0].x = lastPosition.x + ((xmouse) - lastPosition.x) * SPEED;
  217. for (var i = 1; i < yearLength; ++i) {
  218. lastPosition = i < lastYearPositions.length ?
  219. lastYearPositions[i] :
  220. lastYearPositions[lastYearPositions.length - 1];
  221. positions[i] = {};
  222. positions[i].y = lastPosition.y + (positions[i-1].y - lastPosition.y) * SPEED;
  223. positions[i].x = lastPosition.x + (positions[i-1].x - lastPosition.x) * SPEED;
  224. }
  225. for (var i = 0; i < yearLength; ++i) {
  226. var radian = currStep + i * (360 / yearLength) * Math.PI / 180;
  227. setPosition($$('Date')[i],
  228. Math.round(positions[i].y) + CLOCK_HEIGHT * 1.5 * Math.sin(radian) + scrll,
  229. Math.round(positions[i].x) + CLOCK_WIDTH * 1.5 * Math.cos(radian));
  230. }
  231. lastYearPositions = positions;
  232. currStep -= STEP;
  233. }
  234.  
  235. function ClockAndAssign() {
  236. var date = new Date();
  237. var secs = date.getSeconds();
  238. var sec = -1.57 + Math.PI * secs / 30;
  239. var mins = date.getMinutes();
  240. var min = -1.57 + Math.PI * mins / 30;
  241. var hr = date.getHours();
  242. var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(date.getMinutes(), 10) / 360;
  243. $('Od').style.top = window.document.body.scrollTop;
  244. $('Of').style.top = window.document.body.scrollTop;
  245. $('Oh').style.top = window.document.body.scrollTop;
  246. $('Om').style.top = window.document.body.scrollTop;
  247. $('Os').style.top = window.document.body.scrollTop;
  248. var scrll = 0;
  249.  
  250. var positions = [{}];
  251. var lastPosition = lastBasePositions[0];
  252. positions[0].y = Math.round(lastPosition.y + (ymouse - lastPosition.y) * SPEED);
  253. positions[0].x = Math.round(lastPosition.x + (xmouse - lastPosition.x) * SPEED);
  254. for (var i = 1; i < FACES.length; ++i) {
  255. lastPosition = lastBasePositions[i];
  256. positions[i] = {};
  257. positions[i].y = Math.round(lastPosition.y + (positions[i - 1].y - lastPosition.y) * SPEED);
  258. positions[i].x = Math.round(lastPosition.x + (positions[i - 1].x - lastPosition.x) * SPEED);
  259. }
  260. lastBasePositions = positions;
  261.  
  262. var split = 360 / FACES.length;
  263. for (var i = 0; i < FACES.length; ++i) {
  264. var radian = -1.0471 + i * split * Math.PI / 180;
  265. setPosition($$('Face')[i],
  266. positions[i].y + CLOCK_HEIGHT * Math.sin(radian) + scrll,
  267. positions[i].x + CLOCK_WIDTH * Math.cos(radian));
  268. }
  269. for (var i = 0; i < H.length; ++i) {
  270. setPosition($$('Hours')[i],
  271. positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(hrs) + scrll,
  272. positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(hrs));
  273. }
  274. for (var i = 0; i < M.length; ++i) {
  275. setPosition($$('Minutes')[i],
  276. positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(min) + scrll,
  277. positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(min));
  278. }
  279. for (var i = 0; i < S.length; ++i) {
  280. setPosition($$('Seconds')[i],
  281. positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(sec) + scrll,
  282. positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(sec));
  283. }
  284. updateYear(date, scrll);
  285. requestAnimationFrame(ClockAndAssign);
  286. }
  287.  
  288. initialize();
  289. }());
  290. </script>
  291. </body>
  292. </html>
  293.  
  294. // Date wrapper
  295. var html = '';
  296. for (var i = 0; i < yearLength; ++i) {
  297. html += '<div class="Date">' + yearCharacters[i] + '</div>';
  298. }
  299. $('Od').children[0].innerHTML = html;
  300.  
  301.  
  302. if ( currentDate.getMinutes() % 2 == 0 ) {
  303.  
  304. var divChildren = $('Od').children[0].children;
  305. for (var i = 0; i < divChildren; ++i) {
  306. var divEl = divChildren[i];
  307.  
  308. if ((i >= 0) && (i < 2)) {
  309. divEl.children[0].style.color="red";
  310.  
  311. }
  312. }
  313. }
  314.  
  315. }
  316.  
  317. // Date wrapper
  318. var html = '';
  319. var is_heisei = yearString.match(/^平成.*/);
  320. for (var i = 0; i < yearLength; ++i) {
  321. var cls = 'Date';
  322. if (is_heisei && i < 2)
  323. cls += ' red';
  324. html += '<div class="' + cls + '">' + yearCharacters[i] + '</div>';
  325. }
  326. $('Od').children[0].innerHTML = html;
  327.  
  328. .red {
  329. color: #ff0000;
  330. }
  331.  
  332. // Date wrapper
  333. var html = '';
  334. for (var i = 0; i < yearLength; ++i) {
  335. html += '<div class="Date">' + yearCharacters[i] + '</div>';
  336. }
  337. $('Od').children[0].innerHTML = html;
  338.  
  339.  
  340. if ( currentDate.getMinutes() % 2 == 0 ) {
  341.  
  342. var divChildren = $('Od').children[0].children;
  343. for (var i = 0; i < divChildren.length; i++) { //変更点1
  344. var divEl = divChildren[i];
  345.  
  346. if ((i >= 0) && (i < 2)) {
  347. divEl.style.color="red"; //変更点2
  348.  
  349. }
  350. }
  351. }
  352.  
  353. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!