JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）

运用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的索引值，并赋值给iaLi[i].onmouseover=function(){for(var i=0;i<aLi.length;i++){aLi[i].className="";  //鼠标滑过，是li的class为空  }this.className="active"; //并定义当前li的class为activeoTxt.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>

转载于:https://www.cnblogs.com/cheryshi/p/8417346.html

JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）相关推荐

利用js制作动态小时钟
利用js制作动态小时钟在学完Date()函数之后,可以用来与CSS结合制作一个能转动的时钟. 新建html文件,写好基本结构,代码如下: <!DOCTYPE html> <html ...
html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
利用HTML+css+js制作侧边栏小广告
利用HTML+css+js制作小广告 1.页面效果 2.HTML代码 3.css代码(给广告位设置样式) 4.js代码在这里插入图片描述
原生JS制作抽奖小游戏
<div class="box"><div id="grid1" class="grid">电信优惠卷</di ...
HTML5七夕情人节表白网页制作【原生JS制作爱心表白代码】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
js定时器与数码时钟案例（源码及备注）
js定时器与数码时钟案例开启定时器 1.setInterval 间隔型 setInterval(参数一,参数二); 第一个参数是一个函数,第二个参数是时间(单位是毫秒) 意思就是每隔多长时间执行一次 ...
JS网页滚动条滚动事件实例分析
js网页滚动条滚动事件的用法,在javascript中window.onscroll监控滚动条滚动事件的相关技巧本文实例讲述了js网页滚动条滚动事件用法,具体分析如下: 在做js返回顶部的效果时,要 ...
js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下点击"登录"按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击"登录"按钮之前登录小窗口 ...
HTML+CSS+JS制作【俄罗斯方块】小游戏
文章目录 js制作简单网页版俄罗斯方块效果演示设计思路一.HTML网页结构代码二.CSS代码三.JS代码四.代码资源分享 js制作简单网页版俄罗斯方块程序虽然很难写,却很美妙.要想把程序 ...

JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）

JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）相关推荐

最新文章

热门文章