当前位置: 首页 > article >正文

网页制作13-Javascipt时间特效の显示动态时间

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>显示当前时间</title>
</head>
<body onload="startTime()">
<form name="formclock" onSubmit="0">
	<input type="text" name="show" size="10" style="background-color:pink;border-width:3;"></form>
<div id="txt"></div>

<script>
function startTime() {
    var today = new Date();//获得现在时间
    var h = today.getHours();//抽取小时
    var m = today.getMinutes();//抽取分钟
    var s = today.getSeconds();//抽取秒数
	
	var amatime=""+((h>12)?h-12:h);//小时赋值;
	amatime+=((m<10)?":0":":")+m;//分钟赋值;
	amatime+=((s<10)?":0":":")+s;//秒钟赋值;
	
	amatime+=((h<12)?"am":"pm");//判断上午下午
	
    // 在 numbers<10 的数字前加上 0
    m = checkTime(m);
    s = checkTime(s);
	
    document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;
	
    var t = setTimeout(function(){ startTime() }, 500);//自动调佣函数更新;
	
	document.forms["formclock"]["show"].value=amatime;//把时间放进表单内
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
	
</script>
</body>
</html>

效果显示: 


http://www.kler.cn/a/586765.html

相关文章:

  • 深入理解 Xtensa 架构 ESP32 内存架构(SRAM、IRAM、IROM、DRAM、DROM详解)
  • Linux 终端快捷键 / 键盘快捷键
  • 【c语言数组精选代码题】
  • 【机器学习】机器学习工程实战
  • 【R语言】pmax和pmin函数的用法详解
  • 2025-3-14 leetcode刷题情况(贪心算法)
  • 开发、科研、日常办公工具汇总(自用,持续更新)
  • MATLAB中events函数用法
  • Linux系统之美:进程初识
  • 蓝桥杯 阶乘求值【省模拟赛】
  • 谷歌Chrome或微软Edge浏览器修改网页任意内容
  • C++笔记-类与对象(中)
  • 二分+前缀和/滑动窗口——成绩统计
  • 神经网络:定义与核心原理
  • 基于 Verilog 的多路复用显示驱动设计与测试:实践与探索
  • Visual Studio里的调试(debugging)功能介绍
  • Tomato靶机
  • Vue 中的 v-for 如何遍历对象?
  • 【模拟算法】
  • misc19~21