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元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...
随机推荐
- JavaScript笔记五
1.条件分支语句 - switch语句 - 语法: switch(条件表达式){ case 表达式: 语句... break; case 表达式: 语句... break; case 表达式: 语句. ...
- day 40 文本属性 常用css属性 定位
一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中: ...
- Linux -- 进程间通信几种方式的总结
管道 优点 管道文件不占磁盘空间,打开管道时在内存中分配空间: 管道读端会在读取完管道内数据后自动进入阻塞,直到写端再次写入数据: 缺点 管道是半双工的,数据只能从一个方向上流动: 管道大小 PIPE ...
- Linux -- 进程间通信之信号量
基本概念简述 多个线程同时访问一个共享数据,很可能造成恶劣的后果:为了保证数据访问资源的正确性和安全性,需要对线程进行"同步" (Linux下所有的执行实体都称为任务(task), ...
- [转]Xtrabackup 的 xtrabackup_binlog_pos_innodb和xtrabackup_binlog_info 文件区别
[转自] http://julyclyde.org/?p=403 在操作 innobackupex 的时候,执行 change master to 的时候发现 xtrabackup_binlog_po ...
- python-模块,异常,环境管理器
模块 Module 什么是模块: 1.模块是一个包含有一系列数据,函数,类等组成的程序组 2.模块是一个文件,模块文件名通常以.py结尾 作用: 1.让一些相关数据,函数,类等有逻辑的组织在一起,使逻 ...
- 基于webpack实现多html页面开发框架五 开发环境配置 babel配置
一.解决什么问题 1.开发环境js.css不压缩,可在浏览器选中代码调试 2.开发环境运行http服务指向打包后的文件夹 3.babel输出浏览器兼容的js代码 二.需要 ...
- 转:Spring Boot中使用AOP统一处理Web请求日志
在spring boot中,简单几步,使用spring AOP实现一个拦截器: 1.引入依赖: <dependency> <groupId>org.springframewor ...
- springcloud集成redis
1.application.properties/application.yml配置: redis: # redis数据库索引(默认为0),我们使用索引为3的数据库,避免和其他数据库冲突 databa ...
- CF1236B Alice and the List of Presents
题意翻译 有nn种物品和mm个背包,每种物品有无限个,现将若干个物品放到这些背包中,满足: 1.每个背包里不能出现相同种类的物品(允许有空背包): 2.在所有的mm个背包中,每种物品都出现过. 求方案 ...