首页 考试吧论坛 Exam8视线 考试商城 网络课程 模拟考试 考友录 实用文档 求职招聘 论文下载
2011中考 | 2011高考 | 2012考研 | 考研培训 | 在职研 | 自学考试 | 成人高考 | 法律硕士 | MBA考试
MPA考试 | 中科院
四六级 | 职称英语 | 商务英语 | 公共英语 | 托福 | 雅思 | 专四专八 | 口译笔译 | 博思 | GRE GMAT
新概念英语 | 成人英语三级 | 申硕英语 | 攻硕英语 | 职称日语 | 日语学习 | 法语 | 德语 | 韩语
计算机等级考试 | 软件水平考试 | 职称计算机 | 微软认证 | 思科认证 | Oracle认证 | Linux认证
华为认证 | Java认证
公务员 | 报关员 | 银行从业资格 | 证券从业资格 | 期货从业资格 | 司法考试 | 法律顾问 | 导游资格
报检员 | 教师资格 | 社会工作者 | 外销员 | 国际商务师 | 跟单员 | 单证员 | 物流师 | 价格鉴证师
人力资源 | 管理咨询师考试 | 秘书资格 | 心理咨询师考试 | 出版专业资格 | 广告师职业水平
驾驶员 | 网络编辑
卫生资格 | 执业医师 | 执业药师 | 执业护士
会计从业资格考试会计证) | 经济师 | 会计职称 | 注册会计师 | 审计师 | 注册税务师
注册资产评估师 | 高级会计师 | ACCA | 统计师 | 精算师 | 理财规划师 | 国际内审师
一级建造师 | 二级建造师 | 造价工程师 | 造价员 | 咨询工程师 | 监理工程师 | 安全工程师
质量工程师 | 物业管理师 | 招标师 | 结构工程师 | 建筑师 | 房地产估价师 | 土地估价师 | 岩土师
设备监理师 | 房地产经纪人 | 投资项目管理师 | 土地登记代理人 | 环境影响评价师 | 环保工程师
城市规划师 | 公路监理师 | 公路造价师 | 安全评价师 | 电气工程师 | 注册测绘师 | 注册计量师
缤纷校园 | 实用文档 | 英语学习 | 作文大全 | 求职招聘 | 论文下载 | 访谈 | 游戏
您现在的位置: 考试吧(Exam8.com) > 软件水平考试 > 复习资料 > 网页制作 > 正文

网页特效:一个JavaScript时钟(指针式样的)

  要完成此效果需要三个步骤

  第一步:把如下代码加入到<head>区域中

  <script language=javascript>
  <!--
  pX=400;pY=200
  obs = new Array(13)
  function ob () {
   for (i=0; i<13; i++) {
    if (document.all) obs[i]=new Array (eval(‘ob‘+i).style,-100,-100)
    else obs[i] = new Array (eval(‘document.ob‘+i),-100,-100)
   }
  }
  function cl(a,b,c){
   if (document.all) {
    if (a!=0) b+=-1
    eval(‘c‘+a+‘.style.pixelTop=‘+(pY+(c)))
    eval(‘c‘+a+‘.style.pixelLeft=‘+(pX+(b)))
   }
   else{
    if (a!=0) b+=10
    eval(‘document.c‘+a+‘.top=‘+(pY+(c)))
    eval(‘document.c‘+a+‘.left=‘+(pX+(b)))
   }
   if (document.all) c0.style.pixelLeft=26
  }
  function runClock() {
   for (i=0; i<13; i++) {
    obs[i][0].left=obs[i][1]+pX
    obs[i][0].top=obs[i]+pY
   }
  }
  var lastsec
  function timer() {
   time = new Date ()
   sec = time.getSeconds()
   if (sec!=lastsec) {
    lastsec = sec
    sec=Math.PI*sec/30
    min=Math.PI*time.getMinutes()/30
    hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360
    for (i=1;i<6;i++) {
     obs[i][1] = Math.sin(sec) * (44 - (i-1)*11)-16;
     if (document.layers)obs[i][1]+=10;
     obs[i] = -Math.cos(sec) * (44 - (i-1)*11)-27;
    }
    for (i=6;i<10;i++) {
     obs[i][1] = Math.sin(min) * (40 - (i-6)*10)-16;
     if (document.layers)obs[i][1]+=10;
     obs[i] = -Math.cos(min) * (40 - (i-6)*10)-27;
    }
    for (i=10;i<13;i++) {
     obs[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16;
     if (document.layers)obs[i][1]+=10;
     obs[i] = -Math.cos(hr) * (37 - (i-10)*11)-27;
    }
   }
  }|||  function setNum(){
   cl (0,-67,-65);
   cl (1,10,-51);
   cl (2,28,-33);
   cl (3,35,-8);
   cl (4,28,17);
   cl (5,10,35);
   cl (6,-15,42);
   cl (7,-40,35);
   cl (8,-58,17);
   cl (9,-65,-8);
   cl (10,-58,-33);
   cl (11,-40,-51);
   cl (12,-16,-56);
  }
  //-->
  </script>

  第二步:把如下代码加入到<body>区域中

  <div id="c0" style="position:absolute;right:6;top:33px; z-index:2;; left: 24px">
  </div>
  <div id="c1" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>1</b></div>
  <div id="c2" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>2</b></div>
  <div id="c3" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>3</b></div>
  <div id="c4" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>4</b></div>
  <div id="c5" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>5</b></div>
  <div id="c6" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>6</b></div>
  <div id="c7" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>7</b></div>
  <div id="c8" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>8</b></div>
  <div id="c9" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>9</b></div>
  <div id="c10" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>10</b></div>
  <div id="c11" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>11</b></div>
  <div id="c12" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>12</b></div>
  <div id="ob0" style="position:absolute;left:-20;top:-20;z-index:1">  </div>
  <div id="ob1" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
  <div id="ob2" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
  <div id="ob3" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
  <div id="ob4" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
  <div id="ob5" style="position:absolute;left:-19px;top:31px;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
  <div id="ob6" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
  <div id="ob7" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
  <div id="ob8" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
  <div id="ob9" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
  <div id="ob10" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>
  <div id="ob11" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>
  <div id="ob12" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>

  第三步:把“onLoad="ob(),setNum(),setInterval(‘timer()‘,100);setInterval(‘runClock()‘,100)"”加在<body>标记里

  例如:<body onLoad="ob(),setNum(),setInterval(‘timer()‘,100);setInterval(‘runClock()‘,100)">

1 2  下一页
文章搜索
软件水平考试栏目导航
版权声明:如果软件水平考试网所转载内容不慎侵犯了您的权益,请与我们联系800@exam8.com,我们将会及时处理。如转载本软件水平考试网内容,请注明出处。