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="images/0.png"><img src="images/0.png"><img src="images/0.png"><img src="images/0.png"><img src="images/0.png"><img src="images/0.png"></div>
</div>
</body>
</html>

 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django-认证系统

知识预览 COOKIE 与 SESSION用户认证 回到顶部COOKIE 与 SESSION 概念 cookie不属于http协议范围&#xff0c;由于http协议无法保持状态&#xff0c;但实际情况&#xff0c;我们却又需要“保持状态”&#xff0c;因此cookie就是在这样一个场景下诞生。 cookie的工作原理是&…

jpa 查询 列表_终极JPA查询和技巧列表–第3部分

jpa 查询 列表在阅读第三部分之前&#xff0c;请记住本系列的第一部分和第二部分 JPA&#xff1a;通过查询创建对象 JPA允许我们使用所需的值在查询内创建对象&#xff1a; package com.model;public class PersonDogAmountReport {private int dogAmount;private Person per…

java 限制文件大小_java上传文件大小限制

win系统下解决ASP上传文件大小限制200K_电脑基础知识_IT/计算机_专业资料。win系统下解决ASP上传文件大小限制200K 解决ASP 上传文件大小限制 200K win2003 系统下的 ......介绍 上传 // 新建一个 SmartUpload 对象 SmartUpload su new SmartUpload(); // 上传初始化 su.initi…

java 数组的get set_java.lang.reflect.Array.setBoolean()方法

java.lang.reflect.Array.setBoolean(Object array, int index, boolean value)方法将指定的数组对象的索引组件的值设置为指定的布尔值。声明以下是java.lang.reflect.Array.set(Object array, int index, boolean value)方法的声明。public static void setBoolean(Object ar…

poj3984 迷宫问题 bfs 最短路 广搜

迷宫问题Time Limit: 1000MS Memory Limit: 65536KTotal Submissions: 27913 Accepted: 16091Description定义一个二维数组&#xff1a; int maze[5][5] {0, 1, 0, 0, 0,0, 1, 0, 1, 0,0, 0, 0, 0, 0,0, 1, 1, 1, 0,0, 0, 0, 1, 0,};它表示一个迷宫&#xff0c;其中的1表示墙壁…

使用JBoss Fuse和OpenShift进行Cloud Native Camel骑行

红帽公司最近发布了一个微服务集成工具包&#xff0c;用于在OpenShift v3的Docker和Kubernetes环境中运行我们的微服务。 为了帮助人们更好地理解这一点&#xff0c;我将Rider Auto应用程序迁移到一组微服务中&#xff0c;该应用程序已经存在了一段时间&#xff0c;该应用程序用…

python之字符串连接

join 就属于技巧了&#xff0c;利用字符串的函数 join 。这个函数接受一个列表&#xff0c;然后用字符串依次连接列表中每一个元素&#xff1a; str_list [Pyt, hon] a print a.join(str_list)步骤&#xff1a; 1、建立一个列表 2、利用 join() 原文链接  转载于:https://…

JAVA取钱多线程实验_JAVA多线程----用--取钱问题2

在该示例代码中&#xff0c;TestAccount类是测试类&#xff0c;主要实现创建帐户Account类的对象&#xff0c;以及启动学生线程StudentThread和启动家长线程GenearchThread。在StudentThread线程中&#xff0c;执行的功能是每隔2秒中取一次钱&#xff0c;每次取50元。在Genearc…

Spark1——介绍

1、Spark是什么 Spark是一个用来实现快速而通用的集群计算的平台。 2、Spark是一个大一统的软件栈 Spark项目包含多个紧密集成的组件。首先Spark的核心是一个对由很多计算任务组成的、运行在多个工作机器或者是一个计算集群上的应用进行调度、分发以及监控的计算引擎。 Spark的…

java按输入顺序输出_java 输入3个数a,b,c,按大小顺序输出的实例讲解

java 输入3个数a,b,c&#xff0c;按大小顺序输出的实例讲解题目&#xff1a;输入3个数a,b,c&#xff0c;按大小顺序输出。代码&#xff1a;import java.util.Scanner;public class lianxi34 {public static void main(String[] args) {Scanner s new Scanner(System.in);Syste…

Java 8中HotSpot选项的改进文档

Oracle的 Java 8 的HotSpot实现中引入的一些小但受欢迎的功能之一是在启动器的文档中添加了许多常见的HotSpot Java启动器 &#xff08; java &#xff09;选项/标志。 过去&#xff0c;即使是对某些相当常见的HotSpot JVM选项也感兴趣的开发人员 &#xff0c;不得不潜在地寻找…

sql server数据库课程设计分析

课题&#xff1a;能源管理收费系统 系统功能的基本要求&#xff1a; &#xff08;1&#xff09;用户基本信息的录入&#xff1a;包括用户的单位、部门、姓名、联系电话、住址 &#xff1b; &#xff08;2&#xff09;用户水、电、气数据的录入&#xff08;每个月的数据的录入&a…

Springboot 项目启动后执行某些自定义代码

Springboot 项目启动后执行某些自定义代码 Springboot给我们提供了两种“开机启动”某些方法的方式&#xff1a;ApplicationRunner和CommandLineRunner。这两种方法提供的目的是为了满足&#xff0c;在项目启动的时候立刻执行某些方法。我们可以通过实现ApplicationRunner和Com…

android java 实体类 object变量 保存_Android中Intent传递对象的两种方法Serializable,Parcelable...

Android中的传递有两个方法&#xff0c;一个是Serializable&#xff0c;另一个是Parcelable。Serializable是J2SE本身就支持的。而Parcelable是Android所特有的。二者的使用场景和区别&#xff1a;1)在使用内存的时候&#xff0c;Parcelable比Serializable性能高&#xff0c;所…

[BZOJ4537][Hnoi2016]最小公倍数 奇怪的分块+可撤销并查集

4537: [Hnoi2016]最小公倍数 Time Limit: 40 Sec Memory Limit: 512 MBSubmit: 1474 Solved: 521[Submit][Status][Discuss]Description 给定一张N个顶点M条边的无向图(顶点编号为1,2,…,n)&#xff0c;每条边上带有权值。所有权值都可以分解成2^a*3^b的形式。现在有q个询问&…

全新资源素材站源码 功能齐备 界面干净整洁

源码介绍 简单安装说明&#xff1a; 1、整站程序上传后台 2、然后导入数据库文件到数据库&#xff0c; 3、修改conf里面的conf的数据库名字及密码 4、配置伪静态 规则&#xff1a; location ~* \.(htm)$ { rewrite "^(.*)/(.?).htm(.*?)$" $1/index.php?$2…

jBPM和Drools工作台中的用户和组管理

介绍 本文讨论了一项新功能&#xff0c;该功能允许使用集成在jBPM和Drools Workbenches中的直观友好的用户界面来管理应用程序的用户和组。 用户和组管理 在安装&#xff0c;设置和使用此功能之前&#xff0c;本文讨论了一些以前的概念&#xff0c;需要进一步理解才能进一步使…

java懒加载设计模式_java设计模式——单例模式

整理一下设计模式的个人理解。描述单例模式是java中比较常见的一种设计模式&#xff0c;顾名思义为一个类只能创建一个实例&#xff0c;多用于全局对象&#xff0c;如&#xff1a;配置的加载&#xff0c;spring bean加载各种配置(spring容器所有bean默认都是单例)单例的特点为构…

BZOJ.4553.[HEOI2016TJOI2016]序列(DP 树状数组套线段树/二维线段树(MLE) 动态开点)

题目链接&#xff1a;BZOJ 洛谷\(O(n^2)\)DP很好写&#xff0c;对于当前的i从之前满足条件的j中选一个最大值,\(dp[i]d[j]1\) for(int j1; j<i; j)if(a[j]<minv[i]&&maxv[j]<a[i])//序列只会变换一次 dp[i]max{dp[j]1}; 转移要满足两个条件&#xff1a;\(a[j]…

java 快速构建ssm项目_SSM快速搭建

基本环境搭建1、 创建Maven工程2、 导入项目相关依赖的jar包springspringmvcmybatismysqljunitspring-testlombokdevtoolsxmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org…