HTML: use scripts de JavaScript (js) para mostrar tiempo en tiempo real en las páginas web

Hola a todos, mi nombre es wangzirui32, hoy aprenderemos cómo mostrar la hora actual en la página web.
No hay mucho que decir, primero cree un archivo de script js, llamado timeShow.js, el código es el siguiente (vea los comentarios si no entiende):

// 定义time函数
function time(){
    
    
    // 创建一个日期对象
    date = new Date();

    // 获取当前年 需要加上1900
    var year = date.getYear() + 1900;
    // 当前月 需要加上1
    var month = date.getMonth() + 1;
    // 当前日
    var day = date.getDate();

    // 当前星期
    // 说明:getDay返回一个数字,这个数字就是在下方列表的其中一个索引
    var weekdayList = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var weekday = weekdayList[date.getDay()];
    // 当前时
    var hours = date.getHours();
    // 当前分
    var minutes = date.getMinutes();
    // 当前秒
    var seconds = date.getSeconds();
    
    // 由于字符串太长 分为两段来写,效果是一样的
    var write_content = "现在的时间为:" + year + "年" + month + "月" + day + "日" + weekday;
    // 说明:" "是空格,用来隔开星期和小时
    write_content = write_content +  " " + hours + "时" + minutes + "分" + seconds + "秒";
    
    // 将id为timeShow的标签 文本内容设置为write_content字符串的内容
    document.getElementById("timeShow").innerHTML = write_content;
}

// 设置运行间隔 每1000毫秒,也就是1秒运行一次time函数
setInterval(time,1000);

Cree un archivo HTML en el mismo directorio y escriba:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>显示HTML时间</title>
  <script src="timeShow.js"></script>
</head>
<body>
  <div id="timeShow"></div>
</body>
</html>

script carga el archivo de script y luego crea una etiqueta div con un id de timeShow.
Finalmente, también puede reescribir el código en el archivo de script js para obtener la hora en diferentes formatos, como solo obtener el mes y el día, solo obtener la hora, minuto y segundo, etc. Puede probarlo usted mismo, y yo no lo repetiremos aquí.
Abra el navegador, ¡puede ver el tiempo de cambio en tiempo real !
Si no comprende HTML, le sugiero que consulte el artículo del blogger sobre la enseñanza básica del código de etiqueta de la página HTML para ver, si está interesado, puede marcarlo y dar me gusta.

Supongo que te gusta

Origin blog.csdn.net/wangzirui32/article/details/113815878
Recomendado
Clasificación