制作一个简单的时间表
今天，我们来学习如何制作一个简单的时间表吧！
一.首先是布局，我们可以通过设置CSS来对时间表进行设定内容、布局。
在外部设置一个div标签将其他标签包裹起来，就等于是将需要的东西都放进盒子里面。在这里，div标签中放置了span标签（由于span标签是行内标签，因此我们可以在其后面放一个换行标签）和button（按钮）标签。
并且，为了让其好看些许，我们可通过类选择器来选择到需要设置样式的标签进行操作。而这里，我们只需设置div标签的CSS样式即可。
text-alian属性设置的是水平居中，line-height则是内容的行高距离。
然后将写好的代码在浏览器中打开，便可得到下图：
如此，我们的布局便算是完成啦！
二.布局完成之后，就让我们一起来实现它的功能吧！
1.声明变量，获取到HTML中的标签；
2.在onload事件中创建函数、创建日期对象，获取年、月、日、时、分、秒；
3.考虑到0-9是个位数的情况，因此，需要在其前面加上“0”；
4.由于是设置了两个button标签，因此我们还需要为其添加点击事件，
并且在点击事件中为“开始”设置定时器、为“停止”设置停止时间表的功能且添加返回值。
5.点击“开始按钮”之后会执行JS的功能，所以还需要将span标签中的文本用JS重写。可以在“showTime”中写入代码
然后，在浏览器中打开写好的代码，移动鼠标点击“开始”按钮，时间表显示当前电脑时间，再点击“停止”按钮则会停止。
到这里，一个简单的时间表功能便完成了！
Ps：初来乍到，请多多指教，大神勿喷
制作一个简单的时间表相关推荐
- 使用 Flutter 制作一个简单的笑话生成器应用程序
在本教程中,我将向您展示如何使用 Flutter 制作一个简单的笑话生成器应用程序 对于这个项目,我们将从 RESTful API 获取数据 API的链接: 随机笑话 对于这个项目,我不会关注应用程序 ...
- 实例学习SSIS（一）--制作一个简单的ETL包
http://www.cnblogs.com/tenghoo/archive/2009/10/archive/2009/10/archive/2009/10/16/ssis_lookup.html 导 ...
- python计算器教程,用Python程序制作一个简单的计算器
用Python程序制作一个简单的计算器 在此示例中,您将学习创建一个简单的计算器,该计算器可以根据用户的输入进行加,减,乘或除. 要理解此示例,您应该了解以下Python编程主题: 通过函数创建简单计 ...
- 32位mips运算器logisim_大神教你制作一个简单的16位CPU
如何制作一个简单的16位CPU,首先我们要明确CPU是做什么的,想必各位都比我清楚,百度的资料也很全..... 如果想要制作一个CPU,首先得明白下计算机的组成结构(或者计算机的替代品,因为并不是只有 ...
- （译）如何使用GameCenter制作一个简单的多人游戏教程：第一部分
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明.如产生任何纠纷,均与本博客所有人.发表该翻译稿之人无任何关系.谢谢合作 ...
- 数字信号 fft c源码_如何制作一个简单的人体动态识别微信小程序（附源码）
知乎小白第一次写专栏,还请多指教. 先放成果. GitHub源码: lrioxh/HAR-applet-of-Wechatgithub.com b站演示视频: 居然不需要服务器?!如何制作一个简单的 ...
- 用计算机制作动画,如何使用制作工具制作一个简单的Flash动画-电脑自学网
怎么制作Flash动画?通过Adobe Flash我们可以制作出非常有趣好看的动画,也可以制作一键简单的小动画,下面给大家介绍如何使用制作工具制作一个简单的Flash动画. 操作方法: 1.打开fla ...
- 制作一个简单的Chrome extensions并发布到应用商店
制作一个简单的Chrome extensions并发布到应用商店 制作一个简单的Chrome extensions并发布到谷歌商店 一个简单的ShowTime extension 注:工具推荐使用VS ...
- 制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础 本文使用技术: H ...
- 初识Android 制作一个简单的记账本
初识Android 制作一个简单的记账本 主要功能 实现一个记账本页面 可以添加数据并更新到页面中 主要步骤 运行截图 主页面 点击红色按钮弹出添加页面 完成后自动更新到目录下 主要功能 实现一个记账 ...
最新文章
- Filepicker.io
- 医疗影像网络PACS系统方案
- opencv中使用K-近邻分类算法KNN
- 如何在C++中将filetime时间转化为字符串？
- 大剑无锋之Spark中的Driver是什么？【面试推荐】
- 人工智能教程007：创建一个卷积神经网络（2）
- Android模拟器之神奇Genymotion的安装
- Android 百度地图 SDK v3.0.0 （一）
- Android模拟器环境下SD卡内容的管理
- Hyperledger Fabric 节点类型Commiter、Endorser、Leader、Anchor
- 成功解决：loadrunner提示计算机上缺少vc2005_sp1_with_atl_fix_redist
- win7忘记密码不用工具进入
- 快速集成 iMessage（下）
- BAPI_FIXEDASSET_OVRTAKE_CREATE 创建资产并折旧
- Xmanager 6 激活
- 机动目标跟踪—当前统计模型（CS模型）扩展卡尔曼滤波/无迹卡尔曼滤波 matlab实现
- 服务器安装m.2固态硬盘,笔记本怎么安装M.2接口固态硬盘？笔记本M.2接口固态硬盘安装方法...
- 在Controller注入Service报错的解决方法
- 【论文笔记】匹配关系未知情况下点云配准Solving the Blind Perspective-n-Point ProblemEnd-To-End With Robust Differentiabl
- 使用EasyRecovery恢复被格式化的U盘