JS练习-简单显示时间

<html>
    <head>
        <title>简单时间显示</title>
        <style>
            div{
                height:60px;
                background-color:lightgray;
            }
        </style>
        <script>
            function showTime(){
                var time=new Date();//创建时间对象,获得当前时间

                var hour,minute,second;//提取时分秒
                hour=time.getHours();
                minute=time.getMinutes();
                second=time.getSeconds();

                //分、秒小于10的时候,应该显示为0*
                minute=checkTime(minute);
                second=checkTime(second);

                var year,month,day;//提取年月日,月从0开始,所以加1
                year=time.getFullYear();//getYear()函数获得的是现在的年份-1900
                month=time.getMonth()+1;
                day=time.getDate();

                var weekday;
                weekday=time.getDay();//星期weekday:weekday=0~6:星期日~星期六
                var weekDays=new Array("日","一","二","三","四","五","六");

                //写入到html
                var x=document.getElementById("p-time");
                var str=year+"年"+month+"月"+day+"日"+" "+"星期"+weekDays[day]+" "+hour+":"+minute+":"+second;
                x.innerHTML=str;

                setTimeout(‘showTime()‘,500);//每500毫秒调用一次showTime函数来刷新。一定注意函数的大小写
            }
            function checkTime(x){
            //这里不能写成var x:
                if(x<10){
                    x=‘0‘+x;
                }
                return x;
            }
        </script>
    </head>
    <body >
        <div>
            <p id="p-time"></p>
        </div>
    </body>
</html>

效果图:

时间: 2024-08-24 07:30:34

JS练习-简单显示时间的相关文章

博客园定制页面(五)——使用自定义JS脚本(公告栏显示时间)

一.js使用方法 使用方法主要分为以下几步: 在本地创建js脚本文件: 博客园的管理——文件——选择文件——上传 然后在设置里面的博客侧边栏公告或者页首Html代码或者页脚Html代码中用自定义的html等代码调用即可. 注意:博客园的js权限需要申请开通.一般先写两篇博客再申请,如果不通过多申请两次即可通过. 二.公告栏钟表显示时间 下面是示例我的博客公告栏的钟表显示的js设置方法: 创建js脚本 上传到自己账户的文件中,然后在博客侧边栏公告调用js脚本 2.1.本地创建js脚本 本地创建名为

js页面实时显示时间

1.通过getMonth()实现获取月份,从0开始计数,需要+1: 2.通过getDay()实现获取星期天数,从0开始,0表示星期日: 3.通过getDate()获取日期. 4.setTimeout(time1,1000);   1秒 5.在div中显示<div id="inn"></div>,使用.innerHTML实现赋值: 在使用<input id="inn" type="text" />,使用.valu

js简单显示动态时间点

<input type="text" id="showtime" redayonly="redayonly" /> <script> function nowGetTime(){ var date=new Date(); document.getElementById("showtime").value=date.getFullYear()+"-"+(date.getMonth()+

JS 显示时间与倒计时练习

显示时间与倒计时 HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>显示系统时间</title> 6 <link rel="stylesheet" href="css/style.css"> 7 </head> 8 9 <body> 10 &

简单的时间显示

效果图: 实现代码: /************************/ /* 简单的时间显示 */ /**********************/ #include <stdio.h> #include <time.h> /*使用sleep()函数用的头文件*/ #include <unistd.h> int main() { int second=0, minute=0, hour=0, time_now=0; while (1) { time_now = ti

js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

js简单显示和隐藏div 01.<!DOCTYPE html> 02.<html> 03.<head> 04.<meta charset="UTF-8"> 05.<title>Insert title here</title> 06.<script type="text/javascript"> 07. window.onload=function(){ 08. document.g

实现简单的时间显示

实现一个简单的时间: <body> <div id="time" style="color=red"> </div> <script> var time=document.getElementById("time"); setInterval("time.innerHTML=new Date().toLocaleString()+'星期'+'日一二三四五六'.charAt(new Date

JS的简单操作和表单以及事件

HTML:主要用于往页面上放置所需要的控件. CSS:主要用来控制页面以及上面控件的样式. JS:主要用来控制页面上的特效以及数据交互. JS也分为顺序,条件(IF()... ELSE()),循环(FOR())三种语句,与C#基本一致. JS定义变量统一用var,定义数组不固定长度和类型,类似C#中的集合. JS的简单操作: DOM操作: 一.window: 1.window.onload 页面打开完再执行后面的操作 2.window.open(1,2,3,4) - 打开新页面, 1 - 打开页

用js制作简单的打地鼠游戏

HTML代码: <body>    <div class="container">        <div class="containerLeft" id="containerLeft">            <div class="gameMenu" id="gameMenu">                <div class="st