如何在 AngularJS 和 HTML 中制作滴答作响的时钟(时间)

2024-04-19

我是一名 AngularJS/html 初学者用户,一直在尝试寻找代码片段来为网络应用程序制作时钟/时间项目。

网络搜索并没有像我期望的那样容易地提供直接的结果,所以我想我应该发布这个问题来获得一些答案,也让其他人更容易找到这个问题。

我已经发布了我的解决方案,但想在选择答案之前看看是否有更好的解决方案!


只是想改进阿门的答案。您可以使用$interval设置计时器的服务。

var module = angular.module('myApp', []);

module.controller('TimeCtrl', function($scope, $interval) {
  var tick = function() {
    $scope.clock = Date.now();
  }
  tick();
  $interval(tick, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller='TimeCtrl'>
    <p>{{ clock | date:'HH:mm:ss'}}</p>
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 AngularJS 和 HTML 中制作滴答作响的时钟(时间) 的相关文章

  • 在基于 AngularJS 的 Web 应用程序中使用 Selenium

    我逐渐知道 Selenium 是 UI 测试之父 现在我的问题是为什么 Angular 团队开发了 Protractor 对于基于 AngularJS 的 Web 应用程序 Selenium 不能完成同样的工作 Protractor 所做的
  • 如何防止图像被裁剪

    我正在尝试创建一个包含很多图层的动画图片 为了在不同的屏幕上获得正确比例的图像 我使用covercss 属性值 我已经尝试过object fit对于图像和background size用于背景图像 这就是为什么我的宽屏幕图像被浏览器裁剪的原
  • 在 SVG 中绘制 DOM 对象时如何在 Canvas 中使用 Google 字体?

    根据 Mozilla 的文档 您可以在 Canvas 上绘制复杂的 HTML 例如this https developer mozilla org en US docs Web API Canvas API Drawing DOM obje
  • 如何在 MVC 3 Razor 中显示解码后的编码 HTML?

    我在 MVC 3 和 Asp net C 中使用 Razor 我有一个带有以下代码的视图 model ContentBody有一些 HTML 标签 我需要将此 HTML 内容显示为DECODED 我该如何更改视图中的代码 div class
  • 如何让 AngularJS 绑定到 A 标签的 title 属性?

    目的是让产品名称出现在缩略图的工具提示中 浏览器不会从 ng title 或 ng attr title 创建工具提示 我们使用 AngularJS 版本 1 0 7 您可以在任何属性前面添加 ng 或 ng attr Angular 将进
  • AngularJS 计数器计数到目标数

    我是 Angular 的新手 想在 JQuery 中实现同样简单的函数扩展 但使用指令 据我所知 这就是应该如何完成的 有人知道准备实施吗 我的搜索最终只找到了 JQuery 解决方案 但我不知道如何将其转换为 Angular 这就是我需要
  • 在书签中使用本地存储

    我非常喜欢使用带有小脚本的书签 例如 我编辑了注释编辑脚本这个帖子 http www reddit com r LifeProTips comments 265rxe lpt use a browser tab as a quick and
  • IE10重画/重画问题

    你可以在这里看到这个工作 中断 http new campchampions com parents http new campchampions com parents 该问题仅在 IE10 中出现 用户滚动一小段距离后 导航就会被固定
  • 将 HTML 表格转换为 R 数据框

    table cellspacing 1 cellpadding 7 border 1 thead tr td align left valign middle nbsp td td align left 1a My peers make a
  • Firefox 和 IE 在 元素上添加了内边距/边距。和clearfix的奇怪之处

    在很长一段时间里 我在 Firefox 和 IE 中遇到了一些垂直间距问题 我正在使用一个 我的 css 中的选择器将边距应用于某个容器元素内的所有内容 在 Chrome 中工作正常 但是在 FF 和 IE 中 我似乎不知从何而来得到了神秘
  • 从 html 链接在移动设备上打开应用程序

    我有一个包含我的社交媒体帐户的 html 页面 我希望当我单击这些链接时可以转到我在这些社交媒体应用程序上的个人资料 例如 Skype a href My Skype a 当我在移动设备上点击此链接时 它会打开 Skype 并转到我的帐户
  • 如何使用 Haskell 中的 thyme 库从 Int 值创建 UTCTime?

    我有年 月 日 小时和分钟值 所有这些都是类型Int 我怎样才能将它们转换为UTCTime or UniversalTime 需要导入以下内容 import Control Lens import Data Thyme Clock impo
  • 发布后忽略基本标签

    在 Chrome 上我收到错误Refused to execute a JavaScript script Source code of script found within request 在发布包含域名的数据后 另请注意任一页面上都缺
  • 如何将自定义 CSS 添加到脆皮表单?

    我正在尝试在脆皮表单的帮助下为我的网站创建一个响应式表单 我没有使用引导程序 我想将自定义 CSS 添加到脆皮表单以匹配我的整个网站 HTML
  • 如何突出显示最靠近鼠标的文本行?

    我有一篇很长的文本 我想为用户提供阅读帮助 当前行应该突出显示 为了更简单 我将只使用鼠标的 Y 坐标 这样 鼠标指针就不会妨碍 我有一个带有 id 的大 DIVcontent它用类填充整个宽度和一个小 DIVcontent对于文本 请参阅
  • Azure Media Player 在重新访问视图时无法在 Angular JS 中播放视频

    我已经在我的 angularjs 应用程序中使用了 azure 媒体播放器并且能够观看视频 但是 当重新访问视频标签所在的同一视图时 不会播放视频 而是在后台播放音频 我正在使用 ui router 进行路由 预先感谢您的快速帮助 这是我的
  • Javascript document.getElementsByClassName 返回未定义

    我有一个函数应该相当简单 并且应该在加载后完成 以减少初始加载时间 基本上我使用这段代码来获取类 prefImg 的所有元素并用它们做一些事情 但是在firebug中调试时 它说var divsList未定义 function popula
  • JavaScript - 离焦事件?

    我想要做的是显示带有文本颜色的输入字段black 然后 当该人在输入字段内单击时 onfocus 我想将文本颜色更改为red 然后 当该人单击输入字段外部 不再焦点 时 我想将文本颜色更改回black 我知道如何处理 JavaScripto
  • 从纪元到相对日期的秒数

    我正在处理自纪元以来的日期 并且已经得到了 例如 date 6928727 56235 我想将其转换为另一种相对格式 以便我能够将其转换为与纪元相关的格式 使用 time gmtime date 它返回 year 1970 mon 3 da
  • 在 Bootstrap 导航栏后添加一些空间的最佳方法是什么?

    以下代码始终在页面顶部显示导航栏 我需要将第二个容器 内容 放置在导航栏的末尾而不是其下方 目前第二个容器位于导航栏下方 我可以在内容顶部添加一些空白 但我不确定这是一个好方法 知道如何解决吗 div class container div

随机推荐

  • SQL 2008 存储过程中的可选 where 子句/参数?

    我正在编写一些更新表的代码 根据用户想要执行的操作 它会更新一大组记录或较小的记录 描述因素是组ID 用户可以选择是更新表中的所有记录 还是仅更新具有该 groupID 的记录 我想对两个实例使用相同的存储过程 其中可能有一些逻辑来区分场景
  • JQuery html() 与 innerHTML

    我可以完全依赖 jQuery 吗html 方法的行为与innerHTML 有什么区别吗innerHTML和 jQuery 的html 方法 如果这些方法都做同样的事情 我可以使用 jQuery 的吗 html 方法代替innerHTML 我
  • 获取 Firefox 中扩展的附加 ID

    我想在浏览器选项卡中打开扩展作为普通的 html 页面 以便我可以使用 selenium WebDriver 自动化它 在 Firefox 中 可以使用这样的链接来完成 moz extension f1b30486 cd88 4319 bb
  • 在生产模式下写入全局变量有什么问题?

    我看了一下连接mongodb的示例代码 看到了一句看不懂的内容 为什么在开发的情况下使用全局变量是安全的 又为何没有投入生产 您不需要理解代码 请只看评论部分 import MongoClient from mongodb let clie
  • 为什么主要编译器对 stdint.h 使用 typedef 而对 stdbool.h 使用 #define?

    我刚刚注意到 gcc 和 clang 似乎都对 stdint h 使用 typedef 但对 stdbool h 使用 define 例子 clang 的 stdint h https clang llvm org doxygen stdi
  • 应用程序中有多少个并发线程才算是很多?

    5 100 1000 我想 这取决于 但是取决于什么呢 作为服务器守护进程 服务运行的应用程序有什么常见之处 什么是硬限制 鉴于机器可以处理总体工作负载 我如何确定开销在多少个线程时开始对性能产生影响 操作系统之间的重要区别是什么 还应该考
  • 从 Windows 任务列表返回命令行

    我正在寻找一个命令来获取在 Windows 任务管理器中写入的命令行 我正在使用tasklist fo CSV v但它不提供我查看任务管理器时得到的命令行 我附上一张图片来说明我的意思 它是最右边的一列 我在系统调用中需要这些信息r 只是为
  • 如何在eclipse中配置ADT插件

    开发者网站上有以下说明 配置 ADT 插件 一旦 Eclipse 重新启动 您必须指定 Android SDK 目录的位置 在出现的 欢迎使用Android开发 窗口中 选择 使用现有的SDK 浏览并选择您最近下载并解压的 Android
  • 限制多处理python中的进程数量

    我的要求是生成hundreds of HTTP POST requests per second 我正在使用它urllib2 def send req urllib2 Request url req add data data respon
  • 尝试添加已经有父级错误的 SKNode

    我在尝试运行我的游戏时收到错误 尝试添加已有父节点的 SKNode 如果我将 SKSpriteNode 在本地添加到函数中 它就可以正常运行 但是当我尝试在全球范围内声明它时 我收到了该错误 任何解决此错误的帮助都会很棒 我认为这与self
  • 对具有不同服务参数的多个实体使用相同的实体侦听器

    由于 EntityListener 注册为服务 是否可以使用不同的参数多次注册同一个类 并将它们每个与特定的实体相关联 考虑以下实体 Class EntityA ORM Entity ORM EntityListeners myBundle
  • 某些团队服务菜单项上的星号是什么?

    当我在浏览器中访问我的 Team Services 帐户时 某些菜单项的名称末尾有一个星号 在此图中 您可以看到其中的 2 个示例 Wiki 和 工作项 那个星号是什么意思 这是一个预览功能 您可以从预览功能菜单中打开 关闭 更多信息 使用
  • 如何将 Jira 问题收集器与 Angular 应用程序集成?

    我正在创建一个 Angular 7 应用程序 它利用 Jira 问题收集器将问题直接提交到各自的项目 当我按照现在的方式构建应用程序时 什么也没有发生 当我直接将代码从方法 submitIssue 移动到 ngOnInIt 下时 会出现问题
  • Scala:对象初始值设定项中的并行集合导致程序挂起

    我刚刚注意到一种令人不安的行为 假设我有一个由单个对象组成的独立程序 object ParCollectionInInitializerTest def doSomething println Doing something for i l
  • WPF 应用程序在 vs2k8 中构建,但不在命令行上使用 msbuild

    我有一个相当小的解决方案 其中包含 WPF Windows 应用程序 当从解决方案构建时 它构建得非常好 我最近将解决方案中包含的项目集成到使用 MSBuild 的现有的 更大的命令行构建中 但是 当从命令行构建时 我收到以下错误 Main
  • HTML5 本地存储中的项目何时过期?

    数据保存多长时间localStorage 作为 HTML5 中 DOM 存储的一部分 可用吗 我可以为本地存储的数据设置过期时间吗 我建议将时间戳存储在object您存储在 localStorage 中 var object value v
  • 如何在Android Studio中导入java包

    我是 android 新手 我想将 jfftpack 导入到 android studio 中的项目中 但我不知道如何导入它 原始代码是 import ca uol aig realdoublefft 我不知道将 java 文件放在哪里 我
  • 将球体 a 旋转到自身的 b 点

    我试图弄清楚如何将球体从 A 点旋转到 B 点 我找到了一些Unity3d代码 Quaternion rot Quaternion FromToRotation pointA pointB sphere transform rotation
  • 如何搜索浏览器窗口对象以查找哪个对象或变量具有搜索值?

    如果我知道我有一个值 JohnSmith 存储在浏览器全局空间中的某个对象中 并且我遇到了某个断点 我如何知道哪个对象或变量的值为 JohnSmith 我有数百个对象 我不想在开发工具中手动搜索它 我在控制台或代码片段中使用了一些脚本来遍历
  • 如何在 AngularJS 和 HTML 中制作滴答作响的时钟(时间)

    我是一名 AngularJS html 初学者用户 一直在尝试寻找代码片段来为网络应用程序制作时钟 时间项目 网络搜索并没有像我期望的那样容易地提供直接的结果 所以我想我应该发布这个问题来获得一些答案 也让其他人更容易找到这个问题 我已经发