background-color: floralwhite; min-width: 100%; min-height: 100%;} #heading {text-align: center; font-size: 16px;} #copyright {font-size: 16px;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-weight: normal;padding-left: 1%;padding-right: 1%;} .keys {display: flex; flex: 1; padding-top: 2%;align-items: center; justify-content: center;} .key {border: .4rem solid #17A7D9;border-radius: .5rem;margin: 1rem;font-size: 1.5rem;padding: 1rem .5rem;transition: all .07s ease;width: 10rem;text-align: center;color: white;background-color: rgba(0,0,0,0.45);text-shadow: 0 0 .5rem black;} .playing {transform: scale(1.1);border-color: #ffc600;box-shadow: 0 0 1rem #ffc600;}kbd {display: block;font-size: 4rem;} .sound {font-size: 1.2rem;text-transform: uppercase; letter-spacing: .1rem; color: #ffc600;}
.clock {width: 30rem;height: 30rem;border: 20px solid white;border-radius: 50%;margin: 50px auto;position: relative;padding: 2rem;box-shadow:0 0 0 4px rgba(0,0,0,0.1)inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,0 0 10px rgba(0,0,0,0.2);background-color: aliceblue;}.clock-face {position: relative;width: 100%;height: 100%;transform: translateY(-3px); /* account for the height of the clock hands */} .hand {width: 50%;height: 6px;background: black;position: absolute;top: 50%;transform-origin: 100%;transform: rotate(90deg);transition: all 0.05s;transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);} .hour-hand {background-color: black;} .minute-hand {background-color: lightslategray;}.second-hand {background-color: lightgrey;}. This stylized the webpage including the clock and music notes. The JavaScript made the website function which the code can be seen here:
function removeTransition(e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.which || e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.which || e.keyCode}"]`);
if (!audio) return;
key.classList.add('playing');
audio.currentTime = 0;
audio.play();
}
const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);
//Clock
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
Knowing how to use audio and clocks is useful to a web designer because it allows more options to the web designer.
Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_15/Lab_15.html
No comments:
Post a Comment