JavaScript
var max = 120;
var t;
var per = 0;
var opacity = 1;
var isSounded3 = true;
var isSounded10 = true;
var isLoop = true;
var loop = 0;
document.title = 'timer120';
var paramNum = 1;
console.log(location.search);
if(location.search){
var match = location.search.match(/\d+/);
if(match){
console.log(match);
paramNum = match[0];
console.log(paramNum);
paramNum = parseInt(paramNum);
console.log(paramNum);
} else {
paramNum = max;
}
}
if(location.search.match('n')){
isLoop = false;
}
console.log({isLoop:isLoop});
if(location.search.match('m')){
max = 60 * paramNum;
} else if (location.search){
max = paramNum;
}
console.log(max);
function zenToHan(str){
str = str.replace(/[A-Za-z0-9]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
});
return str;
}
$(function(){
var $divParent = $('<div>').addClass('parent');
var $bar = $('<div>').addClass('bar');
var $back = $('<div>').addClass('back');
var $panel = $('<div>').addClass('panel');
var $iframe = $('<iframe>').addClass('iframe forSound');
var $loop = $('<p>',{title:'loop'}).text(loop).addClass('loop');
var $input = $('<input>',{title:'input seconds'}).val(max).addClass('input');
var $button = $('<div>').addClass('button').on('click', function(){
loop = 0;
reset();
});
var timeDefault = new Date().getTime();
$(document.body).prepend($button);
$(document.body).prepend($panel);
$(document.body).prepend($divParent);
$(document.body).prepend($loop);
$(document.body).prepend($input);
$(document.body).prepend($iframe);
$divParent.prepend($bar).prepend($back);
var animationTemp = 'perWidth {s}s linear infinite';
var animation = animationTemp.replace('{s}', Math.floor(max));
$bar.css({animation:animation});
$input.on('change', function(){
var val = $(this).val();
val = zenToHan(val);
location.replace(location.pathname + '?' + val);
});
var au = new Audio();
au.volume = 0.8;
var loopAction = function(){
var now = new Date().getTime();
t = (now - timeDefault)/1000;
var count = Math.ceil(max-t);
per = (max-t)/max * 100;
if(per<-100){return;}
var per10 = Math.ceil(per/10);
var perBar = '■'.repeat(per10) + '□'.repeat(10-per10);
document.title = count + ' / ' + max + ' ' + perBar;
if(per<=0){
timeDefault = new Date().getTime();
if(loop < 5 && isLoop){
//$iframe.attr({src: 'pin_pon.mp3'});
loop++;
$loop.text(loop);
reset();
loopAction();
return;
}
$bar.css({backgroundColor:'#f00'});
} else if(count === 3){
if(isSounded3 && loop < 5){
$iframe.attr({src: 'countdown-3seconds.mp3'});
isSounded3 = false;
}
} else if(count <= 10){
if(isSounded10 && loop < 5){
$iframe.attr({src: 'pi.mp3'});
isSounded10 = false;
}
$bar.css({backgroundColor:'#f00'});
$back.css({backgroundColor:'#f00'});
} else if(per < 25){
$bar.css({backgroundColor:'#f60'});
$back.css({backgroundColor:'#f60'});
} else if(per < 50){
$bar.css({backgroundColor:'#cc0'});
$back.css({backgroundColor:'#cc0'});
} else {
$bar.css({backgroundColor:'#fff'});
$back.css({backgroundColor:'#000'});
}
if(per>-400){
$panel.text(count);
}
if(loop > 9){
clearInterval(timer);
}
}
var timer = setInterval(function(){
loopAction();
},500);
var reset = function(){
timeDefault = new Date().getTime();
isSounded3 = true;
isSounded10 = true;
opacity = 1;
if(isLoop){
$loop.text(loop);
} else {
$loop.text('N');
}
var $barClone =$bar.clone();
$bar.remove();
$bar = $barClone;
$divParent.append($bar);
loopAction();
}
});
CSS
html,body{
min-height:100%;
overflow:hidden;
}
@keyframes perWidth {
0% {width: 100%;}
100% {width: 0;}
}
.parent{
width:100%;
height:100%;
background-color:#000;
}
.bar{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#eee;
}
.back{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:.3;
}
.panel{
position:absolute;
top:25%;
left:50%;
z-index:9;
font-size:40vmin;
font-weight:bold;
font-family:Impact;
color:#aaa;
border:none;
background-color:transparent;
user-select:none;
}
.button{
position:absolute;
top:0;
right:0;
z-index:12;
width:50%;
height:100%;
cursor:pointer;
border-left:1px solid #aaa;
opacity:0.2;
}
.button:hover{
background-color:#fff;
}
.help{
position:absolute;
bottom:0;
right:0;
font-size:40px;
color:#aaa;
}
iframe{
display:none;
}
input{
position:absolute;
top:0;
left:0;
z-index:19;
font-size:24px;
width:48px;
height:32px;
border:0;
padding:0;
background-color:rgba(222, 222, 222, 0.5);
}
.loop{
position:absolute;
bottom:0;
left:0;
z-index:19;
font-size:24px;
width:32px;
height:32px;
border:0;
border-radius:50%;
text-align:center;
line-height:32px;
background-color:rgba(222, 222, 222, 0.5);
}
/*
.loop:before{
display:block;
content:"";
position:absolute;
bottom:0;
left:0;
z-index:18;
border-right: 40px solid transparent;
border-bottom: 40px solid rgba(210,210,210,0.5);
border-left: 40px solid rgba(210,210,210,0.5);
}
*/