Q&A
どのようなコードを書きましたか？
今起こっている問題点
アラート表示されてから要素が表示されてしまう
アラート表示と同時に要素を表示する方法はありますか？
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>10秒ピッタリ止めれるか？</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 0;
padding: 0;
}
.wrapper{
width: 500px;
margin: 0 auto;
text-align: center;
}
h1{
padding: 30px 0;
}
ul#stopwatch{
list-style:none;
display:flex;
justify-content: center;
font-size:40px;
font-weight:bold;
}
</style>
</head>
<body onload="stop2()">
<script>
var MILLI=0;
var SECOND=0;
//STARTボタンを無効にする
function Non(){
document.stopwatch.start.disabled=true;
}
//STARTボタンを有効にする
function On(){
document.stopwatch.start.disabled=false;
}
function Milli() {
document.stopwatch.st.disabled=false;
Non();
if(MILLI<100){
MILLI++;
document.getElementById("milli").innerHTML=MILLI;
Timer=setTimeout("Milli()",10);
}else{
MILLI=0;//100を越えたら0に戻る
Milli();//同じ関数をまた実行
Second();//秒の関数を呼び出す
}
}
function Second() {
if(SECOND<59){
SECOND++;
document.getElementById("second").innerHTML="0"+SECOND;
}else{
SECOND=0;//60を越えたら0に戻る
Second();//同じ関数をまた実行
}
if(SECOND>3){
document.getElementById("stopwatch").style.visibility="hidden";
}
if(SECOND==10){
document.getElementById("second").innerHTML=SECOND;
}
}
function Stop() {
On();
clearTimeout(Timer);
document.getElementById("stopwatch").style.visibility="visible";
document.stopwatch.st.disabled=true;
if(SECOND==10 && MILLI==00){
window.alert("10秒ピッタリ！やりますねぇ！");
}else if(SECOND>=9 && SECOND<=11){
window.alert("惜しい！でもまだまだだね^^");
}else{
window.alert("残念！まだまだだね^^");
}
MILLI=0;
SECOND=0;
document.getElementById("second").innerHTML="0"+SECOND;
document.getElementById("milli").innerHTML="0"+MILLI;
}
function stop2(){
document.stopwatch.st.disabled=true;
}
</script>
<div class="wrapper">
<h1>10秒ピッタリ止めれるか？</h1>
<ul id="stopwatch">
<li id="second">00</li>:
<li id="milli">00</li>
</ul>
<form name="stopwatch">
<input type="button" size="2" value="START" name="start" onclick="Milli()">
<input type="button" size="2" name="st" value="STOP" onclick="Stop()">
</form>
</div>
</body>
</html>
```
このようなコードを書きました
質問を [編集] して、バッククォート3つの内部にコードを書いて下さい。
https://qiita.com/tbpgr/items/989c6badefff69377da7#-gfmpre%E8%A8%98%E6%B3%95%E3%83%90%E3%83%83%E3%82%AF%E3%82%AF%E3%82%A9%E3%83%BC%E3%83%883
回答1件
0
ブラウザは alert() で再描画すべきですが、Chromeは reflow/repaint が止まってしまうようです。
https://html.spec.whatwg.org/multipage/webappapis.html#pause
.offsetHeight を参照したり opacity を変えることで改善するという情報もありますが、試したところ安定しませんでした。
setTimeout() で 10ms 以上くらい待つようにするとほぼ出るようですが、不安であれば疑似ダイアログで表示するようにしてみてはどうでしょうか？ Chrome なら dialog 要素が使えます。
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog
投稿2019/12/16 08:30
総合スコア13749
あなたの回答
tips
プレビュー
