JS---案例:美女时钟
案例:美女时钟
思路:
打开页面就有图片按每秒1张的顺序轮换,用到了日期对象,获取小时和秒。
封装到一个命名函数后,为了使页面打卡就有图片的轮换,先调用下f1,再设置setInterval
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title> </head> <body>
<img src="" alt="" id="im" />
<script src="common.js"></script>
<script> function f1() {
//获取当前时间
var dt = new Date();
//获取小时
var hour = dt.getHours();
//获取秒
var second = dt.getSeconds(); hour = hour < 10 ? "0" + hour : hour;
second = second < 10 ? "0" + second : second; my$("im").src = "meimei/" + hour + "_" + second + ".jpg";
}
//打开页面先调用f1,这样打开来就有图片,不用等待
f1();
//页面加载哇麻痹后,过了1,秒才执行函数的代码
setInterval(f1, 1000); </script> </body> </html>
JS---案例:美女时钟的更多相关文章
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- js动态数字时钟
js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...
- js绘制圆形时钟
纯js制作圆形时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js数字滑动时钟
js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- c#学习系列之Application.StartupPath的用法(美女时钟的做法)
Application.StartupPath是一个只读属性,是不可以设置的. Application.StarupPath获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称.既是Appli ...
- 第一个Vue.js案例
第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...
- js案例之使用正则表达式进行验证数据正确性
#js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...
- JS案例之3——倒计时
利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单.如果大牛们有更好的办法欢迎补充. 这种效果经常用于在规定的时间做某件事.比如在1分钟之后重新发送验证码等. 案例演示: 源代码如下: <!D ...
- 通过Canvas + JS 实现简易时钟实战
最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...
随机推荐
- Fragment源码分析
转载请标明出处:http://blog.csdn.net/shensky711/article/details/53171248 本文出自: [HansChen的博客] 概述 Fragment表示 A ...
- 使用FastReport报表工具生成图片格式文档
之前我在随笔<使用FastReport报表工具生成报表PDF文档>介绍过使用FastReport.Net来根据报表模板进行生成PDF,以及随笔<使用FastReport报表工具生成标 ...
- Rust 入门 (四)
所有权是 rust 语言独有的特性,它保证了在没有垃圾回收机制下的内存安全,所以理解 rust 的所有权是很有必要的.接下来,我们来讨论所有权和它的几个特性:借用.切片和内存结构. 什么是所有权 Ru ...
- surfer白化
surfer白化的方法: 方法一: 1.griddata需白化的文件(surfer处理成grd格式,也就是surfer绘图的基本数据格式) 注意:用surfer转换格式时,插值间距(spacing)大 ...
- Python高级数据结构-Collections模块
在Python数据类型方法精心整理,不必死记硬背,看看源码一切都有了之中,认识了python基本的数据类型和数据结构,现在认识一个高级的:Collections 这个模块对上面的数据结构做了封装,增加 ...
- 【网络流相关】最大流的Dinic算法实现
Luogu P3376 于\(EK\)算法求最大流时每一次只求一条增广路,时间复杂度会比较高.尽管实际应用中表现比较优秀,但是有一些题目还是无法通过. 那么我们就会使用\(Dinic\)算法实现多路增 ...
- 基于华为云CSE微服务接口兼容常见问题
微服务接口兼容常见问题 在进行微服务持续迭代开发的过程中,由于新特性在不停的加入,一些过时的特性在不停的修改,接口兼容问题面临巨大的挑战,特别是在运行环境多版本共存(灰度发布)的情况下.本章节主要描述 ...
- 自定义BufferedReader
缓冲区的建立目的就是增加传输性能,使我们传输数据更加快速 缓冲区的内部其实很简单 就是在内部封装了一个数组 用数组来存储数据 对外提供一些方法对数组进行访问 其中这些方法的操作就是对数组的指针(角标) ...
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- Pyhton表白代码——浪漫圣诞节
圣诞节即将到了,所以这回通过turtle模块来编写一个表白的小程序 开发时间:2019-12-15 开发工具:Sublime 开发模块:turtle 这里用到了turtle库的相关知识,如果不熟悉可以 ...