js实现特别简单的钟表效果_javascript技巧

来源:脚本之家  责任编辑:小易  

<script type="text/javascript">document.write('<div id="time"></div>');function showTime(){var time = new Date();document.getElementById("time").innerHTML=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();}setInterval(showTime,500);</script>拷贝上面代2113码,放在5261time.html文件里面,用浏4102览器打开就可以了1653,js中可以使用5261setInterval()函数实现简单的时钟功能。setInterval(function,millisecond);第一个参4102数是要调用的函数名,第1653二个参数是间隔毫秒数。例如:实现倒计时功能。先定义一个倒计时函数countDown,然后使用setInterval使其每秒执行一次。function countDown(){//每秒显示的时间减去一秒的代码}setInterval(countDown,1000);,<div id="time"></div>function clock() { var time = new Date(); document.getElementById("time").innerHTML=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); setTimeout(clock, 500);}clock();本回答被网友采纳,http://www.17sucai.com/pins/tag/3778.html,function init(){  clock();  setInterval(clock,1000);}function clock(){  var now = new Date();  var ctx = document.getElementById('canvas').getContext('2d');  ctx.save();  ctx.clearRect(0,0,150,150);  ctx.translate(75,75);  ctx.scale(0.4,0.4);  ctx.rotate(-Math.PI/2);  ctx.strokeStyle = "black";  ctx.fillStyle = "white";  ctx.lineWidth = 8;  ctx.lineCap = "round";  // Hour marks  ctx.save();  for (var i=0;i<12;i++){    ctx.beginPath();    ctx.rotate(Math.PI/6);    ctx.moveTo(100,0);    ctx.lineTo(120,0);    ctx.stroke();  }  ctx.restore();  // Minute marks  ctx.save();  ctx.lineWidth = 5;  for (i=0;i<60;i++){    if (i%5!=0) {      ctx.beginPath();      ctx.moveTo(117,0);      ctx.lineTo(120,0);      ctx.stroke();    }    ctx.rotate(Math.PI/30);  }  ctx.restore();    var sec = now.getSeconds();  var min = now.getMinutes();  var hr  = now.getHours();  hr = hr>=12 ? hr-12 : hr;  ctx.fillStyle = "black";  // write Hours  ctx.save();  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )  ctx.lineWidth = 14;  ctx.beginPath();  ctx.moveTo(-20,0);  ctx.lineTo(80,0);  ctx.stroke();  ctx.restore();  // write Minutes  ctx.save();  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )  ctx.lineWidth = 10;  ctx.beginPath();  ctx.moveTo(-28,0);  ctx.lineTo(112,0);  ctx.stroke();  ctx.restore();    // Write seconds  ctx.save();  ctx.rotate(sec * Math.PI/30);  ctx.strokeStyle = "#D40000";  ctx.fillStyle = "#D40000";  ctx.lineWidth = 6;  ctx.beginPath();  ctx.moveTo(-30,0);  ctx.lineTo(83,0);  ctx.stroke();  ctx.beginPath();  ctx.arc(0,0,10,0,Math.PI*2,true);  ctx.fill();  ctx.beginPath();  ctx.arc(95,0,10,0,Math.PI*2,true);  ctx.stroke();  ctx.fillStyle = "#555";  ctx.arc(0,0,3,0,Math.PI*2,true);  ctx.fill();  ctx.restore();  ctx.beginPath();  ctx.lineWidth = 14;  ctx.strokeStyle = '#325FA2';  ctx.arc(0,0,142,0,Math.PI*2,true);  ctx.stroke();  ctx.restore();}www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了js实现钟表效果的具体代码,供大家参考,具体内容如下

<div class="clock"> <div class="circle"></div> <div class="hour"></div> <div class="minutes"></div> <div class="seconds"></div> <!-- 添加数字1-12 --> <div class="nums"> </div> </div>

clock test onload = function(){ var

* { margin: 0; padding: 0; } .clock { position: relative; width: 200px; height: 200px; border: solid 14px rgb(247, 129, 149); border-radius: 50%; margin: 100px auto; background: linear-gradient( rgb(190, 155, 223),pink); } .circle{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; background-color: black; border-radius: 50%; /* 优先显示它 */ z-index: 5; } .hour { position: absolute; left: 49.5%; top: 48px; width: 4px; height: 50px; background-color: blue; /* steps(60)--分60步走*/ animation: run 21600s steps(60) infinite; /* 绕着底部旋转 */ transform-origin: bottom; z-index: 3; } .minutes { position: absolute; left: 49.5%; top: 28px; width: 3px; height: 70px; background-color: rgb(240, 83, 83); animation: run 3600s steps(60) infinite; transform-origin: bottom; z-index: 2; } .seconds { position: absolute; left: 50%; top: 2px; width: 2px; height: 96px; background-color: pink; animation: run 60s steps(60) infinite; transform-origin: bottom; } .ps { width: 100%; height: 100%; } .number { position: absolute; left: 50%; width: 10px; height: 98px; transform-origin: bottom; color: rgb(230, 53, 156); font-weight: bold; font-size: 20px; } .number:last-child { left: 47%; } @keyframes run { 0% { transform: rotate(0); } 100% { transform: rotate(360deg) } }

2013-09-24 怎样用JavaScript 实现的简单时钟 2011-12-09 求js 计时器思路和原理。 3 2017-12-02 呃,想请问一下能否用js实现指针式的时钟效果 更多

<script> var nums = document.querySelector('.nums') var dd = 30; for (var i = 1; i < 13; i++) { // 创建一个div保存数字 var number = document.createElement('div'); number.className = 'number'; // 下标就是对应的数字1-12 number.innerText = i; // 追加到页面中 nums.appendChild(number); // 数字分别旋转对应的角度 number.style.transform = "rotate(" + dd + "deg)"; // 确定要旋转的度数----30deg/60deg/90deg..... if (dd < 360) { dd += 30; } }</script>

function startTime(){var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbers

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

var request; /

你好,在〈2113Head〉〈/Head〉之间5261放置以下脚本: <script language="JavaScript"> <!-- var timerID = null; var timerRunning = false; var id,pause=0,position=0; function stopclock () { if(timerRunning) clearTimeout(timerID); timerRunning = false; } function showtime () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += ((seconds < 10) ? ":0" : ":") + seconds timeValue += (hours >= 12) ? " P.M." : " A.M." document.clock.face.value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true; } function startclock () { stopclock(); showtime(); } //--> </script> (2)在〈4102Body〉属性中加 onLoad="startclock()" (3)在〈Body〉〈/Body〉中间加1653 <form name="clock" onSubmit="0"> <div align="center"> <center><p><input type="text" name="face" size="13" value></p></center> </div> </form> 即可内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js验证表单第二部分
  • javascript中使用new与不使用实例化对象的区别
  • 20分钟打造属于你的bootstrap站点
  • js根据unix时间戳显示发布时间是多久前【项目实测】
  • javascript将双字节字符转换成单字节字符并计算长度
  • javascript中require调用js的实例分享
  • 详解js根据百度地图提供经纬度计算两点距离
  • 输入自动提示搜索提示功能的使用说明:sugggestion.txt
  • 微信小程序实现人脸识别
  • flexigrid在ie下不显示数据的有效处理方法
  • JavaScript 实现的简单时钟?
  • 如何用javascript实现一个时钟?
  • 在JavaScript 如何实现的简单时钟
  • 如何使用JS实现一个简易数码时钟
  • 求一个简单的JavaScript时钟代码
  • 如何使用JavaScript实现制作动态时钟
  • 用JS实现钟表计时器功能
  • JavaScript 简单 计时器运用,实现电子时钟自动走...
  • 实现一个非常简单JS效果
  • js实现一个每秒改变颜色的时钟 急急急
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript绘制简单钟表效果js+css3实现的简易钟表效果示例原生js实现的简单小钟表功能示例利用css+原生js制作简单的钟表详解javascript的date对象(制作简易钟表)js验证表单第二部分javascript中使用new与不使用实例化对象的区别20分钟打造属于你的bootstrap站点js根据unix时间戳显示发布时间是多久前【项目实测】javascript将双字节字符转换成单字节字符并计算长度javascript中require调用js的实例分享详解js根据百度地图提供经纬度计算两点距离输入自动提示搜索提示功能的使用说明:sugggestion.txt微信小程序实现人脸识别flexigrid在ie下不显示数据的有效处理方法js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js删除数组里的某个元素方法js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js关闭当前页面(窗口)的几种方式详解requirejs官方使用教程详解jquery uploadify 上传文件通过构造函数实例化对象的方法js 下拉菜单点击旁边收起实现(踩坑记)js实现探测网站链接的方法【测试可用】javascript 浏览器对象模型bom原理与常见window.open不被拦截的简单实现代码(推荐基于javascript表单脚本(详解)jquery animate()实现背景色渐变效果的处兼容ie与firefox火狐的回车事件(js与jque
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved