angularjs实现时钟效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态时间例子</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module("timeDemo",[]);
app.controller("timeCtrl",function($scope){
//获取当前时间
var now1=new Date();
//让时间在页面显示
$scope.Now=now1.getHours()+':'+now1.getMinutes()+':'+now1.getSeconds();
//写一个方法获取当前时间
$scope.SetTimer=function(){
//angularJs的特性,需要手动把变化映射到html元素上面
$scope.$apply(function(){
var now=new Date();
$scope.Now=now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
});
};
//每隔1秒刷新一次时间
$scope.SetTimerInterval=setInterval($scope.SetTimer,1000);
});
</script>
</head>
<body ng-app="timeDemo" ng-controller="timeCtrl">
当前时间为:{{Now}}
</body>
</html>
angularjs实现时钟效果的更多相关文章
- Flash AS实现时钟效果(全脚本实现)
最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...
- transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...
- 原生javascript实现网页显示日期时钟效果
刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- GDI绘制时钟效果,与系统时间保持同步,基于Winform
2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...
- 转 CSS3+js实现多彩炫酷旋转圆环时钟效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- canvas实现的时钟效果
最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- JS实现时钟效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- oracle之报错:ORA-00054: 资源正忙,要求指定 NOWAIT
oracle之报错:ORA-00054: 资源正忙,要求指定 NOWAIT 问题如下: SQL> conn scott/tiger@vm_database Connected to Oracle ...
- 准备使用 Office 365 中国版--邮箱迁移
微软产品一贯的作风是从来不缺文档和教程,Office 365也不例外.无论是最终用户还是企业IT管理员,都可参照Office 365使用指南顺利的开启Office 365之旅.不过比较奇怪的是,貌似很 ...
- 突然发现这周有点忙。。着玩-PHP进阶
hi 周二才,不过我突然意识到这周有点忙着玩的感觉,还是很期待的——今天下午去市里,晚上回来看电影,明晚聚餐吃火锅,后天下午拍短片,晚上可能要打球,周五,嗯,就到周五了.虽然这样下去连怎么写(bian ...
- stanford coursera 机器学习编程作业 exercise4--使用BP算法训练神经网络以识别阿拉伯数字(0-9)
在这篇文章中,会实现一个BP(backpropagation)算法,并将之应用到手写的阿拉伯数字(0-9)的自动识别上. 训练数据集(training set)如下:一共有5000个训练实例(trai ...
- Object.Destroy慎用
Object.Destory Destory(Object)并没有立刻,马上,及时的删除这个Object. 举例 在使用NGUI的Table或Grid进行布局时,就需要注意了:尽量不要使用Destro ...
- 菜鸟的IT生活4
今天主要复习了以前的内容,输入输出,数据类型,运算符,顺序语句,分支语句等等,把几个不太连贯跟没上传过的传一下,以后加深下印象,加油!
- QuickFix/N简介
QuickFix/N简介 FIX是Financial Information eXchange的简称.FIX是一种专门为实时电子证券交易设计的标准消息协议.该协议由FIX protocol, Ltd ...
- 转:windows下命令行工具
转自: http://www.cnblogs.com/haochuang/p/5593411.html Windows下CMD不好用,远没有Linux,或者一些SSH工具用起来方便.其实Windows ...
- poj2531 Network Saboteur
Network Saboteur Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 11122 Accepted: 5372 ...
- win7 远程桌面关机
在任务管理器中, 打开运行窗口, 执行 shutdown -s 命令, 将在30秒后关闭win7, 如果需要更快, 加上 -t 10 参数 关于 shutdown 的命令行说明: C:\Users\R ...