运用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. 【Java】快速排序

    代码: 1 public static void quickSort(int[] arr) { 2 if (arr == null || arr.length < 2) { 3 return; ...

  2. Python正则表达式提取方法

  3. 提高生产力！这10个Lambda表达式必须掌握，开发效率嘎嘎上升！

    在Java8及更高版本中,Lambda表达式的引入极大地提升了编程的简洁性和效率.本文将围绕十个关键场景,展示Lambda如何助力提升开发效率,让代码更加精炼且易于理解. 集合遍历 传统的for-ea ...

  4. Docker学习路线9：运行容器

    要启动一个新的容器,我们使用 docker run 命令,后跟镜像名称.基本语法如下: docker run [选项] 镜像 [COMMAND] [ARG...] 例如,要运行官方的 Nginx 镜像 ...

  5. HMS Core助力同程旅行，打造更贴心的用户出行体验

    作为中国在线旅行行业的创新者,同程旅行聚焦年轻.时尚.个性的消费群体,致力于为用户提供更便捷.聪明.安全的出行服务.近年来,同程旅行通过人工智能等创新科技的应用将平台原本的交易撮合角色转变为" ...

  6. openGauss3.1.0企业版HA环境部署测试

    前言 openGauss 是华为开源的一款高性能关系型数据库,这两年感觉 pg 系的数据库在国内慢慢火起来了,pg 的操作还是跟 mysql 和 oracle 略有差距,还得慢慢学,先从部署开始吧.对 ...

  7. 94个JS/eTS开源组件首发上新，肯定有你要用的一款！

    原文:https://mp.weixin.qq.com/s/6RdxNisTQoyPds811PNZKA,点击链接查看更多技术内容. 2021年的华为开发者大会(HDC2021)上,我们发布了新一代的 ...

  8. 想学习eTS开发？教你开发一款IQ-EQ测试应用

    原文:https://mp.weixin.qq.com/s/eZgifjirAW58dFCa0W7kSQ,点击链接查看更多技术内容. 开发者Mack基于HarmonyOS的ArkUI框架开发的IQ- ...

  9. ContOS7搭建RAID-0磁盘阵列

    RAID-0条带数据: 优点:2块硬盘同时在写数据,而且各写各的不影响,速度较快:性能提升2倍(理论): 缺点:服务器硬盘特别容易损坏,一点损坏一个,其余不能用:没有容错性:服务器用的不多,都是配合使 ...

  10. java 后台获取文件上传的真实扩展名

    package common.util; import java.io.File; import org.apache.commons.io.FileUtils; import org.apache. ...