Почему у меня срабатывает будильник, когда я открываю сайт? - PullRequest
Новая
       0

Почему у меня срабатывает будильник, когда я открываю сайт?

0 голосов
/ 03 апреля 2020

Может кто-нибудь сказать мне, почему мой будильник срабатывает при открытии сайта?

Вот весь мой код: 

var noon = 12;
var evening = 18;

// Getting it to show the current time on the page
var showCurrentTime = function()
{
    // display the string on the webpage
    var clock = document.getElementById('clock');

    var currentTime = new Date();

    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var meridian = "AM";

    // Set hours
      if (hours >= noon)
      {
          meridian = "PM";
      }

      if (hours > noon)
      {
          hours = hours - 12;
      }

    // Set Minutes
    if (minutes < 10)
    {
        minutes = "0" + minutes;
    }

    // Set Seconds
    if (seconds < 10)
    {
        seconds = "0" + seconds;
    }

    // put together the string that displays the time
    // date
    var d = new Date();
    var mon = new Array(11);
      mon[0] = "January";
      mon[1] = "February";
      mon[2] = "March";
      mon[3] = "April";
      mon[4] = "May";
      mon[5] = "June";
      mon[6] = "July";
      mon[7] = "August";
      mon[8] = "September";
      mon[9] = "October";
      mon[10] = "November";
      mon[11] = "December";
    var weekday = new Array(7);
     weekday[0] = "Sunday";
     weekday[1] = "Monday";
     weekday[2] = "Tuesday";
     weekday[3] = "Wednesday";
     weekday[4] = "Thursday";
     weekday[5] = "Friday";
     weekday[6] = "Saturday";
    var day = weekday[d.getDay()];
    var year = d.getFullYear(); 
    var month = mon[d.getMonth()]; 
    var dayOfMonth = d.getDate();  

    // actual time
    var clockTime = day + ', ' + month + ' ' + dayOfMonth + ', ' + year + ' / ' + hours + ' : ' + minutes + ' : ' + seconds + " " + meridian;
    clock.innerText = clockTime;
};

// Getting the clock to increment on its own

var updateClock = function() {
  var time = new Date().getHours();
  var timeEventJS = document.getElementById("timeEvent");
  showCurrentTime();
};
updateClock();

// Getting the clock to increment once a second

var oneSecond = 1000;
setInterval(updateClock, oneSecond);

var soundAlarm = function (){
  var nowTime = new Date();
  var hours = nowTime.getHours();
  var minutes = nowTime.getMinutes();
  var seconds = nowTime.getSeconds();  
   var selectedAlarmHours = $('#hourSelector').val();
   var selectedAlarmMinutes = $('#minuteSelector').val();
   var selectedAlarmHoursMili = selectedAlarmHours * 360000;
   var selectedAlarmMinutesMili = selectedAlarmMinutes * 60000; 
   var selectedTimeNowAll = selectedAlarmHoursMili + selectedAlarmMinutesMili;
  if (nowTime >= selectedTimeNowAll) {
   document.getElementById('ringtone').play();  
  }  
};

и HTML

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="alarmtest.css">

</head>
<body>

  <audio id="ringtone" src="SamsungS6Mp3Ringtones.mp3" preload="auto" autoplay="false"></audio>  

  <div class="page">
    <header>
      <h1> Clock / Alarm </h1>
    </header>
    <span id="clock"></span>

    <br><br><br><br><br><br><br><br><br>

    <span id="setAlarmTime"><u>Set Alarm Time</u></span>
    <br>
    <select id="hourSelector">
      <option> Set Hours </option>
      <option value = "1"> 1 </option>
      <option value = "2"> 2 </option>
      <option value = "3"> 3 </option>
      <option value = "4"> 4 </option>
      <option value = "5"> 5 </option>
      <option value = "6"> 6 </option>
      <option value = "7"> 7 </option>
      <option value = "8"> 8 </option>
      <option value = "9"> 9 </option>
      <option value = "10"> 10 </option>
      <option value = "11"> 11 </option>
      <option value = "12"> 12 </option>
    </select>
    <select id="minuteSelector">
      <option> Set Minutes </option>
      <option value = "0"> 00 </option>
      <option value = "1"> 01 </option>
      <option value = "2"> 02 </option>
      <option value = "3"> 03 </option>
      <option value = "4"> 04 </option>
      <option value = "5"> 05 </option>
      <option value = "6"> 06 </option>
      <option value = "7"> 07 </option>
      <option value = "8"> 08 </option>
      <option value = "9"> 09 </option>
      <option value = "10"> 10 </option>
      <option value = "11"> 11 </option>
      <option value = "12"> 12 </option>
      <option value = "13"> 13 </option>
      <option value = "14"> 14 </option>
      <option value = "15"> 15 </option>
      <option value = "16"> 16 </option>
      <option value = "17"> 17 </option>
      <option value = "18"> 18 </option>
      <option value = "19"> 19 </option>
      <option value = "20"> 20 </option>
      <option value = "21"> 21 </option>
      <option value = "22"> 22 </option>
      <option value = "23"> 23 </option>
      <option value = "24"> 24 </option>
      <option value = "25"> 25 </option>
      <option value = "26"> 26 </option>
      <option value = "27"> 27 </option>
      <option value = "28"> 28 </option>
      <option value = "29"> 29 </option>
      <option value = "30"> 30 </option>
      <option value = "31"> 31 </option>
      <option value = "32"> 32 </option>
      <option value = "33"> 33 </option>
      <option value = "34"> 34 </option>
      <option value = "35"> 35 </option>
      <option value = "36"> 36 </option>
      <option value = "37"> 37 </option>
      <option value = "38"> 38 </option>
      <option value = "39"> 39 </option>
      <option value = "40"> 40 </option>
      <option value = "41"> 41 </option>
      <option value = "42"> 42 </option>
      <option value = "43"> 43 </option>
      <option value = "44"> 44 </option>
      <option value = "45"> 45 </option>
      <option value = "46"> 46 </option>
      <option value = "47"> 47 </option>
      <option value = "48"> 48 </option>
      <option value = "49"> 49 </option>
      <option value = "50"> 50 </option>
      <option value = "51"> 51 </option>
      <option value = "52"> 52 </option>
      <option value = "53"> 53 </option>
      <option value = "54"> 54 </option>
      <option value = "55"> 55 </option>
      <option value = "56"> 56 </option>
      <option value = "57"> 57 </option>
      <option value = "58"> 58 </option>
      <option value = "59"> 59 </option>
    </select>  



  </div>
  <script src="ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type = "text/javascript" src = "jstest.js"></script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

Свойство autoplay <audio> является флагом, у него нет значения, поэтому: 

 <audio autoplay='false'>

совпадает с 

 <audio autoplay>

, поэтому то же самое, что и 

 <audio autoplay='true'>

, поэтому аудио воспроизводится автоматически при загрузке страницы.

<audio> подробности с примером фрагмента без свойства autoplay:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

и тот же пример с autoplay=false, который воспроизводит звук при нагрузке

https://jsfiddle.net/x49mh5e3/

0 голосов
/ 03 апреля 2020

Можете рассказать подробнее о вашей проблеме, потому что у меня все работает 

var noon = 12; var evening = 18;
var showCurrentTime = function()
{
  
    // display the string on the webpage
    var clock = document.getElementById('clock');

    var currentTime = new Date();

    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var meridian = "AM";

    // Set hours
      if (hours >= noon)
      {
          meridian = "PM";
      }

      if (hours > noon)
      {
          hours = hours - 12;
      }

    // Set Minutes
    if (minutes < 10)
    {
        minutes = "0" + minutes;
    }

    // Set Seconds
    if (seconds < 10)
    {
        seconds = "0" + seconds;
    }

    // put together the string that displays the time
    // date
    var d = new Date();
    var mon = new Array(11);
      mon[0] = "January";
      mon[1] = "February";
      mon[2] = "March";
      mon[3] = "April";
      mon[4] = "May";
      mon[5] = "June";
      mon[6] = "July";
      mon[7] = "August";
      mon[8] = "September";
      mon[9] = "October";
      mon[10] = "November";
      mon[11] = "December";
    var weekday = new Array(7);
     weekday[0] = "Sunday";
     weekday[1] = "Monday";
     weekday[2] = "Tuesday";
     weekday[3] = "Wednesday";
     weekday[4] = "Thursday";
     weekday[5] = "Friday";
     weekday[6] = "Saturday";
    var day = weekday[d.getDay()];
    var year = d.getFullYear(); 
    var month = mon[d.getMonth()]; 
    var dayOfMonth = d.getDate();  

    // actual time
    var clockTime = day + ', ' + month + ' ' + dayOfMonth + ', ' + year + ' / ' + hours + ' : ' + minutes + ' : ' + seconds + " " + meridian;
    clock.innerText = clockTime;
};

// Getting the clock to increment on its own

var updateClock = function() {
  var time = new Date().getHours();
  var timeEventJS = document.getElementById("timeEvent");
  showCurrentTime();
};
updateClock();

// Getting the clock to increment once a second

var oneSecond = 1000;
setInterval(updateClock, oneSecond);

var soundAlarm = function (){
  var nowTime = new Date();
  var hours = nowTime.getHours();
  var minutes = nowTime.getMinutes();
  var seconds = nowTime.getSeconds();  
   var selectedAlarmHours = $('#hourSelector').val();
   var selectedAlarmMinutes = $('#minuteSelector').val();
   var selectedAlarmHoursMili = selectedAlarmHours * 360000;
   var selectedAlarmMinutesMili = selectedAlarmMinutes * 60000; 
   var selectedTimeNowAll = selectedAlarmHoursMili + selectedAlarmMinutesMili;
  if (nowTime >= selectedTimeNowAll) {
   document.getElementById('ringtone').play();  
  }  
}; 
<div id="clock"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...