<!-- 耽搁了几天，于是又继续回到JS的学习了~~ 各种头大，加油吧。。。 -->

<!doctype html>
<html>
<head>
<title>数码时钟</title>
<meta charset="gb2312">
<style type="text/css">

　　*{ padding:0; margin:0;}
　　body{background:rgb(0,2,51); color:white;}
　　#box{ width:600px;height:400px; border:1px solid #fff; margin:100px auto; position:relative; }
　　#box>h2{ position:relative; top:30px; font-size:36px; text-align:center;
　　text-shadow:2px 4px 3px #eee;}
　　.box{ width:560px;height:80px; margin:20px auto; margin-left:40px;
　　position:relative; top:40px; text-align: left; vertical-align:middle;}
　　.box>span{font-size: 48px; text-shadow:1px 2px #666;}

　　img{ width:40px;height:60px;position:relative;top:10px;}

　　#box p{text-align:center; position:absolute; bottom:20px; left:250px; font-size:14x; }
　　#week{width:155px; height:88px; position:absolute; left:395px; top:200px;}
</style>
</head>
<body>
　　<div id="box">
　　　　<h2>简易时钟</h2>
　　　　<!-- 日期 -->
　　　　<div class="box" id="date">
　　　　<img src="data:images/0.png" alt=""><img src="data:images/0.png" alt=""><img src="data:images/0.png" alt=""><img src="data:images/0.png" alt="">
　　　　<span>年</span>
　　　　<img src="data:images/0.png" alt=""><img src="data:images/0.png" alt="">
　　　　<span>月</span>
　　　　<img src="data:images/0.png" alt=""><img src="data:images/0.png" alt="">
　　　　<span>日</span>

　　</div>
　　<!-- 时间 -->
　　　　<div class="box" id="time">
　　　　<img src="data:images/0.png" alt="">
　　　　<img src="data:images/0.png" alt=""><span>:</span>
　　　　<img src="data:images/0.png" alt="">
　　　　<img src="data:images/0.png" alt=""><span>:</span>
　　　　<img src="data:images/0.png" alt="">
　　　　<img src="data:images/0.png" alt="">
　　</div>
　　<img id="week" src="data:images2/0.png">

　　<p>fridolph 制作</p>

</div>

<script src="script/shizhong.js"></script>

</html>

-------------------------------------------下面是主要的 js代码 -----------------------------------------------------

function toYear(n){
if(n){return ''+n;}
}
function toMonth(n){
if(n){return 1+n;}
}
function toDouble(n){
if(n<10){
return '0'+n;
}
else{
return ''+n;
}
}

function date_time(){

var oDate = new Date();
var oDbox = document.getElementById('date');
var aImg_date = oDbox.getElementsByTagName('img');
var str_date = toYear(oDate.getFullYear())+toMonth(oDate.getMonth())+toDouble(oDate.getDate());
for(var i=0;i<aImg_date.length;i++){
aImg_date[i].src='images/'+str_date[i]+'.png';
}

var oTbox = document.getElementById('time');
var aImg_time = oTbox.getElementsByTagName('img');
var str_time = toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
for(var i=0; i<aImg_time.length; i++){
aImg_time[i].src='images/'+str_time[i]+'.png';
}

var oWeek = document.getElementById('week');
var str_week = oDate.getDay();
oWeek.src='images2/'+str_week+'.png';
}

window.onload = function(){
setInterval(date_time,1000);
date_time();
}

/* 练习了只有一半= =剩下全是自己琢磨出来的，也是……耗费大量时间。。。 也是醉~~

说下大致思路： 把结构和样式确定了之后， 我们要让时间自动显示出来，为此，我先做了时间的部分~

声明一个str，通过 get时间 拼出现在 表示现在时间的字符串~ 如：06 21 32 分别是时分秒，  为了保证位数正确，要写一个数字小于10添0的函数

遍历字符串，并赋给图片的src~  ( ‘+str_time[i]+’ ) 以此修改src地址来替换显示我们想要的图片（数字）

这部分能完成的话，剩下的部分也同理~~

ps 星期那， 本想 从数组中调用~~ 结果尝试多次都没有成功~ 还是做的图片用此方法来替换。。。以后试试用别的方法来做~~

就暂时到这里吧~~  … 感觉越来越吃不消啊， 还是得多练，多积累~   … 加油啊，坚持就是胜利！

*/

JS入门学习，写一个时钟~的更多相关文章

  1. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

  2. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

  3. 测试驱动开发(TDD)及测试框架Mocha.js入门学习

    组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅 ...

  4. require.js 入门学习 （share）

    以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...

  5. Scheme语言实例入门--怎样写一个“新型冠状病毒感染风险检测程序”

    小学生都能用的编程语言 2020的春季中小学受疫情影响,一直还没有开学,孩子宅在家说想做一个学校要求的研究项目,我就说你做一个怎么样通过编程来学习数学的小项目吧,用最简单的计算机语言来解决小学数学问题 ...

  6. require.js 入门学习－备

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  7. 使用 js，自己写一个简单的滚动条

    当我们给元素加上 overflow: auto;  的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 ...

  8. Linux内核学习--写一个c程序，并在内核中编译，运行

    20140506 今天开始学习伟大的开源代表作:Linux内核.之前的工作流于几个简单命令的应用,因着对Android操作系统的情愫,“忍不住”跟随陈利君老师的步伐,开启OS内核之旅.学习路径之一是直 ...

  9. 使用Node.js原生API写一个web服务器

    Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...

随机推荐

  1. ASP.NET Core开发-获取所有注入(DI)服务

    获取ASP.NET Core中所有注入(DI)服务,在ASP.NET Core中加入了Dependency Injection依赖注入. 我们在Controller,或者在ASP.NET Core程序 ...

  2. 创建javaScript对象的方法

    一.工厂模式 function person (name,age) { var p=new Object(); p.name=name; p.age=age; p.showMessage=functi ...

  3. hibernate中表关系为多对多时，如何只删除中间表数据

    先说问题:我遇到的问题是,在用户和用户组对象关系中他们是多对多关系.所以中间是成在一张中间表的.经理要求当逻辑删除对象数据时,必须删除中间表中的数据. hibernate是面向对象操作sql语句的,如 ...

  4. ElasticSearch+NLog+Elmah实现Asp.Net分布式日志管理

    本文将介绍使用NLOG.Elmah结合ElasticSearch实现分布式日志管理. 一.ElasticSearch简介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布 ...

  5. 十一个行为模式之中介者模式(Mediator Pattern)

    定义: 用一个中介对象(中介者)来封装一系列的对象交互,使各个对象之间不需要显式地相互引用,从而降低耦合度,而且可以独立地改变他们之间的交互关系. 解耦后: 结构图: Mediator:抽象中介者,定 ...

  6. 转移博客到xinqiyang.freeflare.com了,这里会继续更新.

    hi.... 欢迎大家来到这里,这里将转移到github page搭建的博客 http://xinqiyang.freeflare.com 了,现在习惯于实用markdown来写东西了,这样可以脱离浏 ...

  7. AMD and CMD are dead之KMD.js之懒

    缘由 "懒"在软件设计中,有着重大的意义.最常见的两种"懒",便是: 懒得计算 懒得加载 "懒得计算"常见于服务器端: 比如Multipla ...

  8. iOS屏幕尺寸和分辨率了解

    1.截至目前为止,主流的iOS设备屏幕有以下几种: ---------------  iPhone  ---------- --------  iPad ------------ 2.iOS设备屏幕分 ...

  9. html5快速入门（二）—— CSS简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  10. iOS开发之巧用Block和代理方法结合来传值

    好久没写技术博客了,因为996的工作周期已经持续好几个月了.每天晚上回家都没有太多精力学习很多其他的东西,而且很多时候是接着完善工作的项目的模块开发.所以博客停歇了这么久,更新率也低了不少,今天补充一 ...