javascript实现智能手环时间显示


Posted in Javascript onSeptember 18, 2020

本文实例为大家分享了javascript实现智能手环时间显示的具体代码,供大家参考,具体内容如下

javascript实现智能手环时间显示

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  #shijian{
   width: 500px;height: 120px;background-color:#117dbb;
   margin: 50px auto;line-height: 120px;
   color: white;font-size: 22px;
   text-align: center;
   border-radius: 60px;
   box-shadow:#4f535a 0px 5px 10px;
  }
 </style>
</head>
<body>
 <div id ="shijian">显示当前时间</div>
 <script>
  function showtime(){
   var a = new Date()
   var year = a.getFullYear()
   var month =jiaLing(a.getMonth()+1) 
   var day =jiaLing(a.getDate()) 
   var week = weekUp(a.getDay()) 
   var houer =jiaLing(a.getHours()) 
   var minute =jiaLing(a.getMinutes()) 
   var second =jiaLing(a.getSeconds()) 
   var str=year+"年"+month+"月"+day+"日 星期"+week+" " +houer+"时"+minute+"分"+second+"秒"
   return str;
  }
  function weekUp(i){
   var arr = ["日","一","二","三","四","五","六"]
   return arr[i]
  }
  function jiaLing(i){
   if(i<10){
    return "0"+i;
   }else{
    return i;
   }
  }
  setInterval(function(){
   var oDiv= document.getElementById("shijian");
   oDiv.innerHTML = showtime()
  },1000)
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
javascript实现打砖块小游戏(附完整源码)
Sep 18 #Javascript
js实现拖拽与碰撞检测
Sep 18 #Javascript
详解JavaScript 的执行机制
Sep 18 #Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 #Javascript
React倒计时功能实现代码——解耦通用
Sep 18 #Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 #Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 #Javascript
You might like
PHP调用三种数据库的方法(3)
2006/10/09 PHP
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JavaScript window.location对象
2014/11/14 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
小程序实现投票进度条
2019/11/20 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
python文件路径操作方法总结
2020/12/21 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
手机被没收检讨书
2014/02/22 职场文书
气象学专业个人求职信
2014/03/15 职场文书
殡葬服务心得体会
2014/09/11 职场文书
酒店辞职书范文
2015/02/26 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫