运用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爬虫爬取国家统计局网站【统计用区划和城乡划分代码】并存入MySQL数据库

    国家统计局网站相关分级页面截图 基本思路 爬取每个页面的a标签内容,生成省市两级数据字典,最后合成区县对应的链接,爬取第三层区划代码和名字,结合省市两级名字生成最后的标准. 代码 1 import p ...

  2. 运维排查 | Systemd 之服务停止后状态为 failed

    哈喽大家好,我是咸鱼. 我们知道 CentOS 7 之后,Systemd 代替了原来的 SystemV 来管理服务,相比 SystemV ,Systemd 能够很好地解决各个服务间的依赖关系,还能让所 ...

  3. ChatGPT商用网站源码+支持ai绘画(Midjourney)+GPT4.0+GPT3.5key绘画+Prompt角色+实时语音识别输入+后台一键版本更新！

    ChatGPT商用网站源码+支持ai绘画(Midjourney)+GPT4.0+GPT3.5key绘画+Prompt角色+实时语音识别输入+后台一键版本更新! 1.网站系统源码介绍: 程序已支持Cha ...

  4. char * 、BSTR、long、wchar_t *、LPCWSTR、string、QString、CStringA类型转换

    char* 转 BSTR char* s1 = "zhangsan"; CString s2 = CString(s1); BSTR s3 = s2.AllocSysString( ...

  5. css实现带背景颜色的小三角

    <div id="first"> <p>带背景颜色的小三角实现是比较简单的</p> <span id="top"> ...

  6. 响应式系统与 React

    0x1 React 的历史与应用 应用场景 前端应用开发,如 Meta.Ins.Netflix 的网页版 移动原生应用开发,如 Ins.Discord 结合 Electron 进行桌面应用开发 发展历 ...

  7. Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案。此项目包含开发分布式应用服务的必需组件-Nacos 、Sentinel等

    概述 Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用服务的必需组件. 方便开发者通过 Spring Cloud 编程模型轻松使用这些组件来开发 ...

  8. (二)asyncio的简单使用，python异步高效处理数据，asyncio.get_event_loop()，loop.run_until_complete(main())，loop.close()

    Asyncio 是一个基于事件循环的异步I/O框架,它提供了高效的协程实现,能够轻松地编写高并发的Python程序.Asyncio 在 Python 3.4 中首次引入,它的核心是事件循环(Event ...

  9. 使用pycuda替换字符串，使用cuda替换字符串

    写一个python的cuda程序,实现字符串列表的字符串替换,把所有的123替换成xinyuuliu 以下是一个简单的 Python CUDA 代码示例,用于实现字符串列表的字符串替换.它使用了 NV ...

  10. 力扣595(MySQL)-大的国家（简单）

    题目: World 表: 如果一个国家满足下述两个条件之一,则认为该国是 大国 : 面积至少为 300 万平方公里(即,3000000 km2),或者人口至少为 2500 万(即 25000000)编 ...