运用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. Python 潮流周刊第 44 期（摘要）+ 赠书 5 本《明解Python算法与数据结构》

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  2. C# Break 和 Continue 语句以及数组详解

    C# Break 它被用于"跳出" switch 语句. break 语句也可用于跳出循环. 以下示例在 i 等于 4 时跳出循环: 示例: for (int i = 0; i & ...

  3. JS 取Json中对象特定属性值

    解析JSON JSON 数据 var str = '[{"a": "1","b": "2"}, {"a&quo ...

  4. openGauss/MogDB 学习笔记之 -- PITR恢复

    openGauss/MogDB 学习笔记之 -- PITR 恢复 概念描述 背景信息 当数据库崩溃或希望回退到数据库之前的某一状态时,MogDB 的即时恢复功能(Point-In-Time Recov ...

  5. SpringBoot+阿里云OCR图片识别

    准备条件:阿里云OCR图片识别API购买,初次购买1分钱500次接口调用 一.控制层 @GetMapping("/uploadManual") @ApiOperation(&quo ...

  6. .NET服务发现(Microsoft.Extensions.ServiceDiscovery)集成Consul

    随着Aspire发布preview5的发布,Microsoft.Extensions.ServiceDiscovery随之更新, 服务注册发现这个属于老掉牙的话题解决什么问题就不赘述了,这里主要讲讲M ...

  7. Hypium框架使能ArkTS应用高效测试

     原文链接:https://mp.weixin.qq.com/s/Ncc-x_4zy4wBZmSjknw1lQ,点击链接查看更多技术内容:   HarmonyOS发布了声明式开发框架ArkUI,带来了 ...

  8. 【01】微服务（Microservice）是什么？为什么会出现微服务？

    微服务(Microservice)虽然是当下刚兴起的比较流行的新名词,但本质上来说,微服务并非什么新的概念. 实际上,很多 SOA(面向服务的架构)实施成熟度比较好的企业,已经在使用和实施微服务了.只 ...

  9. sql 语句系列(记录时间差)[八百章之第十八章]

    计算当前记录和下一条记录之间的日期差 关键点在于如何获得下一条日期. mysql 和 sql server select x.*,DATEDIFF(day,x.HIREDATE,x.next_hd) ...

  10. redis 简单整理——redis 的哈希基本结构和命令[三]

    前言 简单介绍一下哈希基本结构和命令. 正文 什么是hash呢? hash也可以叫做字典.关联数组. 哈希类型是键本身又是一个键值对结构: value={{field1,value1},...{fie ...