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> ...
随机推荐
- MySQL Database on Azure 的用户名
MySQL Database on Azure是中国版Windows Azure上的一个PaaS服务,类似于AWS上的RDS.MySQL Database on Azure的用户名与on-premis ...
- 使用ajaxfileupload.js上传文件
一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...
- 洛谷P2331 [SCOI2005] 最大子矩阵[序列DP]
题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 输入输出格式 输入格式: 第一行为n,m,k(1≤n≤100,1≤m≤2 ...
- ubuntu14上安装ros教程
安装ROS 官方的安装教程地址 http://wiki.ros.org/cn/jade/Installation/Ubuntu 建议安装indigo版的 下面的教程是安装jade版的 配置Ubuntu ...
- 理解Java中字符流与字节流的区别
1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序 ...
- WKWebView捕获HTML弹出的Alert和Confirm
之前用WebView装载一个网页时,弹出Alert时会显示网址,由于不想把网址暴露给用户这样显示就不是很友好了.UIWebView文档内没有找到可以捕获这类信息的API.GOOGLE了下发现了WKWe ...
- Centos5.8 安装 Redmine
安装Ruby 到 /opt/ruby-2.0.0 -p481.tar.gz cd ruby--p481 ./configure --prefix=/opt/ruby- sudo make sudo m ...
- PAT 1003. 我要通过！(20)
"答案正确"是自动判题系统给出的最令人欢喜的回复.本题属于PAT的"答案正确"大派送 -- 只要读入的字符串满足下列条件,系统就输出"答案正确&quo ...
- 数据表格 - DataGrid - 字段排序
设置默认排序字段 sortName:"id",sortOrder:"desc",单独为每个字段设置排序 {field: "name", ti ...
- BZOJ 1009 【HNOI2008】 GT考试
Description 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0< ...