1
しばらくしてから開始して停止するアラームを作りたいと思います。だから私はsetIntervalをコードに入れます。また、アラームが鳴ったときにメッセージを表示したい。このため、最後のdivにテキストを作成し、jQuery hide（）で非表示にします。ここで私のコードで、p.showはjQuery hide（）によって隠されません。それは隠さないのはなぜhide（）jqueryが機能しません
<!DOCTYPE html>
<html>
<head>
<title>My Rest Alarm</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label for="sel1">Alarm will ring after :</label>
<input type="text" class="form-control" id="minute"> minute
</div>
</form>
</div>
<div class="row">
<div class="alarm" style="display:none;"></div>
<button class="btn btn-success start"> Start </button>
<button class="btn btn-danger stop"> Stop </button>
</div>
<div class="row">
<center><p><b id="clock"></b></p></center>
</div>
<div class="row">
<p class="show">It's time to rest</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("p.show").hide();
//show clock
var myVar = setInterval(myTimer ,1000);
function myTimer() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
//start alarm
var alarm;
$("button.start").click(function(){
var alarmVal = $("input").val();
//console.log(alarmVal*60000);
$("p.show").delay(alarmVal*60000).fadeIn();
alarm = setInterval(function(){
//alert("Hello");
$('div.alarm').append("<audio autoplay><source src='http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3' type='audio/mpeg'></audio>");
},
alarmVal*60000);
});
//stop alarm
$("button.stop").click(function(){
clearInterval(alarm);
$("p.show").fadeOut();
});
});
</script>
</body>
</html>？
以外のクラス名を使用して、問題を解決するには、AJAX呼び出しや動的ロードのいくつかの並べ替えているのですか？ – jk121960
「Run code snippet」 - >「スタート」をクリックしてみよう。バグレポート：ヘッドフォンを搭載した静かな部屋にいるとうまく動作しません。 – vlaz
@vlaz - バグではなく、ユーザーを怖がらせることが目的のユースケースです。 – adeneo