初級・中級者向け~ウェブ制作備忘録
久しぶりに何かブログパーツつくりたいなぁーと考えまして・・・アナログ時計でも作ってみようかと。
そして、出来上がったものがコチラ →→→
デザインはシンプルに、利用者様の趣味嗜好で色や形を自由にカスタマイズできるものを考えました。
素のJavaScriptとCSSだけで動作しますので、設置サイトを選ばず動作するはずです。
自身のサイトやブログにちょっとばかりのお飾りにどうぞご利用くださいませ。
上記見本のようなデフォルト状態のコードは次のとおりです。
<script> var borderRadius1 = '50'; var borderRadius2 = '50'; var borderRadius3 = '50'; var borderRadius4 = '50'; var borderColor = '#CCCCCC'; var background = '#f9f9f9'; var backgroundImg = ''; var timeMark = '#666666'; var hourHand = '#d3483e'; var minuteHand = '#cccccc'; var secondHand = '#33ccdd'; </script> <script charset="uft-8" src="https://wdeco.jp/api/clock/index.js"></script>
なお、本プログラムは、Ractionさんの「CSSで時計を作って回そう」をベースにしています。
作者の倉地俊輔さんは、トライデントコンピュータ専門学校Webデザイン学科2年生(2020年4月時点)。フロントエンドエンジニアを目指して勉強中とのこと。
優秀なエンジニアになること間違えなしの学生さん。利用させていただき、有難うございます。
雑記・メモ | |
2020.12.20 20:04 | |
2020.12.21 19:35 |