ソースの表示

■ CSStimer.htm ■
<!DOCTYPE HTML>
<HTML LANG="ja">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート タイマー</TITLE>

<STYLE TYPE="text/css">
<!--

@keyframes count-down {
  to {
    --time:0;
  }
}

@keyframes count-up {
  to {
    --time:5999;
  }
}

@keyframes end {
  from {
    --end:0;
  }
  to {
    --end:1;
  }
}

@keyframes alarm {
  from {
    visibility:visible;
  }
  to {
    visibility:hidden;
  }
}

@keyframes disable-btn {
  from {
    pointer-events:none;
  }
  to {
    pointer-events:auto;
  }
}

@property --time {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --cm10 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --cm01 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --cs10 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

body {
  background-color:#CCFFFF;
}

#title {
  color:#CC0000;
  font-size:large;
  font-weight:bold;
  text-align:center;
}

input {
  display:none;
}

#base {
  position:relative;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  padding:20px;
  border:solid 1px gainsboro;
  border-radius:12px;
  text-align:center;
  font-family:sans-serif;
  font-weight:bold;
  white-space:nowrap;
  background-color:whitesmoke;
  user-select:none;

  counter-reset:m10 var(--cm10) m01 var(--cm01) s10 var(--cs10) s01 var(--cs01);
  --time-set:calc((var(--sm10) * 10 + var(--sm01)) * 60 + var(--ss10) * 10);
  --time-set-s:calc(var(--time-set) * 1s);
  --down:min(var(--time-set), 1);
  --time:var(--time-set);
  --cm10:calc(var(--time) / 600 - 0.499);  /* 小数部切り捨て */
  --cm01:calc((var(--time) - var(--cm10) * 600) / 60 - 0.499);
  --cs10:calc((var(--time) - var(--cm10) * 600 - var(--cm01) * 60) / 10 - 0.499);
  --cs01:calc(var(--time) - var(--cm10) * 600 - var(--cm01) * 60 - var(--cs10) * 10);
  --end:0;
}

#back {
  position:relative;
  padding:10px 20px;
  border-radius:8px;
  line-height:1;
  vertical-align:baseline;
  background-color:silver;
}

.char {
  position:relative;
}

.digit {
  font-size:60px;
}

.unit {
  font-size:18px;
}

#dm10::after {
  content:counter(m10);
}
#dm01::after {
  content:counter(m01);
}
#ds10::after {
  content:counter(s10);
}
#ds01::after {
  content:counter(s01);
}

.btn-g {
  position:relative;
  height:40px;
  margin-left:auto;
  margin-right:auto;
}

.btn {
  display:inline-block;
  position:absolute;
  height:40px;
  border-radius:5px;
  background-color:whitesmoke;
  border:solid 2px black;
}

.btn:hover {
  background-color:gainsboro;
}

#btn-g1 {
  width:208px;
  margin-top:20px;
}

.btn1 {
  width:60px;
  font-size:16px;
  line-height:40px;
}

.lm10 {
  left:0;
  --dw:calc(var(--sm10) - var(--pd));
}

#stop-m10 {
  left:0;
  z-index:var(--end);
}

.lm01 {
  left:74px;
  --dw:calc(var(--sm01) - var(--pd));
}

#stop-m01 {
  left:74px;
  z-index:var(--end);
}

.ls10 {
  left:148px;
  --dw:calc(var(--ss10) - var(--pd));
}

#stop-s10 {
  left:148px;
  z-index:var(--end);
}

.lm10, .lm01, .ls10 {
  /* abs() は実装されていない */
  z-index:calc(1 - min(var(--dw) * var(--dw), 1));
}

#lm10-0, #lm01-0 {
  --pd:9;
}
#ls10-0 {
  --pd:5;
}
#lm10-1, #lm01-1, #ls10-1 {
  --pd:0;
}
#lm10-2, #lm01-2, #ls10-2 {
  --pd:1;
}
#lm10-3, #lm01-3, #ls10-3 {
  --pd:2;
}
#lm10-4, #lm01-4, #ls10-4 {
  --pd:3;
}
#lm10-5, #lm01-5, #ls10-5 {
  --pd:4;
}
#lm10-6, #lm01-6 {
  --pd:5;
}
#lm10-7, #lm01-7 {
  --pd:6;
}
#lm10-8, #lm01-8 {
  --pd:7;
}
#lm10-9, #lm01-9 {
  --pd:8;
}

#sm10-0:checked ~ #base {
  --sm10:0;
}
#sm10-1:checked ~ #base {
  --sm10:1;
}
#sm10-2:checked ~ #base {
  --sm10:2;
}
#sm10-3:checked ~ #base {
  --sm10:3;
}
#sm10-4:checked ~ #base {
  --sm10:4;
}
#sm10-5:checked ~ #base {
  --sm10:5;
}
#sm10-6:checked ~ #base {
  --sm10:6;
}
#sm10-7:checked ~ #base {
  --sm10:7;
}
#sm10-8:checked ~ #base {
  --sm10:8;
}
#sm10-9:checked ~ #base {
  --sm10:9;
}

#sm01-0:checked ~ #base {
  --sm01:0;
}
#sm01-1:checked ~ #base {
  --sm01:1;
}
#sm01-2:checked ~ #base {
  --sm01:2;
}
#sm01-3:checked ~ #base {
  --sm01:3;
}
#sm01-4:checked ~ #base {
  --sm01:4;
}
#sm01-5:checked ~ #base {
  --sm01:5;
}
#sm01-6:checked ~ #base {
  --sm01:6;
}
#sm01-7:checked ~ #base {
  --sm01:7;
}
#sm01-8:checked ~ #base {
  --sm01:8;
}
#sm01-9:checked ~ #base {
  --sm01:9;
}

#ss10-0:checked ~ #base {
  --ss10:0;
}
#ss10-1:checked ~ #base {
  --ss10:1;
}
#ss10-2:checked ~ #base {
  --ss10:2;
}
#ss10-3:checked ~ #base {
  --ss10:3;
}
#ss10-4:checked ~ #base {
  --ss10:4;
}
#ss10-5:checked ~ #base {
  --ss10:5;
}

#btn-g2 {
  width:180px;
  margin-top:12px;
}

#reset-l {
  left:0;
  width:80px;
  font-size:14px;
  line-height:40px;
}

.start-l {
  left:100px;
  width:80px;
  font-size:13px;
  line-height:1;
  vertical-align:top;
}

.start-l2 {
  display:inline-block;
  position:relative;
  padding-top:7px
}

#stop-l {
  z-index:var(--end);
}

#start-down:checked ~ #base {
  animation:count-down var(--time-set-s) steps(var(--time-set), end) forwards running,
            end var(--time-set-s) step-end forwards running;
}

#start-down:checked ~ #base .char {
  animation:alarm 1s steps(2, jump-none) infinite var(--time-set-s) running;
}

#start-down:checked ~ #base #pause-down-l {
  z-index:calc(1 - var(--end));
}

#start-down:checked ~ #base #btn-g1 {
  animation:disable-btn var(--time-set-s) step-end running;
}

#pause-down:checked ~ #base {
  animation:count-down var(--time-set-s) steps(var(--time-set), end) forwards paused,
            end var(--time-set-s) step-end forwards paused;
}

#pause-down:checked ~ #base .char {
  animation:alarm 1s steps(2, jump-none) infinite var(--time-set-s) paused;
}

#pause-down:checked ~ #base #btn-g1 {
  animation:disable-btn var(--time-set-s) step-end paused;
}

#pause-down:checked ~ #base #start-down-l {
  z-index:1;
}

#start-up:checked ~ #base {
  animation:count-up 6000s steps(6000, jump-none) forwards running,
            end 6000s step-end forwards running;
}

#start-up:checked ~ #base #pause-up-l {
  z-index:calc(1 - var(--end));
}

#start-up:checked ~ #base #btn-g1 {
  animation:disable-btn 6000s step-end running;
}

#pause-up:checked ~ #base {
  animation:count-up 6000s steps(6000, jump-none) forwards paused,
            end 6000s step-end forwards paused;
}

#pause-up:checked ~ #base #btn-g1 {
  animation:disable-btn 6000s step-end paused;
}

#pause-up:checked ~ #base #start-up-l {
  z-index:1;
}

#stop:checked ~ #base #start-down-l {
  z-index:var(--down);
}

#stop:checked ~ #base #start-up-l {
  z-index:calc(1 - var(--down));
}

-->
</STYLE>

</HEAD>

<BODY>
<BR>
<DIV ID="title">スタイルシート タイマー</DIV>
<BR>

<FORM>
<!-- タイマー初期値セット -->
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-0" CHECKED>
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-1">
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-2">
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-3">
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-4">
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-5">
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-6">
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-7">
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-8">
<INPUT TYPE=RADIO NAME="sm10" ID="sm10-9">

<INPUT TYPE=RADIO NAME="sm01" ID="sm01-0" CHECKED>
<INPUT TYPE=RADIO NAME="sm01" ID="sm01-1">
<INPUT TYPE=RADIO NAME="sm01" ID="sm01-2">
<INPUT TYPE=RADIO NAME="sm01" ID="sm01-3">
<INPUT TYPE=RADIO NAME="sm01" ID="sm01-4">
<INPUT TYPE=RADIO NAME="sm01" ID="sm01-5">
<INPUT TYPE=RADIO NAME="sm01" ID="sm01-6">
<INPUT TYPE=RADIO NAME="sm01" ID="sm01-7">
<INPUT TYPE=RADIO NAME="sm01" ID="sm01-8">
<INPUT TYPE=RADIO NAME="sm01" ID="sm01-9">

<INPUT TYPE=RADIO NAME="ss10" ID="ss10-0" CHECKED>
<INPUT TYPE=RADIO NAME="ss10" ID="ss10-1">
<INPUT TYPE=RADIO NAME="ss10" ID="ss10-2">
<INPUT TYPE=RADIO NAME="ss10" ID="ss10-3">
<INPUT TYPE=RADIO NAME="ss10" ID="ss10-4">
<INPUT TYPE=RADIO NAME="ss10" ID="ss10-5">

<!-- リセット -->
<INPUT TYPE=RESET ID="reset">

<!-- スタート／ストップ -->
<INPUT TYPE=RADIO NAME="start" ID="start-down">
<INPUT TYPE=RADIO NAME="start" ID="pause-down">
<INPUT TYPE=RADIO NAME="start" ID="start-up">
<INPUT TYPE=RADIO NAME="start" ID="pause-up">
<INPUT TYPE=RADIO NAME="start" ID="stop" CHECKED>

<DIV ID="base">
<!-- 表示 -->
<DIV ID="back">
<SPAN ID="dm10" CLASS="char digit"></SPAN>
<SPAN ID="dm01" CLASS="char digit"></SPAN>
<SPAN CLASS="char unit">分</SPAN>
<SPAN ID="ds10" CLASS="char digit"></SPAN>
<SPAN ID="ds01" CLASS="char digit"></SPAN>
<SPAN CLASS="char unit">秒</SPAN>
</DIV>

<!-- タイマー初期値セット ボタン -->
<DIV ID="btn-g1" CLASS="btn-g">
<LABEL ID="lm10-0" FOR="sm10-0" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="lm10-1" FOR="sm10-1" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="lm10-2" FOR="sm10-2" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="lm10-3" FOR="sm10-3" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="lm10-4" FOR="sm10-4" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="lm10-5" FOR="sm10-5" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="lm10-6" FOR="sm10-6" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="lm10-7" FOR="sm10-7" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="lm10-8" FOR="sm10-8" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="lm10-9" FOR="sm10-9" CLASS="btn btn1 lm10">10分</LABEL>
<LABEL ID="stop-m10" FOR="stop" CLASS="btn btn1">10分</LABEL>

<LABEL ID="lm01-0" FOR="sm01-0" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="lm01-1" FOR="sm01-1" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="lm01-2" FOR="sm01-2" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="lm01-3" FOR="sm01-3" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="lm01-4" FOR="sm01-4" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="lm01-5" FOR="sm01-5" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="lm01-6" FOR="sm01-6" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="lm01-7" FOR="sm01-7" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="lm01-8" FOR="sm01-8" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="lm01-9" FOR="sm01-9" CLASS="btn btn1 lm01">1分</LABEL>
<LABEL ID="stop-m01" FOR="stop" CLASS="btn btn1">1分</LABEL>

<LABEL ID="ls10-0" FOR="ss10-0" CLASS="btn btn1 ls10">10秒</LABEL>
<LABEL ID="ls10-1" FOR="ss10-1" CLASS="btn btn1 ls10">10秒</LABEL>
<LABEL ID="ls10-2" FOR="ss10-2" CLASS="btn btn1 ls10">10秒</LABEL>
<LABEL ID="ls10-3" FOR="ss10-3" CLASS="btn btn1 ls10">10秒</LABEL>
<LABEL ID="ls10-4" FOR="ss10-4" CLASS="btn btn1 ls10">10秒</LABEL>
<LABEL ID="ls10-5" FOR="ss10-5" CLASS="btn btn1 ls10">10秒</LABEL>
<LABEL ID="stop-s10" FOR="stop" CLASS="btn btn1">10秒</LABEL>
</DIV>

<!-- リセット ボタン，スタート／ストップ ボタン -->
<DIV ID="btn-g2" CLASS="btn-g">
<LABEL ID="reset-l" FOR="reset" CLASS="btn btn2">リセット</LABEL>
<LABEL ID="start-down-l" FOR="start-down" CLASS="btn btn2 start-l"><SPAN CLASS="start-l2">スタート<BR>ストップ</SPAN></LABEL>
<LABEL ID="pause-down-l" FOR="pause-down" CLASS="btn btn2 start-l"><SPAN CLASS="start-l2">スタート<BR>ストップ</SPAN></LABEL>
<LABEL ID="start-up-l" FOR="start-up" CLASS="btn btn2 start-l"><SPAN CLASS="start-l2">スタート<BR>ストップ</SPAN></LABEL>
<LABEL ID="pause-up-l" FOR="pause-up" CLASS="btn btn2 start-l"><SPAN CLASS="start-l2">スタート<BR>ストップ</SPAN></LABEL>
<LABEL ID="stop-l" FOR="stop" CLASS="btn btn2 start-l"><SPAN CLASS="start-l2">スタート<BR>ストップ</SPAN></LABEL>
</DIV>

</DIV>
</FORM>

</BODY>

</HTML>