ソースの表示

■ 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 {
  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;

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

.char {
  position:relative;
}

.digit {
  display:inline-block;
  width:29px;
  height:43px;
  background:url("data:image/png;base64,\
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\
t2Lm/zaJW1BkmBHnAAAAAElFTkSuQmCCAAAA")
    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;
  border-radius:5px;
  background-color:whitesmoke;
  border:solid 2px black;
}

.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>