Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

javascript - I want showing a message that appears for 5 minutes, until you move to the next time?

0 votes
3.6k views
in Technique[技术] by (71.8m points)

javascript - I want showing a message that appears for 5 minutes, until you move to the next time?

I have a code for tasks when the time expires. Your automatic moves to the next time. I just want it before moving to the next time for a message to appear on the site for 5 minutes before moving to the next time. Is there any help?

This time is counting down when finished. I want a message to appear and be the end event

// AREA DE EVENTS






var Wars =
[
  ["GuildWar-WarLords", [1], ["19:00"]],
  ["GuildWar-EU", [6], ["20:00"]],
  ["GuildWar-BR", [6], ["21:00"]],
  ["GuildWar-US", [6], ["22:00"]],
];
var WarsFull =
[
  ["GuildWar-WarLords", [6], ["19:00"]],
  ["GuildWar-EU", [6], ["20:00"]],
  ["GuildWar-BR", [6], ["21:00"]],
  ["GuildWar-US", [6], ["22:00"]],
];



// AREA DE BOSSES

var bosses =
[
  ["ChaosIncarnation", ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00"]],
  ["NemesisTyrant", "Start every hour at XX:15, XX:45"],
  ["SnowBanshee", "Start every hour at XX:27, XX:57"],
  ["ThrillingSpook", "Start every hour at XX:00, XX:30"],
  ["NetherTyrant", "Start every hour at XX:45"],
  ["BloodyBanshee", "Start every hour at XX:57"],
  ["NetherTyrant", "Start every hour at XX:30"],
  
];
var bossesFull =
 [
  ["ChaosIncarnation", ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00"]],
  ["NemesisTyrant", "Start every hour at XX:15, XX:45"],
  ["SnowBanshee", "Start every hour at XX:27, XX:57"],
  ["ThrillingSpook", "Start every hour at XX:00, XX:30"],
  ["NetherTyrant", "Start every hour at XX:45"],
  ["BloodyBanshee", "Start every hour at XX:57"],
  ["NetherTyrant", "Start every hour at XX:30"],

];

var eventsFull =
[
  ["SquidwardOctopus", ["02:30", "05:30", "08:30", "11:30", "14:30", "17:30", "20:30", "23:30"]],
  ["SkillTournament", ["02:15", "05:15", "08:15", "11:15", "14:15", "17:15", "20:15", "23:15"]],
  ["KingsWar", ["01:15", "04:15", "07:15", "10:15", "13:15", "16:15", "19:15", "22:15"]],
  ["LastManStand", ["00:15", "03:15", "06:15", "09:15", "12:15", "15:15", "18:15", "21:15"]],
  ["TreasureThief", ["02:30", "05:30", "08:30", "11:30", "14:30", "17:30", "20:30", "23:30"]],
  ["BattleField", ["01:30", "04:30", "07:30", "10:30", "13:30", "16:30", "19:30", "22:30"]],
  ["ChristmasAnimation", ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"]],
  ["ClanWar", ["00:48", "01:48", "02:48", "03:48", "04:48", "05:48", "06:48", "07:48", "08:48", "09:48", "10:48", "11:48", "12:48", "13:48", "14:48", "15:48", "16:48", "17:48", "18:48", "19:48", "20:48", "21:48", "22:48", "23:48"]],
  ["EliteGuildWar", ["19:00"]],
  ["ExtremePk", ["19:30"]],
  ["ElitePkTournament", ["19:55"]],
  ["CaptureTheFlag", ["xx:00"]],
  ["WeeklyPk", [3], ["18:00"]],
  ["ClassPK", [3], ["00:00"]]
];


var eventsTime = [

];

function toSeconds(h, m, s) {
  return h * 3600 + m * 60 + s;
}

function DateUTC(offset) {
  var d = new Date();
  var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
  return new Date(utc + (3600000 * offset));
}

function updateEventsTime(eventsTime, divId) {
  var d = DateUTC('2');
  var time = toSeconds(d.getHours(), d.getMinutes(), d.getSeconds());
  
  var html = '';
  for (var i in eventsTime) {
    var line = eventsTime[i];
    
    if (line.length == 2 && typeof(line[1]) == 'object') {
      var j;
      for (j = 0; j < line[1].length; j++)
      {
        var t = line[1][j].split(':');
        t = toSeconds(t[0], t[1], 0);
        
        if (t > time) {
        var h = 'end';
          break;
        }
      }
      
      j = j % eventsTime[i][1].length;
      var t = eventsTime[i][1][j].split(':');
      var diff = toSeconds(t[0], t[1], 0) - time;
      if (diff < 0)
      {
        diff += 3600 * 24;
      }
      
      var h = parseInt(diff / 3600);
      diff -= 3600 * h;
      var m = parseInt(diff / 60);
      var s = diff - m * 60;
      
     
        
         var countdown = '<div class="times"><div class="hour">'+ h +'<p class="under">????</p></div>' + '<div class="hour">' + ("0" + m).slice(-2) + '<p class="under">?????</p></div><div class="hour">' + ("0" + s).slice(-2) + '<p class="under">?????</p></div></div>';

      

    // html += '<tr><td style="padding-left: 40px;"> <div class="team-meta__info"> <h6 class="team-meta__name-simple">' + line[0] + '</h6> </div> </td> <td style="padding-right: 40px;"> <span class="label posts__cat-label" style="float: right; font-size: 10px; color: #292c31;">' + countdown + '</span> </td></tr>';
    
     html += '<div class="cutdowncss"> <span class="title">' + line[0] + ' </span> <span class="time">' + countdown + '</span> </div>';

      
    } else if (line.length == 3) {
      
      var week = [0, 0, 0, 0, 0, 0, 0];
      var weekH = [0, 0, 0, 0, 0, 0, 0];
      for (j in line[1]) {
        var t = line[2][j].split(':');
        t = toSeconds(t[0], t[1], 0);
        week[line[1][j] - 1] = t;
        weekH[line[1][j] - 1] = line[2][j];
      }
      
      var dd = d.getDay();
      var total = 0;
      while (1) {
        if (week[dd] && ((dd == d.getDay() && week[dd] > time) || dd != d.getDay())) {
          
          var w = ['', '', '', '', '', '', ''][dd];
          
          if (dd == d.getDay()) {
            w = '';
          }
          
          var diff = (dd * 24 * 60 * 60 + week[dd]) - (d.getDay() * 24 * 60 * 60 + time);
          
          if (diff < 0) {
            diff += 7 * 24 * 60 * 60;
          }
          
          var days = parseInt(diff / (24 * 60 * 60));
          diff -= days * (24 * 60 * 60);
          var h = parseInt(diff / 3600);
          diff -= 3600 * h;
          var m = parseInt(diff / 60);
          var s = diff - m * 60;
          
          if (days) {
            count = days + 'd ' + h + 'h';
          } else {
            var count = h + ':' + ("0" + m).slice(-2) + ':' + ("0" + s).slice(-2);
          }
    //  html += '<tr><td style="padding-left: 40px;"> <div class="team-meta__info"> <h6 class="team-meta__name-simple">' + line[0] + '</h6> </div> </td> <td style="padding-right: 40px;"> <span class="label posts__cat-label" style="float: right; font-size: 10px; color: #292c31;">' + count + '</span> </td></tr>';
      html += '<li> <a href="">' + line[0] + ' </a> <span>Starts in ' + count + '</span> </li>';
          break;
        }
        
        if (total++ > 8) {
    //  html += '<tr><td style="padding-left: 40px;"> <div class="team-meta__info"> <h6 class="team-meta__name-simple">' + line[0] + '</h6> </div> </td> <td style="padding-right: 40px;"> <span class="label posts__cat-label" style="float: right; font-size: 10px; color: #292c31;">7d</span> </td></tr>';
      html += '<li> <a href="">' + line[0] + ' </a> <span>Starts in 7d</span> </li>';
          break;
        }
        dd = (dd + 1) % 7;
      }
    } else {
    //  html += '<tr><td style="padding-left: 40px;"> <div class="team-meta__info"> <h6 class="team-meta__name-simple">' + line[0] + '</h6> </div> </td> <td style="padding-right: 40px;"> <span class="label posts__cat-label" style="float: right; font-size: 10px; color: #292c31;">' + line[1] + '</span> </td></tr>';
      html += '<li> <a href="">' + line[0] + ' </a> <span>Starts in ' + line[1] + '</span> </li>';
    }
  }
  $('#' + divId).html(html);
}
function EventsTxt(eventsTime, divId) {
  var d = DateUTC('2');
  var time = toSeconds(d.getHours(), d.getMinutes(), d.getSeconds());
  
  var html = '';
  for (var i in eventsTime) {
    var line = eventsTime[i];
    
    
    //  html += '<tr><td style="padding-left: 40px;"> <div class="team-meta__info"> <h6 class="team-meta__name-simple">' + line[0] + '</h6> </div> </td> <td style="padding-right: 40px;"> <span class="label posts__cat-label" style="float: right; font-size: 10px; color: #292c31;">' + line[1] + '</span> </td></tr>';
    
    html += '<li> <a href="">' + line[0] + ' </a> <span>' + line[1] + '</span> </li>';
  
  }
  $('#' + divId).html(html);
}
setInterval(function () {
  updateEventsTime(events, 'c_event');
  updateEventsTime(eventsFull, 'c_eventsfull');

  updateEventsTime(Wars, 'c_Wars');
  updateEventsTime(WarsFull, 'c_Warsfull');

  updateEventsTime(bosses, 'c_bosses');
  updateEventsTime(bossesFull, 'c_bossesfull');
}, 1000);
                        
<style> 
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500&display=swap');

body{
    background:#212026;
    color:#fff;
    font-family: 'Tajawal', sans-serif;

}
.box{
    background:#3D3C41;
    width:50%;
    padding:20px;
    margin:auto;
}
.cutdowncss{
    margin-bottom:15px;

    
}
.cutdowncss .title{
    
    color:#141311;
    
    background:#C19E33;
    width:30%;
    padding:8px;
}
.cutdowncss .title{
    
    color:#141311;
    display:flex;
    background:#C19E33;
    width:30%;
    padding:8px;
    border-radius:15px 15px 0px 0px;
}
.cutdowncss .time{
    
    color:#fff;
    display:flex;
    background:#2E2D33;
    width:80%;
    padding:8px;
    border-radius:0px 15px 15px 0px;
}
.times{
    display:flex;
}
.times .hour{
    background:#1F1F1F;
    padding:15px;
    border-radius:3px;
    margin-right:8px;
    text-align:center;
    width:30px;
    
    
}
.times .hour .under{
    font-size:5px;
    font-weight:blod;
}
</style>                        
                                          <div class="widget red-dark">
                                           
                                           <div class="box">
                                            <div id="divEvents" style="display: block;">
                                                <div id="div1" style="display: block;"><ul class="events" id="c_event"></ul></div>
                                               
                                            </div>
                                            </div>
                                          

                                            <div id="divBosses" style="display: none;">
                                                <div id="div9" style="display: block;"><ul class="events" id="c_bosses"></ul></div>
                                                <div id="div10" style="display: none;"><ul class="events" id="c_bossesfull"></ul></div>
                                                <div class="no-reset">
                                                    <a id="div11" onclick="FunctionsBosses();" style="cursor: pointer; display: block;">View full list</a>
                                                    <a id="div12" onclick="FunctionsBosses();" s

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

56.5k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...