Skip to content

Instantly share code, notes, and snippets.

@Erliz

Erliz/score.html

Last active December 21, 2016 23:29
Show Gist options
  • Save Erliz/55dd753674264d32e41ee0c789622b93 to your computer and use it in GitHub Desktop.
Save Erliz/55dd753674264d32e41ee0c789622b93 to your computer and use it in GitHub Desktop.
Download ZIP
Hockey score for #mycom
Raw
score.html
<html>
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Iceland);
html, body {
height: 100%;
margin: 0;
}
body {
background: #7d7e7d url(https://scut.erliz.ru/qgSiB5t.png) center no-repeat;
background-size: cover;
text-align: center;
text-shadow: 0 0 10px rgba(252, 44, 56, 0.75);
color: #ddd
}
body::before {
content: "";
display: block;
background: #182227;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -1;
opacity: 0.9
}
.chronometer span#seconds {
text-align: right;
}
.chronometer.times-up span {
color: rgb(252, 44, 56);
}
.chronometer {
font-family: 'Iceland', sans-serif;
font-size: 137px;
white-space: nowrap;
padding: 20px;
overflow: hidden;
display: inline-block;
letter-spacing: -10px;
text-shadow: 0 0 10px rgba(252, 44, 56, 0.75);
border: 2px solid #222;
border-radius: 5px;
position: relative;
/* box-shadow: 0px -2px 10px 1px rgba(23, 140, 140, 0.75) inset, 0px 5px 20px -10px #000; */
box-shadow: 0px -2px 10px 1px rgba(252, 44, 56, 0.75) inset, 0px 5px 20px -10px #000;
width: 620px;
color: #ffffff;
background: #182227;
}
.chronometer.score {
font-size: 90px;
display: table-cell;
letter-spacing: 0px;
width: 138px;
text-align: center;
}
#log {
margin: 35px auto;
text-align: center;
border-radius: 5px;
width: 150px;
box-shadow: 0px 0px 6px rgba(252, 44, 56, 0.5);
background: rgba(0, 0, 0, 0.2);
font-family: sans-serif;
/* display: none; */
padding: 10px
}
#buttons a {
font-family: 'Iceland', sans-serif;
margin: 30px 0;
background-color: #182227;
box-shadow: 0px 0px 10px 1px rgba(252, 44, 56, 0.2) inset;
border-radius: 6px;
border: 2px solid #222;
display: inline-block;
color: #ddd;
font-family: arial;
font-size: 15px;
font-weight: bold;
line-height: 50px;
width: 124px;
text-decoration: none;
transition: all 0.1s
}
#buttons a:hover {
color: #fff;
box-shadow: 0px 0px 30px 1px rgba(252, 44, 56, 0.5) inset;
}
th, td {
padding: 16px 0px;
text-align: center;
}
th {
padding-top: 22px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script>
var timerEnds = 10 * 60 * 1000;
function clearTime() {
timerEnds = 0
}
function setMinutes(minutes) {
timerEnds = timerEnds + (minutes * 60 * 1000);
}
function setSeconds(seconds) {
timerEnds = timerEnds + (seconds * 1000);
}
$(function () {
var t = undefined;
var timesUpClass = 'times-up';
var chronometer = $('#chronometer');
var millisecondsSpan = $("#thousandths");
var secondsSpan = $("#seconds");
var minutesSpan = $("#minutes");
var homeScoreInput = $('#homeScore');
var guestsScoreInput = $('#guestsScore');
var timerValue = 0;
var timerStep = 10;
function getTimeRemaining(endDateTime, roundMilliSeconds = false) {
var currentDateTime = (new Date()).valueOf();
var endTime = endDateTime.valueOf();
if (roundMilliSeconds) {
currentDateTime = Math.round(currentDateTime / 1000, -3) * 1000;
endTime = Math.round(endTime / 1000, -3) * 1000
}
var t = endTime.valueOf() - currentDateTime;
var milliseconds = Math.floor(t % 1000);
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds,
'milliseconds': milliseconds
};
}
function initializeClock() {
stopTimer();
chronometer.removeClass(timesUpClass);
timerValue = 0;
renderClock(getTimeRemaining(getRemainingDateTime(0), true));
}
function updateClock(endtime) {
renderClock(getTimeRemaining(endtime));
}
function renderClock(t) {
minutesSpan.html(('0' + t.minutes).slice(-2));
secondsSpan.html(('0' + t.seconds).slice(-2));
millisecondsSpan.html(('0.' + ('0' + t.milliseconds).slice(-3)).substring(0, 4));
}
function changeTimer() {
(!t) ? initTimer() : stopTimer();
}
function stopTimer() {
clearInterval(t);
t = undefined;
}
function getRemainingDateTime(value) {
return new Date((new Date()).valueOf() + (timerEnds - value));
}
function timesUp() {
stopTimer();
chronometer.addClass(timesUpClass);
timerValue = timerEnds;
renderClock(getTimeRemaining(getRemainingDateTime(timerEnds), true));
}
function initTimer() {
t = setInterval(function () {
timerValue = timerValue + timerStep;
if ((timerEnds - timerValue) <= 0) {
timesUp();
}
updateClock(getRemainingDateTime(timerValue));
}, timerStep);
}
function increaseScore($el) {
$el.val(parseInt($el.val()) + 1)
}
function decreaseScore($el) {
var score = parseInt($el.val());
if (score == 0) {
return;
}
$el.val(parseInt($el.val()) - 1)
}
$("#change").on('click', changeTimer);
$("#init").on('click', initializeClock);
$(document).keydown(function (event) {
var KEY_SPACE = 32;
var KEY_UP = 38;
var KEY_DOWN = 40;
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var allKeys = [
KEY_SPACE,
KEY_UP,
KEY_DOWN,
KEY_RIGHT,
KEY_LEFT,
];
if (allKeys.indexOf(event.keyCode) != -1) {
event.stopPropagation();
event.preventDefault();
}
if (event.keyCode == KEY_SPACE) {
changeTimer();
} else if (event.keyCode == KEY_UP) {
increaseScore(homeScoreInput);
} else if (event.keyCode == KEY_DOWN) {
decreaseScore(homeScoreInput);
} else if (event.keyCode == KEY_LEFT) {
increaseScore(guestsScoreInput);
} else if (event.keyCode == KEY_RIGHT) {
decreaseScore(guestsScoreInput);
}
if (allKeys.indexOf(event.keyCode) != -1) {
return false;
}
});
initializeClock();
});
</script>
</head>
<body>
<div id="buttons">
<a id="change" href=#>Пуск / Пауза</a>
<a href=# id="init">Новый тайм</a>
</div>
<div id="chronometer" class="chronometer">
<span id="minutes">00</span><span>&nbsp:&nbsp</span><span id="seconds">00</span><span>&nbsp:&nbsp</span><span
id="thousandths">0.00</span>
</div>
<table id="log">
<thead>
<tr>
<th>Хозяева</th>
<th>Гости</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="homeScore" class="chronometer score" type="text" value="0" maxlength="2"/></td>
<td><input id="guestsScore" class="chronometer score" type="text" value="0" maxlength="2"/></td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment