AngularJS 计数器计数到目标数

2024-05-07

我是 Angular 的新手,想在 JQuery 中实现同样简单的函数扩展, 但使用指令(据我所知,这就是应该如何完成的)。

有人知道准备实施吗?

我的搜索最终只找到了 JQuery 解决方案,但我不知道如何将其转换为 Angular。

这就是我需要做的:

链接到示例:http://jsfiddle.net/YWn9t/ http://jsfiddle.net/YWn9t/

你能帮我吗?

函数声明:

$.fn.countTo.defaults = {
    from: 0,  // the number the element should start at
    to: 100,  // the number the element should end at
    speed: 1000,  // how long it should take to count between the target numbers
    refreshInterval: 100,  // how often the element should be updated
    decimals: 0,  // the number of decimal places to show
    onUpdate: null,  // callback method for every time the element is updated,
    onComplete: null,  // callback method for when the element finishes updating
};

如何使用:

jQuery(function($) {
        $('.timer').countTo({
            from: 50,
            to: 2500,
            speed: 5000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });

html:

<span class="timer"></span>

取自:堆栈溢出 https://stackoverflow.com/questions/2540277/jquery-counter-to-count-up-to-a-target-number


好吧,它对我不起作用,我没有找到正确的实现,但它帮助我实现我自己的指令。

html:

<count-up count-to="1000" interval="1"></count-up>

指令.js

directive('countUp', ['$compile',function($compile,$timeout) {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            countTo: "=countTo",
            interval: '=interval'
        },
        controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {
            $scope.millis = 0;
            if ($element.html().trim().length === 0) {
                $element.append($compile('<span>{{millis}}</span>')($scope));
            } else {
                $element.append($compile($element.contents())($scope));
            }

            var i=0;
            function timeloop () {
                setTimeout(function () {
                    $scope.millis++;
                    $scope.$digest();
                    i++;
                    if (i<$scope.countTo) {
                        timeloop();
                    }
                }, $scope.interval)
            }
            timeloop();
        }]
    }}])
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 计数器计数到目标数 的相关文章

  • 将 JSON 发布到 Python CGI

    我已经安装了 Apache2 并且 Python 可以工作 但我有一个问题 我有两页 一个是 Python 页面 另一个是带有 JQuery 的 Html 页面 有人可以告诉我如何让我的 ajax 帖子正常工作吗
  • 使用命名的成功/错误回调在 AngularJS 中声明一个 Promise

    我正在尝试做一些与 http 服务非常相似的事情 根据我的理解 http 返回一个 Promise 对象 使用它时 语法是 http success function data success callback error function
  • 无法读取未定义的“触及”属性

    为什么我会收到此错误无法读取未定义的属性 为什么无法读取formName controls email touched但它能够阅读formName get custDetails touched
  • 将异步事件监听器与 Nestjs EventEmitter 模块和无服务器函数结合使用

    我正在尝试在 Nestjs EventEmitter 模块的帮助下实现具有无服务器 lambda 函数的异步工作线程 处理程序在发出事件时被调用 但该函数在 async await 调用之前关闭 我尝试过同时使用emit and emitA
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方
  • Firebase 身份验证在 iOS 登录时卡住,没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged
  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • jQuery / Ajax:如何循环遍历数组作为 Ajax 成功函数的一部分

    我有一个阿贾克斯调用返回一个数组并需要对该数组中的每个值执行某些操作 到目前为止 我有以下内容 但这会返回以下错误 Uncaught TypeError Cannot use in operator to search for length
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • @aspnet/signalr 与 @microsoft/signalr javascript 库

    aspnet signalr 与 microsoft signalr javascript 库有什么区别 两者似乎都对 DotNetCore SignalR 有效 两者似乎都很活跃 在一些教程中 我找到 aspnet signalr 在Do
  • JavaScript Promise 不执行 .then()

    我在 JavaScript 中的 Promise 方面遇到了一些问题 我想做的是获得一个地址列表 然后对于每个地址 我需要调用地理编码 API 来获取 lat lng 然后我将继续将标记与热图一起绘制 这是我的代码 let promiseK
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • jQuery:单击外部元素以“关闭”使用toggleClass 出现的菜单

    我已经构建了一些导航 针对移动网络 它使用 jQuery 中的toggleClass 方法来隐藏和显示菜单 单击 MENU 图标 按钮可在菜单 div 上打开和关闭类 active 显示 隐藏 我一直在拼命寻找一种通过单击菜单外部 页面上的
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur
  • 如何:带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击
  • 在方法内部执行方法

    我目前正在 FreeCodeCamp 中进行 JavaScript 练习 我的代码应该使用的测试用例之一是函数调用 如下所示 addTogether 2 3 这是我得到的基本功能 function addTogether return 当我
  • 搜索多维数组 JavaScript

    我有一个如下所示的数组 selected products 0 r1 7up 61 Albertsons selected products 1 r3 Arrowhead 78 Arrowhead selected products 2 r

随机推荐

  • Android SQLite 列和索引最佳实践

    我开始在我的 Android 应用程序中使用 SQLite 我对数据库并不陌生 我有很多年使用 Delphi 进行数据库工作的经验 这确实减轻了使用数据库的一些工作 在应用程序中 可能有一张包含多列的表格 从表中读取数据时 会执行一些 SQ
  • 实体框架 4.1:重写 IEnumerable 验证

    public abstract class Animal IValidatableObject public string Id get set public string Name get set public virtual IEnum
  • 在 iOS 应用程序中处理数据(选择什么?NSData、CoreData、sqlite、PList、NSUserDefaults)

    当我开发 iPhone 应用程序 时间跟踪器 待办事项列表等 时 我永远不知道处理数据的最佳方式是什么 有一次我使用了 plist 下次使用 sqlite 或 CoreData 您如何决定什么最适合您的项目 只谈数据管理 例如 如果您想开发
  • 如何使用 Angular 在 ASP.NET Core 应用中正确实现 Windows 身份验证

    I just finished creating an ASP NET Core app with Angular as described in this https learn microsoft com en us visualstu
  • 如何创建仅包含某些可扩展项目的列表?

    我正在尝试编写一个包含一些可扩展项目和一些单个项目的列表 我希望拥有它 以便当单击单个项目或可扩展列表子项时 我可以根据该项目的文本调用意图 我认为可扩展列表可以工作 但是有没有办法在可扩展列表中设置项目 以便它们没有可扩展列表图标 我应该
  • 使用数据源时无法更改 datagridview 单元格颜色

    我有一个有趣的问题 我正在尝试使用数据表作为 datagridview 的数据源 我想对表格的某些单元格进行着色以指示各种事物 但由于某种原因 颜色不会显示 所以下面的代码显示了一个未着色的单元格 dataGridView1 DataSou
  • 有没有办法从密码结果中删除 _id _type

    我使用 apoc convert toTree 过程将查询结果转换为树 然后过滤结果以仅获取几个属性 但是 在生成的有效负载中 我得到了两个无法删除的属性 id 和 type 这是我的查询 我应该只获取 prefLabel 和 uri MA
  • 测试功能打印行为

    我有一个函数 foo 它使用 print 打印大量消息 我想编写单元测试来测试打印消息的正确性 如何获取打印的消息而不是在控制台中打印它 例如 def foo x print Value is x assertEqual OUTPUT fo
  • 在 C++ 中使用 std::atomic 与 std::condition_variable 暂停和恢复 std::thread 的方法

    这是一个单独的问题 但与我问的上一个问题相关here https stackoverflow com questions 40544480 c correct way to pause resume an stdthread 4054476
  • 使用 Javascript 提交表单

    我的一些表单是用Javascript JQuery提交的 所以不会发生页面刷新 但我注意到我的两台计算机之间的浏览器存在奇怪的行为 在一台计算机 以及我测试过的所有浏览器 上 我的表单提交按预期执行 我的另一台电脑 Mac 时好时坏 我将提
  • Rails 4 - 如何安装“jquery-ui”?

    为了使用 jquery 自动完成插件 我需要安装jquery ui gem 到目前为止 我的 gemfile 中有以下内容 gem jquery rails 所以我补充道 gem jquery ui rails And to applica
  • 获取主目录的跨平台方式是什么?

    我需要获取当前登录用户的主目录的位置 目前 我在 Linux 上使用了以下命令 os getenv HOME 但是 这在 Windows 上不起作用 执行此操作的正确跨平台方法是什么 你想使用os path expanduser http
  • C#.net 中的 XML 数据库

    我正在为一些网站开发WPF客户端程序 它使用 XML 数据库 我是 XML 新手 请有人解释一下如何创建 附加 最重要 编辑 读取和加密 XML 文件 我知道这是一个大问题 但是 事情很紧急 必须尽快完成工作 在网上查了一下 没有得到正确的
  • Windows 注册表中的 DefaultConnectionSettings 值的格式是什么?

    Windows 注册表项 HKCU Software Microsoft Windows CurrentVersion Internet Settings Connections 包含一个名为的二进制值DefaultConnectionSe
  • if 语句中哪个条件为真

    说我有一个if声明本身 if condition1 condition2 condition3 do something 当我们进入循环时 是否可以找出这 3 个条件中哪一个为 true 是的 您可以使用以下命令单独检查每一项 if con
  • 使用express-fileupload上传文件

    我正在尝试使用express fileupload上传文件 但没有成功让它工作 我可以让文件 在本例中为图像 上传 因为我可以让控制台显示使用正确文件夹上传的图像 启动 js router get upload function req r
  • C# 将表导出到 Excel

    如何使用以下方法将此数据表导出到 Excel Microsoft Office Interop Excel 我有这个代码 女巫抓取主表中的所有数据 并希望将其导出到 Excel 以获得更好的视图 不想使用数据网格 我认为有很多关于这个主题的
  • 如何创建随机矩阵?

    我想创建一个随机矩阵 如 100 50 25 22 75 195 我的代码是 n 1 r 2 e 3 sup for i in range n sup1 for c in range r sup0 list random randint 2
  • 如果按下子视图的按钮如何取消 UIGestureRecognizer

    我正在努力从手势识别器中获得我想要的行为 特别是在其他手势已触发时取消某些手势 我有一个滚动视图设置为分页和每个页面中的多个子视图 我添加了一个触摸手势识别器 如果用户点击页面的右侧或左侧 则可以滚动到下一页或上一页 Add a gestu
  • AngularJS 计数器计数到目标数

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