JS入门学习,写一个时钟~

<!-- 耽搁了几天,于是又继续回到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="images/0.png" ><img src="images/0.png" ><img src="images/0.png" ><img src="images/0.png" >
    <span>年</span>
    <img src="images/0.png" ><img src="images/0.png" >
    <span>月</span>
    <img src="images/0.png" ><img src="images/0.png" >
    <span>日</span>

  </div>
  <!-- 时间 -->
    <div class="box" id="time">
    <img src="images/0.png" >
    <img src="images/0.png" ><span>:</span>
    <img src="images/0.png" >
    <img src="images/0.png" ><span>:</span>
    <img src="images/0.png" >
    <img src="images/0.png" >
  </div>
  <img id="week" src="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 星期那, 本想 从数组中调用~~ 结果尝试多次都没有成功~ 还是做的图片用此方法来替换。。。以后试试用别的方法来做~~

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

*/

时间: 2024-10-24 00:19:23

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

angular入门-如何写一个服务

服务的好处暂且不讨论,先写, 1.定义模块 2.利用工厂方法写服务 3.注入到controller 1. 1 <!doctype html> 2 <html ng-app="myApp"> 3 <head> 4 <script src="angular.js"></script> 5 <style type="text/css"> 6 .btn{ 7 width: 60px;

Android学习--写一个发送短信的apk,注意布局文件的处理过程!!!

刚开始写Android程序如图发现使用了findViewById方法之后输出的话居然是null(空指针错误),也就是说这个方法没有成功.网上说这样写是在activity_main .xml去找这个ID所代表的控件,而现在使用的ADT在layout下除了activity_main .xml还多生成了一个fragment_main.xml.我就是把控件写在了后一个布局文件中.想请问下,使用什么样的方法是在fragment_main.xml去寻找控件呢? 回答:在PlaceHolderFragment

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

20140506 今天开始学习伟大的开源代表作:Linux内核.之前的工作流于几个简单命令的应用,因着对Android操作系统的情愫,"忍不住"跟随陈利君老师的步伐,开启OS内核之旅.学习路径之一是直接从代码入手,下面来写一个hello.c内核模块. 说明: 这个路径/usr/src/linux-headers-2.6.32-22/include/linux是引用的头文件. 内核模块固定格式:module_init()/ module_exit(),module函数是从头文件中来的.

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

组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅存很少的QA用于系统模块间的集成测试. 因此代码的测试与开发都将由开发者(Developer)来保证. 这就需要借助优秀测试框架的帮助,尤其是支持TDD开发模式的自动化测试框架更为重要,因为我使用的编程是语言是Node.js,那么广泛使用的Mocha.js将成为我的首选. 在团队转型过程中,很多事情

require.js 入门学习 (share)

以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http://requirejs.org/docs/download.html 一篇不错的文章:http://www.csdn.net/article/2012-09-27/2810404 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.

js入门学习

在HTML,CSS学习的最后,开始入门学习javascript, 首先就是去了解它的用途 作用:使web页面能够与用户交互,作为控制浏览器给网页增添活力的方法 定义:它是一种脚本语言,作用于浏览器.和java没有半毛钱关系,主要是当时Netscape公司为了增加影响力改了名,,(是不是感觉很无耻) ps:区分程序的一种方式:1.客户端程序(client-side),像javascript就是,我觉得HTML,CSS应该也是. 2.服务器端程序(server-side),java,perl,php

require.js 入门学习

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></s

require.js 入门学习-备

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></s

js入门学习~ 运动应用小例

要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ ----------------------------------------------------js代码如下 ----------------------------------------------------- //执行函数window.onload = function(){ //声明控制变量 var aDiv = docu