9.1定时器 小时分秒

功能:用切换图片0-9效果显示当前系统时间

属性:img的src

1.用到

new Date()

getHours(),getMinutes(),getSeconds()

getFullyear(),getMouth() 1月数需要加1,getDay()星期为0,1,2,3,4,5,6

 

2.单位数转换成双位字符串的函数

function toDou(n){

if(n<10){

return '0' n;//任意数加字符串结果为字符串的拼接

}

else{

return ' ' n;//任意数加空字符串结果为字符串

}

}

 

3.获取字符串用str.charAt(i),否则不兼容

 

4.计时器

开启setInterval(fn,时间)无限循环,setTimeout(fn,时间)只执行一次

关闭clearInterval(),clearTimeout()

关闭方式:

var timer=null;

timer=setInterval(fn,时间);

clearInterval(timer);

 

5.获取系统时间转化成6位字符串

var str=toDou(oDate.getHours()) toDou(oDate.getMinutes()) toDou(oDate.getSeconds)

 

6.改变图片路径

aImag[i].src='img/' str.charAt(i) '.png'

 

7.setInterval(fn,时间)是时间后执行fn,显示会有些问题,为了一开始就执行fn,

代码顺序:

fn(...);

setInterval(fn,时间);

fn();

 

///

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link href="css1.css" rel="stylesheet" type="text/css"
charset="UTF-8">
</head>
<body>
<div id="div1">
<img src="img/0.png"/>
<img src="img/0.png"/>
:
<img src="img/0.png"/>
<img src="img/0.png"/>
:
<img src="img/0.png"/>
<img src="img/0.png"/>
</div>
<script src="js1.js"> </script>
</body>
</html>

css

body{
background :#000;
font-size: 50px;
}
#div1{
background:#fff;
width:680px;
height:110px;
padding:0;
margin-top:50px;
margin-left:20%;
text-align: center;
}
img{
width:72px;
height:85px;
margin-top:10px;

}

/js

window.οnlοad=function(){
function gogo(){
var oDate=new Date();
var aImg=document.getElementsByTagName("img");
function toDou(n){
if(n<10){
return '0' n;
}
else{
return '' n;
}
};
var str=toDou(oDate.getHours()) toDou(oDate.getMinutes()) toDou(oDate.getSeconds());
for(var i=0;i<aImg.length;i ){
aImg[i].src='img/' str.charAt(i) '.png';
}};
setInterval(gogo,1000);
gogo();
};


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

浏览器中的JavaFX

浏览器中的JavaFX屏幕截图 最近&#xff0c;Carl Dea和我启动了一个新项目&#xff0c;将JavaFX 8引入浏览器。 今天&#xff0c;我想介绍我们创建的前两个概念验证&#xff0c;以查看该想法是否完全可行。 对于不耐烦的人&#xff0c;这里是到PoC的链接。 但请注意&#xff0…

如何用代码对repeating section控件新增Item(InfoPath)

在做项目的时候&#xff0c;有一个场景&#xff0c;当用户切换不同选项时(radio button)&#xff0c;repeating section会随着切换而变换两种状态1&#xff1a;删除所有item. 2.新增而且只新增一个item. 对于删除比较容易&#xff0c;但对于从没有任何一个item状态下&#xff0…

MDB!= JMS,反之亦然

基本 消息驱动Bean&#xff08;又称为MDB&#xff09;只是另一个EJB&#xff0c;如无状态&#xff0c;有状态或单例。 使用MessageDriven批注指定。 MDB用于异步消息处理 它们与无状态EJB 相似 &#xff0c;因为它们都是由EJB容器池化的 但是&#xff0c;它们与无状态EJB不同…

4.1邮箱的全选,全不选,反选

事件&#xff1a;onclick 属性&#xff1a;checked 对于分清getElementsByTagName(元素名)里的元素名&#xff0c; 可以先提取其外面一层的元素&#xff0c;再在此基础上用getElementsByTagName(元素名) 用到for语句&#xff0c;if语句&#xff0c;length <!DOCTYPE ht…

调了 好几天的问题 treeview 的js 处理复选框之间的关系,选中子框父框自动选中,单独执行 没问题 放到框架页里 就有问题...

刚开始的js 这么写的 function OnTreeNodeChecked() {var ele event.srcElement;if (ele.type checkbox) {var childrenDivID ele.id.replace(CheckBox, Nodes);var div document.getElementById(childrenDivID);if (div ! null) {var checkBoxs div.getElementsByTagName…

1.2鼠标移入移出改变背景色和其他大小样式

功能&#xff1a;鼠标移入div,背景色变为绿色&#xff0c;宽变小&#xff0c;长变大&#xff0c;移出恢复原状 事件&#xff1a;onmouseover,onmouseout 属性&#xff1a; background,width,height <!DOCTYPE html><html><head><meta charset"utf…

JDK 9 –给圣诞老人的信?

众所周知&#xff0c;冬天&#xff08;尤其是圣诞节前的时间&#xff09;是做梦的合适时机&#xff0c;希望有一个梦想似乎可以触摸的时刻。 当孩子们和大人在纸上或在对圣诞老人的虚构或真实信件中写下自己的梦想的那一刻&#xff0c;希望他们的梦想将成为现实。 这很引人注目…

周三的工作 张孝祖

今天的任务是主面板master嘿嘿 上头有几个按钮&#xff0c;登录登出&#xff0c;个人信息&#xff0c;注册注销等&#xff0c;他们是根据用户是否等率决定的 具体代码如下 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System…

H5本地存储

在以前&#xff0c;我们想要存储一些数据&#xff0c;并且只是在前端使用&#xff0c;服务端并不会使用&#xff0c;我们只能存在cookie里&#xff0c;但是cookie会跟随请求头在客户端和服务端之间来回传递&#xff0c;而且cookie还有一些缺点&#xff0c;H5提供了webStorage的…

在哪里可以运行EJB?

EJB不仅为Java EE应用服务器而建。 他们还可以执行在的Java EE Web Profile的容器或简单的Java SE环境&#xff08;Java SE的啊- &#xff01;E&#xff01;ASY 的J ava 乙是指合同&#xff09;。 EJB Lite 仅支持完整的EJB规范提供的功能的子集所必需的-相同功能的轻量级版本…

sql查询结果字段名与字段值倒过来了

数据库为sybase, sql如下&#xff1a; 1 select substring(LRRJG,1,7) as SSQJ, 2 sum(case when RWDL_BH 01 then 1 else 0 end) AS A, 3 sum(case when RWDL_BH 01 and XBHSJG ! null then 1 else 0 end) AS B 4 from ZYH_DBRW_LRNSRRW 5 where LR_DBRW_ID ! null and DR …

Promise实战AJAX封装

一、利用Promise的知识&#xff0c;对最开始的ajax的例子进行一个简单的封装&#xff1a; var url xxx; // 封装一个get请求的方法 function request(url){return new Promise(function(resolve,reject){var XHR new XMLHttpRequest();XHR.open(GET,url,true);XHR.send();XHR…

重新设计Hamcrest

我在Hamcrest库上做了几篇文章 &#xff0c;我确实很喜欢使用它&#xff0c;但是我希望对其进行一些更改。 我了解他们做出的大多数设计决策&#xff0c;但我认为其中一些确实不值得。 介绍Litecrest 我对库所做的大多数更改都有助于减轻Hamcrest的负担&#xff0c;因为我觉得…

CSS 垂直居中

1、使用绝对定位垂直居中 绝对对位原理&#xff1a;元素在过度受限情况下&#xff0c;将margin设置为auto&#xff0c;浏览器会重算margin的值&#xff0c;过度受限指的是同时设置top/bottom与height或者left/right与width。 .absolute_center{/*display:none;*/position:absol…

Java EE拦截器

历史 我认为重要的是要看一下Java EE中的Interceptor的发展&#xff0c;因为它是从EJB特定的项目开始的&#xff0c;后来又演变成一个单独的规范&#xff0c;现在可供其他Java EE规范扩展&#xff0c;这一事实很简单。 版本1.0 拦截器最初是在EJB 3.0 &#xff08; Java EE 5的…

New Begin

已经研究生三年级了&#xff0c; 最近也找好了工作&#xff0c;应该要开始自己的程序人生了。 虽然说写程序也写了很一段时间了&#xff0c; 决定现在开始在cnblogs这个&#xff0c;记录下自己的学习轨迹。开始维护自己的blogs。转载于:https://www.cnblogs.com/binzeehale/ar…

[ExtJs6] 环境搭建及创建项目

1. 环境搭建 sencha cmd 和 extjs6 sdk.sencha cmd: https://www.sencha.com/products/extjs/cmd-download/extjs6: https://www.sencha.com/sencha cmd 安装过程将其加入系统的环境变量path中。export PATH${PATH}:/Users/shuanggai/bin/Sencha/Cmd/6.2.2.36把改语句添加到 ~/…

通过Spring Integration和RabbitMQ获得高可用性的AMQP支持的消息通道

Spring Integration消息通道默认情况下将消息存储在内存中。 这是因为内存速度快&#xff0c;易于实现&#xff0c;并且不会增加网络成本。 但是&#xff0c;在某些情况下&#xff0c;这可能会引起问题&#xff0c;因为如果应用程序崩溃或服务器意外关闭&#xff0c;所有消息都…

有机会多熟悉下开源框架

Struts2&#xff0c;Spring&#xff0c;Hibernate等开源框架的使用转载于:https://www.cnblogs.com/yqskj/archive/2012/11/05/2756085.html

vue之node.js的简单介绍

一、什么是node.js&#xff1f; 它是可以运行JavaScript的服务平台&#xff0c;可以吧它当做一门后端程序&#xff0c;只是它的开发语言是JavaScript 二、安装 1、node.js的特性&#xff1a; - 非阻塞IO模型- 时间驱动 2、运用的场景&#xff1a; - 高并发低业务- 实时场景- 聊…