ソースの表示

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

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート タイマー（7 セグメント表示版）</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 {
  text-align:center;
  color:#CC0000;
  font-size:large;
  font-weight:bold;
}

input {
  display:none;
}

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

  --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:16px 20px;
  line-height:1;
  background-color:silver;
  border-radius:8px;
}

.char {
  position:relative;
}

.digit {
  display:inline-block;
  width:29px;
  height:43px;
  background:url("data:image/png;base64,\
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\
AAAASUVORK5CYII=")
    calc(var(--c1) * -29px) 0 no-repeat;
}

.unit {
  font-size:18px;
}

#dm10 {
  --c1:var(--cm10);
}
#dm01 {
  --c1:var(--cm01);
}
#ds10 {
  --c1:var(--cs10);
}
#ds01 {
  --c1:var(--cs01);
}

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

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

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

#btn-g1 {
  width:212px;
  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:184px;
  margin-top:12px;
}

.btn2 {
  width:80px;
}

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

.start-l {
  left:100px;
  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">スタイルシート タイマー（7 セグメント表示版）</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">
<DIV ID="dm10" CLASS="char digit"></DIV>
<DIV ID="dm01" CLASS="char digit"></DIV>
<SPAN CLASS="char unit">分</SPAN>
<DIV ID="ds10" CLASS="char digit"></DIV>
<DIV ID="ds01" CLASS="char digit"></DIV>
<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>