运用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. 福州大学MEM 备考总结

    自己的基本情况 2022年8月2日,当天觉得休息的差不多了,思来想去,觉得考研是个不错的选择,和女朋友聊了一下,得到她的支持,于是乎定下目标.接着就是开始在网络上查找相关的材料,先把要报考高校和专业的 ...

  2. IDEA 2018 激活（UMTIMATE）

    IDEA延长使用期限 这是我的软件About,2018版本,延期至2089. 先下载压缩包解压后得到jetbrains-agent.jar. 下载页面:https://zhile.io/2018/08 ...

  3. 数组栈（ArrayStack）

    栈   栈是一种线性结构,相比与数组,栈对应的操作时数组的子集,只能从一端添加元素,也只能从一端取出元素,是一种 后进先出(Last In First Ou,LIFO) 的数据结构. push pop ...

  4. 学习Source Generators之输出生成的文件

    上一篇文章学习了通过获取和解析swagger.json的内容,来生成API的请求响应类. 但是其中无法移动与编辑. 那么本文将介绍如何输出生成的文件. EmitCompilerGeneratedFil ...

  5. #线性筛，哈希#CF1225D Power Products

    题目 给定一个长度为 \(n\) 的正整数序列 \(a\),问有多少对 \((i,j),i<j\) 使得存在一个整数 \(x\) 满足 \(a_i\times a_j=x^k\) 分析 将 \( ...

  6. #结论#洛谷 3199 [HNOI2009]最小圈

    题目 求有向图最小平均权值回路. \(n\leq 3*10^3,m\leq 10^4\) 分析 设 \(f_k(x)\) 表示从点 \(x\) 出发恰好走 \(k\) 条边的最短路, 那么答案就是 \ ...

  7. 一文弄懂EnumMap和EnumSet

    目录 简介 EnumMap 什么时候使用EnumMap EnumSet 总结 一文弄懂EnumMap和EnumSet 简介 一般来说我们会选择使用HashMap来存储key-value格式的数据,考虑 ...

  8. 深入理解java的泛型

    目录 简介 泛型和协变 泛型在使用中会遇到的问题 类型擦除要注意的事项 总结 简介 泛型是JDK 5引入的概念,泛型的引入主要是为了保证java中类型的安全性,有点像C++中的模板. 但是Java为了 ...

  9. MogDB/openGauss 开机自启动

    MogDB/openGauss 开机自启动 在 centos7.6 操作系统上设置 MogDB/openGauss 开机自启动,我们先来了解一下自定义服务的配置文件组成部分,共分为[Unit].[Se ...

  10. openGauss数据库源码学习-指标采集、预测与异常检测

    opengauss 源码解析 指标采集.预测与异常检测 代码位置:/gausskernel/dbmind/tools/anomaly_detection 各模组在整体结构上的组合在摩天轮论坛上官方解析 ...