API tools faq
paste
am_dot_com

SW 2023-04-21

am_dot_com
Apr 21st, 2023 (edited)
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>
  6. Que dia da semana corresponde a esta data?
  7. </title>
  8.  
  9. <!-- ferramentas genéricas -->
  10. <script src="./js/am_util.js"></script>
  11.  
  12. <!-- ferramentas específicas deste sys -->
  13. <script src="./js/4.js"></script>
  14. <script src="./js/ferramentas_datas.js"></script>
  15. </head>
  16. <body>
  17. <section id="idSectionEntrada">
  18. <form id="idFormDDS">
  19. <label for="idAno">Ano:</label>
  20. <input id="idAno"
  21. type="number"
  22. min="1"
  23. step="1"
  24. value="1969"
  25. ><!-- ano -->
  26. <br>
  27.  
  28. <label for="idMes">Mês:</label>
  29. <input id="idMes"
  30. type="number"
  31. min="1"
  32. max="12"
  33. step="1"
  34. value="6"
  35. ><!-- mês -->
  36. <br>
  37.  
  38. <label for="idDia">Dia: </label>
  39. <input id="idDia"
  40. type="number"
  41. min="1"
  42. max="31"
  43. step="1"
  44. value="21"
  45. ><!-- dia -->
  46. <br>
  47. <input type="reset" value="repor valores">
  48. <br>
  49.  
  50. <input type="submit"
  51. value="confirmar data e calcular distância e dia da semana"
  52. ><!-- confirmar -->
  53. </form>
  54. </section>
  55. <hr>
  56. <section id="idSectionRelogio">Aqui aparecerá a distância até hoje, quando confirmar-se a data.</section>
  57. <hr>
  58. <section id="idSectionRespostas">
  59. <!-- Dia da Semana aparecerá aqui -->
  60. <span id="idSpanDDS">Aqui aparecerá feedback, sobre eventos e se a data é (não)válida.</span>
  61. </section>
  62. </body>
  63. </html>
  64.  
  65. ****************
  66.  
  67. // 4.js
  68. window.onload = boot;
  69.  
  70. var idRelogio; // para saber o relógio criado, para poder pará-lo
  71.  
  72. const DIAS_DA_SEMANA_PT = [
  73. "Domingo", "Segunda", "Terça",
  74. "Quarta", "Quinta", "Sexta",
  75. "Sábado"
  76. ]
  77.  
  78. const ID_ANO = "idAno",
  79. ID_MES = "idMes",
  80. ID_DIA = "idDia",
  81. ID_FORM_DDS = "idFormDDS",
  82. ID_SPAN_DDS = "idSpanDDS",
  83. ID_SECTION_RELOGIO = "idSectionRelogio";
  84.  
  85. // objetos de nível de módulo
  86. var oAno, oMes, oDia, oFormDDS,
  87. oSpanDDS, oSectionRelogio; //todos undefined
  88.  
  89. function boot(){
  90. //assocs
  91. oAno = id(ID_ANO);
  92. oMes = id(ID_MES);
  93. oDia = id(ID_DIA);
  94.  
  95. oFormDDS = id(ID_FORM_DDS);
  96. oSpanDDS = id(ID_SPAN_DDS);
  97. oSectionRelogio = id(ID_SECTION_RELOGIO);
  98.  
  99. /*
  100. var a1 = ["coisa", "coisa2"];
  101. var a2 = new Array();
  102. a2.push("coisa");
  103. a2.push("coisa 2");
  104. */
  105.  
  106. var aRelevantes = [
  107. oAno, oMes, oDia, // os inputs
  108. oFormDDS, // not in use
  109. oSpanDDS, // onde aparecerá a resposta
  110. oSectionRelogio
  111. ];
  112.  
  113. var bOK = qualityControl( aRelevantes );
  114.  
  115. if (!bOK) {
  116. window.alert("Objeto relevante indisponível. Fim.");
  117. return;
  118. }
  119.  
  120. //comportamentos
  121. /*
  122. oAno.onchange = ehDarFeedbackSeDataValida;
  123. oMes.onchange = ehDarFeedbackSeDataValida;
  124. oDia.onchange = ehDarFeedbackSeDataValida;
  125. */
  126. oAno.onchange = oMes.onchange =
  127. oDia.onchange = ehDarFeedbackSeDataValida;
  128.  
  129. oAno.onblur = oMes.onblur = oDia.onblur = ehQuandoPerdeFoco;
  130. oAno.onfocus = oMes.onfocus = oDia.onfocus = ehQuandoGanhaFoco;
  131.  
  132. oFormDDS.onsubmit=dds; // alt a ter action no HTML para a form
  133. }// boot
  134.  
  135. function
  136. calcDistanciaRelHojeEmMultiplasUnidades(){
  137. //aceder à data do utilizador
  138. var a,m,d;
  139. a = Number(oAno.value);
  140. m = Number(oMes.value);
  141. d = Number(oDia.value);
  142. var dataUser = new Date(a, m-1, d);
  143.  
  144. var dataAgora = new Date();
  145.  
  146. var distMS = Math.abs(dataAgora-dataUser); // ms
  147. var distS = distMS/1000;
  148. var distM = distS/60;
  149. var distH = distM/60;
  150. var distD = distH/24;
  151.  
  152. //JSON = JavaScript Object Notation
  153. dictDistMultiplasUnidades = {
  154. 'ms':distMS,
  155. 'seg':distS,
  156. 'minutes':distM,
  157. 'hours':distH,
  158. 'days':distD
  159. };
  160. return dictDistMultiplasUnidades;
  161. }//calcDistanciaRelHojeEmMultiplasUnidades
  162.  
  163. function ehQuandoPerdeFoco(pE){
  164. var evento = pE ? pE : window.event;
  165. var onde = evento.target ? evento.target : evento.srcElement;
  166. var idDeOndeEventoAconteceu = onde.id;
  167. var frase = idDeOndeEventoAconteceu+
  168. " perdeu o foco";
  169. oSpanDDS.innerHTML = frase + "<hr>" + oSpanDDS.innerHTML;
  170. return false;
  171. }//ehQuandoPerdeFoco
  172.  
  173. function ehQuandoGanhaFoco(pE){
  174. var evento = pE ? pE : window.event;
  175. var onde = evento.target ? evento.target : evento.srcElement;
  176. var idDeOndeEventoAconteceu = onde.id;
  177. var frase = idDeOndeEventoAconteceu+
  178. " ganhou o foco";
  179. oSpanDDS.innerHTML = frase + "<br>" + oSpanDDS.innerHTML;
  180. return false;
  181. }//ehQuandoPerdeFoco
  182.  
  183. function ehDarFeedbackSeDataValida(pE){
  184. var evento = pE ? pE : window.event;
  185. var onde =
  186. evento.target ? evento.target : evento.srcElement;
  187.  
  188. //onde representa ONDE originou
  189.  
  190. var bMudouAno = onde.id==ID_ANO;
  191. var bMudouMes = onde.id==ID_MES;
  192. var bMudouDia = onde.id==ID_DIA;
  193.  
  194. var a,m,d;
  195. a = Number(oAno.value);
  196. m = Number(oMes.value);
  197. d = Number(oDia.value);
  198.  
  199. var bDataValida = data_valida(
  200. a,m,d
  201. )
  202.  
  203. var strValida = bDataValida ?
  204. "Data OK" : "Data inválida!"
  205.  
  206. //cumulativa
  207. oSpanDDS.innerHTML=
  208. "<br><mark>"+strValida+"</mark>"
  209. /*
  210. +
  211. oSpanDDS.innerHTML;
  212. */
  213.  
  214. return false;
  215. }//ehDarFeedbackSeDataValida
  216.  
  217. function cronometro(){
  218. var ano, mes, dia;
  219. ano = Number(oAno.value);
  220. mes = Number(oMes.value);
  221. dia = Number(oDia.value);
  222. var dataUser = new Date(ano, mes-1, dia);
  223. var dataAgora = new Date();
  224. var ms = Math.abs(dataAgora-dataUser);
  225.  
  226. var seg = ms/1000;
  227. var min = seg/60;
  228. var h = min/60;
  229.  
  230. var d = h/24; //383838.4343 => 0.4343
  231. var dInt = Math.trunc(d);
  232. var dSobrantes = d-dInt;
  233.  
  234. var h = dSobrantes*24;
  235. var hInt = Math.trunc(h);
  236. var hSobrantes = h-hInt;
  237.  
  238. var minutes = hSobrantes*60;
  239. var minutesInt = Math.trunc(minutes);
  240. var minutesSobrantes = minutes-minutesInt;
  241.  
  242. var segundos = minutesSobrantes*60
  243. var segundosInt = Math.trunc(segundos)
  244.  
  245. var fraseChrono = dInt + " dia(s) "+
  246. hInt+ " hora(s) "+
  247. minutesInt + " minuto(s) "+
  248. segundosInt + " segundo(s)";
  249.  
  250. return fraseChrono
  251. }//cronometro
  252. function dds(){
  253. var dds;
  254.  
  255. var ano, mes, dia;
  256. ano = Number(oAno.value);
  257. mes = Number(oMes.value);
  258. dia = Number(oDia.value);
  259.  
  260. var dataCorrespondenteAosInputs =
  261. new Date(
  262. ano,
  263. mes-1,
  264. dia
  265. );
  266.  
  267. var bOK = data_valida(
  268. ano, mes, dia
  269. )
  270.  
  271. if(bOK) {
  272.  
  273. // getDay retorna um int em [0, 6]
  274. dds =
  275. dataCorrespondenteAosInputs.getDay()
  276.  
  277. //oSpanDDS.innerHTML = dds;
  278.  
  279. // alt1 - if-else
  280. if (dds == 0)
  281. frase_dds = "domingo";
  282. else if (dds == 1)
  283. frase_dds = "segunda";
  284. else if (dds == 2) frase_dds = "terça";
  285. else if (dds == 3) frase_dds = "quarta";
  286. else if (dds == 4) frase_dds = "quinta";
  287. else if (dds == 5) frase_dds = "sexta";
  288. else if (dds == 6) frase_dds = "sábado";
  289.  
  290. // alt2 - switch
  291. switch (dds) {
  292. case 0:
  293. frase_dds = "domingo";
  294. break;
  295. case 1:
  296. frase_dds = "segunda";
  297. break;
  298. case 2:
  299. frase_dds = "terça";
  300. break;
  301. case 3:
  302. frase_dds = "quarta";
  303. break;
  304. case 4:
  305. frase_dds = "quinta";
  306. break;
  307. case 5:
  308. frase_dds = "sexta";
  309. break;
  310. case 6:
  311. frase_dds = "sábado";
  312. break;
  313. default:
  314. frase_dds = "dia impossível";
  315. break;
  316. }//switch
  317.  
  318. //alt3 - Arrays
  319. frase_dds = DIAS_DA_SEMANA_PT[dds];
  320.  
  321. oSpanDDS.innerHTML = frase_dds;
  322. }
  323. else{
  324. oSpanDDS.innerHTML = "Não é possível calcular o dia da semana,<br>porque a data NÃO é válida.";
  325. }
  326.  
  327. // dia 2023-04-25
  328. distancias = calcDistanciaRelHojeEmMultiplasUnidades();
  329. strListDistancias = "<ul>";
  330. strListDistancias+="<li>Em dias inteiros: "+
  331. Math.trunc(distancias['days'])+"</li>"
  332. strListDistancias+="<li>Em horas: "+
  333. distancias['hours']+"</li>"
  334. strListDistancias+="<li>Em minutos: "+
  335. distancias['minutes']+"</li>"
  336. strListDistancias += "</ul>";
  337.  
  338. //v1 - dist em múltiplas unidades (todas medindo o mesmo)
  339. //oSectionRelogio.innerHTML = strListDistancias;
  340.  
  341. //v2 - chrono, mas estático
  342. //oSectionRelogio.innerHTML = cronometro()
  343.  
  344. //v3 - chrono, atualizado a cada segundo
  345. idRelogio = window.setInterval(
  346. escrever_cronometro,
  347. 1000 // a cada 1 segundo = 1000 ms
  348. )
  349.  
  350. return false;
  351. }//dds
  352.  
  353. function escrever_cronometro(){
  354. oSectionRelogio.innerHTML = cronometro()
  355. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!