JavaScript的简单应用

最新推荐文章于 2024-10-18 17:51:23 发布

小李学废了

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量892

点赞数 19

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_78596239/article/details/136530428

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个简单的电子时钟，包括界面布局、样式设计以及动态显示当前时间的功能。作者展示了从整体设计、时分秒显示框到JavaScript代码实现的步骤。

摘要由CSDN通过智能技术生成

电子时钟的设计与实现

1.1界面设计

主要介绍电子时钟的网页布局和样式设计，使用了<div>标签划分区域并配合CSS样式完成整个页面设计效果。效果图如下：

1.1.1整体设计

首先直接使用区域元素<div>创建电子时钟区域,并在页面上添加标题、水平线。相关HTML5代码片段如下:

<body>

<h3>简单电子时钟的设计与实现</h3>

<hr />

</body>

该段代码为<div>元素定义了id="clock"，以便可以使用CSS的 ID选择器进行样式设置。

本例使用CSS外部样式表规定页面样式。在本地css文件夹中创建clock.css文件，并在<head>首尾标签中声明对CSS文件的引用。相关HTML5代码片段如下:

<head>

<title>简单电子时钟的设计与实现</title>

<link rel="stylesheet" href="css/clock.css">

</head>

在CSS文件中为<div>标签设置样式，具体样式要求如下。

·尺寸:宽度为800像素;

·字体:字体颜色为白色，字体大小为80像素，加粗显示;

·文本:居中显示，字体采用了默认格式;

·边距:各边的外边距为20像素。

1.1.2时分秒显示框的设计

在id="clock"的<div>元素内部添加3个<div>子元素用于显示时分秒的具体数字,并为其分别设置自定义id名称为h、m、s（取 hour、minute和second的首字母)。

1.2时钟动态效果的实现

1.2.1获取显示框对象

首先在<body>首尾标签内部添加<script>区域，并使用document.getElementById()方法获取用于显示时分秒的3个显示框对象。相关HTML5代码如下:

// 获取显示小时的区域框对象

let hour = document.getElementById("h");

// 获取显示分钟的区域框对象

let minute = document.getElementById("m");

// 获取显示秒的区域框对象

let second = document.getElementById("s");

</script>

1.2.2创建函数getCurrentTime()获取当前时间

在JavaScript中创建自定义函数方法 getCurrentTime()，用于获取当前时间并显示在页面中。相关JavaScript代码如下:

// 获取当前时间

function getCurrentTime() {

let date = new Date();

let h = date.getHours();

let m = date.getMinutes();

let s = date.getSeconds();

if (h < 10) h = "0" + h; //以确保0~9时也显示成两位数

if (m < 10) m = "0" + m; //以确保0~9时也显示成两位数

if (s < 10) s = "0" + s; //以确保0~9时也显示成两位数

hour.innerHTML = h;

minute.innerHTML = m;

second.innerHTML = s;

}

</script>

在该段代码中首先使用了JavaScript中的 Date对象获取当前时间的时分秒具体数值，为确保每次均显不成网位数的效果，分别判断当前时分秒是否小于10，如果比10小则在前面加一个数子0，然后将修改后的数值使用innerHTML属性显示到对应的时间显示框中。

1.2.3添加setInterval()方法

最后在JavaScript代码部分添加setInterval()方法，设置成每秒钟重新调用一次获取当前时间并显示在页面上的getCurrentTime()函数。相关JavaScript 代码如下:

// 每秒更新一次时间

setInterval("getCurrentTime()", 1000);

其中，第1个参数表示的是需要调用的函数名称;第2个参数表示的是间隔时间，其单位为毫秒，1000毫秒=1秒。

运行效果如图所示：

(a)页面首次加载时的效果

(b)时钟显示的数字动态变化的效果

1.3完整代码展示

完整的HTML代码如下：

<!DOCTYPE html>

<head>

<title>简单电子时钟的设计与实现</title>

</head>

<body>

<h3>简单电子时钟的设计与实现</h3>

<hr />

</div>

// 获取显示小时的区域框对象

let hour = document.getElementById("h");

// 获取显示分钟的区域框对象

let minute = document.getElementById("m");

// 获取显示秒的区域框对象

let second = document.getElementById("s");

// 获取当前时间

function getCurrentTime() {

let date = new Date();

let h = date.getHours();

let m = date.getMinutes();

let s = date.getSeconds();

if (h < 10) h = "0" + h; //以确保0~9时也显示成两位数

if (m < 10) m = "0" + m; //以确保0~9时也显示成两位数

if (s < 10) s = "0" + s; //以确保0~9时也显示成两位数

hour.innerHTML = h;

minute.innerHTML = m;

second.innerHTML = s;

}

// 每秒更新一次时间

setInterval("getCurrentTime()", 1000);

</script>

</body>

</html>

完整的CSS代码如下：

/* 电子时钟的总样式设置 */

#clock {

width: 800px;

font-size: 80px;

font-weight: bold;

color: red;

text-align: center;

margin: 20px;

}

/* 时分秒数字区域的样式设置 */

.box1 {

margin-right: 10px;

width: 100px;

height: 100px;

line-height: 100px;

float: left;

border: gray 1px solid;

}

/* 冒号区域的样式设置 */

.box2 {

width: 30px;

float: left;

margin-right: 10px;

}

小李学废了

关注

19
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫