运用JS的innerHTML，和for循环实现日历小部件内容和日期的转换。

<!DOCTYPE html>

<html>

<head>

    <title>日历小部件</title>

    <style type="text/css">

    *{padding: 0;margin:0;}

    .tab{width:220px;background: #ccc;height: 400px;margin: 0 auto;padding: 10px;}

    ul{width:200px;margin: 0 auto;}

    li{color:#fff;list-style:none;width:50px;height:50px;float: left;background: #444;text-align: center;padding: }

        .active{background: #fff;color: #f00;}

    </style>

    <script type="text/javascript">

        var aDatas=['January快过年了，准备抢票喽！','February','March','April','May','June','July','Aguest','September','October','Novermber','December']
//用数组存储日历备忘录的内容

        window.onload=function(){

            var aLi=document.getElementsByTagName('li');

            var oTxt=document.getElementsByClassName('text')[0];

            for(var i=0;i<aLi.length;i++){

                aLi[i].index=i; //记录当前li的索引值，并赋值给i

                aLi[i].onmouseover=function(){

                    for(var i=0;i<aLi.length;i++){

                        aLi[i].className="";  //鼠标滑过，是li的class为空

                    }

                this.className="active"; //并定义当前li的class为active

                oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>'; //给当前的内容标题获取当前“index+1”值

                };

            }

        }

    </script>

</head>

<body>

    <div class="tab">

<ul id="clander">

        <li class="active"><h2>1</h2></li>

        <li><h2>2</h2></li>

        <li><h2>3</h2></li>

        <li><h2>4</h2></li>

        <li><h2>5</h2></li>

        <li><h2>6</h2></li>

        <li><h2>7</h2></li>

        <li><h2>8</h2></li>

        <li><h2>9</h2></li>

        <li><h2>10</h2></li>

        <li><h2>11</h2></li>

        <li><h2>12</h2></li>

        <div style="clear: both;"></div>

</ul>

<div class="text">

    <h2>1月活动</h2>

    <p>快过年了，准备抢票喽！</p>

</div>

</div>

</body>

</html>

2.利用JS的getHours（）和 getMinutes（）和getSeconds（）获取当前的日期

<!DOCTYPE html>

<html>

<head>

    <title>数码时钟</title>

</head>

<style type="text/css">

    *{margin:0;padding: 0;}

    .alarm{width:500px;margin:0 auto;padding:10px;background: url(images/bg.png)top center no-repeat;height: 600px;color:#fff;font-size: 50px;}

</style>

<script type="text/javascript">

    function toDouble(num){

        if(num<10){

            return "0"+num;

        }

        else{

            return ''+num;

        }

    }

    window.onload=function(){

        // var oBtn=document.getElementById('btn');

        var aImg=document.getElementsByTagName('img');

        function updateTime(){

            var oDate=new Date();

            // var arr=['2','1','3','1','5','3'];

            var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());

            //alert(str);

            for(var i=0;i<aImg.length;i++){

                aImg[i].src='images/'+str.charAt(i)+'.png';//charAt() 方法可返回指定位置的字符。

            }

        }

        setInterval(updateTime,1000);

        updateTime();

    };

</script>

<body>

<div class="alarm">

    <!-- <input id="btn" type="button" value="更新时间"> -->

        <div class="time">

        <img src="data:images/0.png">

        <img src="data:images/0.png">

        点

        <img src="data:images/0.png">

        <img src="data:images/0.png">

        分

        <img src="data:images/0.png">

        <img src="data:images/0.png">

        秒

        </div>

</div>

</body>

</html>

JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）的更多相关文章

  1. 通过JS制作一个简易数码时钟

    设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...

  2. js基础练习三之数码时钟

    这章节有两个实例,1,定时器的使用; 2,数码时钟; 用到的js知识:定时器,Date对象. >>>>>定时器 开启定时器: setInterval 间隔型 setTim ...

  3. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  4. HTML+CSS+JS制作一个黑灰色简约时钟

    HTML+CSS+JS制作一个黑灰色简约时钟 1. 效果图: 2. 特点:这次借鉴了网络上的代码,利用JS动态创建元素,减少html语句的数量,也便于与vue.react等语言进行结合. 3. 代码实 ...

  5. HTML+CSS+JS制作一个灰白色简约时钟

    HTML+CSS+JS制作一个灰白色简约时钟 1. 效果图: 2. 特点:这次借鉴了网络上的代码,利用JS动态创建元素,减少html语句的数量,也便于与vue.react等语言进行结合. 3. 代码实 ...

  6. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  7. JS定时器的使用--数码时钟

    <title>无标题文档</title> <script> function toDou(n){ if(n<10){ return '0'+n; }else{ ...

  8. WPF制作的小时钟

    原文:WPF制作的小时钟 周末无事, 看到WEB QQ上的小时钟挺可爱的, 于是寻思着用WPF模仿着做一个. 先看下WEB QQ的图: 打开VS, 开始动工. 建立好项目后, 面对一个空荡荡的页面, ...

  9. js写个小时钟

    原生js写个小时钟 一.代码 今天美化博客园自学的哈,分享一下 <!--标题变成时钟--> <div id="Header1_HeaderTitle">&l ...

  10. js之数码时钟加随机变色

      HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. Android常用布局之LinearLayout线性布局和RealtiveLayout相对布局

    LinearLayout最常用的属性: id layout_width layout_height background 外边距:layout_margin:也是有好多方向 layout_margin ...

  2. #分类讨论#CF891A Pride

    题目 你有一个长度为 \(n\) 的数列 \(a\),你能执行一些操作. 每个操作是这样的:选择两个相邻的数 \(x\) 和 \(y\),把 它们中的一个 换为 \(\gcd(x,y)\). 问你把数 ...

  3. #阶梯NIM#Poj 1704 Georgia and Bob

    题目 有\(n\)个棋子摆放在x轴的正半轴上, 每次将棋子最多向左移动至上一个棋子之后(不能不移动), 不能操作为败,问先手是不是必胜 分析 这个模型可以转换成阶梯NIM的形式, 那么将奇数位置做NI ...

  4. 上海站报名启动！ 2023年开源产业生态大会OpenHarmony生态分论坛

      作为年内开源领域不容错过的科技盛宴,2023年开源产业生态大会将于12月19日在上海盛大开幕.本次活动由上海市经济和信息化委员会.上海市科学技术协会和"科创中国"开源创新联合体 ...

  5. OpenHarmony父子组件双项同步使用：@Link装饰器

      子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定. 说明: 从API version 9开始,该装饰器支持在ArkTS卡片中使用. 概述 @Link装饰的变量与其父组件中的数 ...

  6. HarmonyOS—使用Web组件加载页面

      页面加载是Web组件的基本功能.根据页面加载数据来源可以分为三种常用场景,包括加载网络页面.加载本地页面.加载HTML格式的富文本数据. 页面加载过程中,若涉及网络资源获取,需要配置ohos.pe ...

  7. Centos 8.0 minimal命令行安装图形化界面（超详细）

    Centos 8.0 安装图形化界面(超详细) 开始之前呢,请先查看您的Centos版本和是否有root账户权限. 一.安装Centos 图形化界面并重启 下载安装图形化界面 执行命令 yum gro ...

  8. .gitignore 基础

    前言 gitignore文件有几种方式生成. 1.在创建版本库的时候生成. 2.自己手动添加: windows环境下,不能把文件直接改名为.gitignore,会提示你必须输入文件名.所以我们先新建一 ...

  9. WPF随笔收录-实时绘制心率曲线

    一.前言 在自己的项目中,涉及到实时心率曲线的绘制,项目上的曲线绘制,一般很难找到能直接用的第三方库,而且有些还是定制化的功能,所以还是自己绘制比较方便.很多人一听到自己画就害怕,感觉很难,今天就分享 ...

  10. HL7消息类型

    HL7消息有很多不同的类型,每种都有其自己的独特用途和消息内容.以下是常见的HL7消息类型的列表. Message Type Description HL7 ADT Admit, Discharge ...