ホームページ > 記事 > ウェブフロントエンド > JS を使用して画像変更クロックを実装する (詳細なチュートリアル)
JS を使用して画像変更クロックを実装する (詳細なチュートリアル)
- 亚连オリジナル
- 2018-06-13 16:32:451516ブラウズ
この記事では、簡単な画像変更時計機能を実装するための JS を主に紹介し、時計機能を実現するために画像を定期的に変更および表示するための JavaScript と時間関数の関連操作スキルを分析します。 . 必要な友達 この記事を参照してください
この記事の例では、JS で簡単な画像を変更する時計関数を実装する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> /*写移动端需要加上这句代码*/
<title>JS简易时钟</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" rel="external nofollow" /> /*封装好的css 对一些基本的进行了设置*/
<style type="text/css">
#dad{width: 12rem;height: 10rem;margin: 20rem auto;}/*移动端的单位rem*/
img{float: left;}
</style>
</head>
<body>
<p id="onclick">
<img src="img/0.jpg"/> <!--首先我们的时钟是有六张图组成 例如 17:53:52 因此我们需要放六张图进去 接下来我们需要用到js做的就是换图而已
<img src="img/0.jpg"/> img/0.jpg 这张图是数字0的图 此时我们的img目录下应该是0-9这十张图 -->
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
</p>
</body>
</html>
<script type="text/javascript">
var iImg=document.getElementsByTagName("img"); //首先我们先获取到img这个标签
setInterval(moo,1000); //时间函数 每1000毫秒执行以下moo()这个函数 也就是每一秒执行以下moo()这个函数
moo(); //当我们写完之后会发现系统不会直接执行函数 会有一个一秒的延迟 因此我们只需在浏览器打开的时候先执行以下这个函数 就可以消除这个一秒的延迟
function moo(){
var now=new Date();
var iHours=now.getHours();
var iMinutes=now.getMinutes();
var iSecends=now.getSeconds(); //分别获取时间 小时 分钟以及秒数
function mov(j){ //因为我们是六张图 因此当我们时间小于10的时候 我们的iHours iMinutes iSecends为个位数 就不满足我们的六张图 因为我们需要
if(j<10){ 考虑用0来补足 例如 17点5分5秒 我们需要写成17:05:05 而不是17:5:5
return "0"+j; 因此我们用mov(j)这个函数来判断一下 当我们的iHours iMinutes iSecends为个位数时 我们为其补0 就是"0"+j
}else{
return j;
}
}
var str=mov(iHours)+mov(iMinutes)+mov(iSecends); //那么这里我们只需要等量代换 把j这个参数换成iHours iMinutes iSecends就可以了 我们赋值给str 因此str将会输出
一个六位数 例如现在是早晨9点51分27秒 那么str=095127 这么一个六位数
for(var i=0;i<=5;i++){ //接下来我们用一个for循环换图就可以了 因为我们是六张图 因此i<=5即可 如果图数比较多 可以写成i<=iImg.length-1
iImg[i].src="img/"+str[i]+".jpg"; // 这句话的含义就是换图 举个例子 iImg[1]代表的就是第二张图 str[1]就是上面str里面的第二个数字 就是9
} 因此iImg[1].src=img/9.jpg 这样第二张图就换成了9这个图片 换图就完成了 因此一个时钟就做成了
}
</script>上記は皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。
関連記事: e 途中でMETHODSを使う方法JavaScriptの日常エラーVueコンポーネント通信(詳細チュートリアル) JavaScriptで虫眼鏡効果を実装以上がJS を使用して画像変更クロックを実装する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。