js实现动态数字时钟

1.效果如下

2.html部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS — 实现简单的数字时钟效果</title>
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>
    <div class="demo">
        <span id="nowTime"></span>
    </div>
</body>

3.js部分

<script type="text/javascript">
    var newDate = ‘‘;
    getLangDate();
    function dateFilter(date){ //值小于10时,在前面补0
        if(date < 10){
            return "0"+date;
        }
        return date;
    }

    function getLangDate(){
        var dateObj = new Date(); //表示当前系统时间的Date对象
        var year = dateObj.getFullYear(); //当前系统时间的完整年份值
        var month = dateObj.getMonth()+1; //当前系统时间的月份值
        var date = dateObj.getDate(); //当前系统时间的月份中的日
        var day = dateObj.getDay(); //当前系统时间中的星期值
        var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var week = weeks[day]; //根据星期值,从数组中获取对应的星期字符串
        var hour = dateObj.getHours(); //当前系统时间的小时值
        var minute = dateObj.getMinutes(); //当前系统时间的分钟值
        var second = dateObj.getSeconds(); //当前系统时间的秒钟值
        var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午
        newDate = dateFilter(year)+"-"+dateFilter(month)+"-"+dateFilter(date)+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);
        document.getElementById("nowTime").innerHTML = "当前时间: "+newDate+" "+week;
        setTimeout(getLangDate,1000);
    }
</script>
</html>

原文地址:https://www.cnblogs.com/wenhainan/p/10432342.html

时间: 2025-01-13 23:13:59

js实现动态数字时钟的相关文章

js之数字时钟

以下是我用js写的数字时钟年月日,日期时间的源码,请多指教: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

原生js可爱糖果数字时间特效

效果展示:http://hovertree.com/texiao/js/35/ 数字采用漂亮的糖果皮肤设计 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=&qu

分享一个很有意思的js,动态时钟显示,能跟随鼠标移动

原文:分享一个很有意思的js,动态时钟显示,能跟随鼠标移动 源代码下载地址:http://www.zuidaima.com/share/1550463688182784.htm

JS框架_(Vue.js)带有星期日期的数字时钟

数字时钟效果: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue.js带有星期日期的数字时钟代码</title> <style> html, body { height: 100%; } body { background:#C7C7C7; } p { margin: 0; padding: 0; } #clock { fon

JS — 实现简单的数字时钟

js实现简单的数字时钟 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS — 实现简单的数字时钟效果</title> 6 <link rel="stylesheet" type="text/css" href=""> 7 </head>

JS制作一个创意数字时钟

通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模型,从特殊到一般. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>cnblog头部轮播图</title&

数字时钟小插件

学习js中----今天试着写了下数字时钟. html代码如下: <body style="font-size:50px;background:black;color:#fff;"> <img src="img/1.png"> <img src="img/4.png"> : <img src="img/0.png"> <img src="img/6.png"

桌面小控件的实例-----数字时钟

为了实现一个数字时钟的桌面组件,开发者需要在程序界面上定义8个ImageView,其中6个ImageView用于显示小时.分钟.秒钟的数字,另外两个ImageView用于显示小时.分钟.秒钟之间的冒号. 为了让桌面组件实时的显示当前时间,程序需要每个1秒更新一次程序界面上的6个ImageView,让它们显示当前小时.分钟.秒钟的数字即可. import java.text.SimpleDateFormat;import java.util.Date;import java.util.Timer;

Css3+jQuery打造的一款带动画效果的数字时钟

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Css3+jQuery打造的一款带动画效果的数字时钟丨任E行F9行车记录仪|gopro官网|电影院座椅|</title> <style type="text/css&quo