如何实现 *object* 来改进我的时钟示例 javascript 程序

2024-04-19

这项工作的目标是理解和发挥某些意义object我听说过的概念。

关于赏金

有很多不同的方式/方法可以做到这一点。

My tries https://stackoverflow.com/a/13219373/1765658不是很干净:为了添加第二个时钟和另一个时区,我必须编辑 3 个不同的地方。这不太好(见答案底部)。

我怎样才能做更多的事情useful?

在一开始的时候:

后期编辑:最初的问题是关于在 jquery 和 mootools 之间进行选择,现在已经做出选择了;目标是通过使用来改进这一点mootools.

我写了一个小示例/演示来使用 javascript 和 svg:

var cx  =128;
var cy  =128;
var slen=120;
var mlen=116;
var hlen= 80;
var selem;
var melem;
var helem;
function setvars() {
    selem=document.getElementById("seconds");
    melem=document.getElementById("minutes");
    helem=document.getElementById("hours");
    drawtime();
};
function drawtime() {
    var now=new Date();
    var nows=now.getTime()%60000;
    var nowm=now.getMinutes()*1.0+1.0*nows/60000;
    var nowh=now.getHours()*1.0+1.0*nowm/60;
    var sposx=cx + slen * Math.sin( nows / 30000 * Math.PI );
    var sposy=cy - slen * Math.cos( nows / 30000 * Math.PI );
    var mposx=cx + mlen * Math.sin( nowm / 30 * Math.PI );
    var mposy=cy - mlen * Math.cos( nowm / 30 * Math.PI );
    var hposx=cx + hlen * Math.sin( nowh / 6 * Math.PI );
    var hposy=cy - hlen * Math.cos( nowh / 6 * Math.PI );
    selem.setAttribute("x1",sposx);
    selem.setAttribute("y1",sposy);
    selem.setAttribute("x2",sposx);
    selem.setAttribute("y2",sposy);
    melem.setAttribute("x2",mposx);
    melem.setAttribute("y2",mposy);
    helem.setAttribute("x2",hposx);
    helem.setAttribute("y2",hposy);
    window.setTimeout(drawtime,80)
};
setvars();
#box1    { stroke: black; }
#minutes { stroke: #2266AA; }
#hours   { stroke: #3388CC; }
#seconds { stroke: #CCCC22; }
line,circle {
    opacity:0.65;
    fill:none;
    stroke-width:8;
    stroke-linecap:round;
    stroke-linejoin:round;
    marker:none;
    stroke-miterlimit:4;
    stroke-dasharray:none;
    stroke-opacity:1;
    visibility:visible;
    display:inline;
    overflow:visible;
    enable-background:accumulate
}
<svg xmlns="http://www.w3.org/2000/svg" id="svg2" width="100%"
     height="100%" viewBox="0 0 900 256" version="1.0">
    <title  id="title1">Clock</title>
    <circle id="box1"    cy="128" cx="128"  r="124" />
    <line   id="hours"   x1="128" y1="128" x2="128"  y2="48" />
    <line   id="minutes" x1="128" y1="128" x2="244" y2="128" />
    <line   id="seconds" x1="128"   y1="8" x2="128"   y2="8" />
</svg>

(最初发布于jsfiddle http://jsfiddle.net/MbktF/6/)因为我对 javascript jquery 和/或 mootools 不是很有经验,我想知道是否存在一些更简单的方法,也许以不同的方式编写它。

如何使用 jquery 或 mootools 绕固定中心进行简单旋转:

var hposx=cx + hlen * Math.sin( nowh / 6 * Math.PI );
var hposy=cy - hlen * Math.cos( nowh / 6 * Math.PI );
helem.setAttribute("x2",hposx);
helem.setAttribute("y2",hposy);

how to 客观化这段代码? (如果这可能是一件好事的话)...

所有使用面向对象、特定库的示例,或者其他都欢迎!


您的代码简单明了。如果没有 jQuery 或 MooTools 你的任务很简单,我认为你不应该尝试使用它们。

对于旋转,我认为 jQuery 或 MooTools 中没有内置工具,但可以在 svg 对象上使用矩阵转换,请阅读:http://msdn.microsoft.com/en-us/library/ie/hh535760%28v=vs.85%29.aspx http://msdn.microsoft.com/en-us/library/ie/hh535760%28v=vs.85%29.aspx

或者检查这个问题:SVG旋转变换矩阵 https://stackoverflow.com/questions/9701784/svg-rotate-transform-matrix .

至于制作一个对象:

当然,您可以将代码分割为更多函数,或者创建一个代表当前小时/分钟/秒的对象

var clock = {
    time: {
        s: 0,
        m: 0,
        h: 0    
    },
    pos: {
        x: 128,
        y: 128
    },

   .... anything else you might want to add
};

您首先在一组函数中设置其属性

clock.setTime = function (date) {
    this.time.s = date.getTime()%60000;
    this.time.m = date.getMinutes()*1.0+1.0*nows/60000;
    this.time.h = date.getHours()*1.0+1.0*nowm/60;
};

并在另一组函数中读取它们:

clock.getMinPos = function () {
    var x = ...;// Sine is ok.
    var y = ...;// Cosine is ok.
    // I don't like matrices anyway.
    return [x, y];
};

实际上只是尝试将代码划分为功能任务。一个函数应该只做一件事。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何实现 *object* 来改进我的时钟示例 javascript 程序 的相关文章

随机推荐

  • 按日期过滤 Pandas 数据框

    我有一个带有 日期 列的 Pandas DataFrame 现在我需要过滤掉 DataFrame 中日期在未来两个月之外的所有行 本质上 我只需要保留接下来两个月内的行 实现这一目标的最佳方法是什么 If 日期列是索引 然后使用 loc 进
  • 与您的操作系统或架构不兼容:[电子邮件受保护]

    我使用的是 Ubuntu 15 04 运行以下命令时 npm install fsevents 我收到以下错误 npm WARN optional Skipping failed optional dependency chokidar f
  • NT 事件日志单条消息大小

    谁能告诉我 Windows NT 日志消息的最大大小是多少 我知道可以将事件日志的最大日志大小从 32 MB 重置 我对 NT 事件日志中单个消息可以保存的内存感兴趣 提前致谢 在 Windows Server 2008 中 单个事件日志条
  • JavaFX 过渡动画等待

    这么快 我正在做一个演示计算机图形绘制方法的程序 我需要创建时间线或操作历史记录 例如 placeVertex x y moveVertex newX newY 等 并迭代 向前和向后 自动或手动 我已经通过使用命令设计模式实现了这一点 但
  • WordPress 动态自定义菜单未显示正确的结果

    我正在创建一个动态自定义菜单 显示特定类别的所有帖子链接 例如侧边栏中的菜单小部件 它应该是动态的 这意味着每当我在该类别中发布帖子时 菜单都应该包含我发布的帖子 而无需我在菜单中物理拖放新帖子 这是我的代码 我想要的帖子的类别 ID 4
  • 在Virtualenv环境中安装python-numpy

    我想在 Virtualenv 环境中安装 python numpy 我的系统是Ubuntu 12 04 我的python是2 7 5 首先我安装了 Virtualenv sudo apt get install python virtual
  • 如何只获取Python函数的返回值?

    我正在尝试通过 Python 学习编程 我想知道是否可以只获取函数的返回值而不获取其其他部分 这是代码 比方说 这是主要功能 variable a 5 while variable a gt 0 input user raw input i
  • 如何解决 pandas 读取大 csv 文件时的内存问题

    我有一个 100GB 的 csv 文件 其中有数百万行 我需要在 pandas 数据框中一次读取 10 000 行 并将其分块写入 SQL 服务器 我按照建议使用了 chunksize 以及 iteartorhttp pandas docs
  • 使用 SQL Server AdoJobStore 配置 Quartz.NET

    我在尝试让 Quartz NET 与 AdoJobStore 一起使用时遇到问题 这里的其他问题似乎都没有遇到我遇到的问题 我能够在没有 AdoJobStore 配置的情况下正常工作 但希望最终保留所有内容 但是在尝试时出现错误GetSch
  • Spring Batch ItemReader 列表仅处理一次

    我正在尝试使用创建 Spring Batch 作业ListItemReader
  • 替换 & 为 &

    我正在尝试使用 W3C 验证系统进行验证 但出现错误 第 59 行 第 47 列 字符 是分隔符的第一个字符 但作为数据出现 我知道原因是 您使用了未转义的与号 这在某些情况下可能有效 但建议使用 amp 这始终是安全的 在表格中 我是这样
  • jQuery Tokeninput:只读不起作用

    我正在使用在以下位置找到的插件http loopj com jquery tokeninput http loopj com jquery tokeninput 在创建具有 Web 应用程序管理员访问权限的用户列表的字段中 搜索 添加和删除
  • Stop-Service Cmdlet 无法打开存在的服务

    我正在尝试编写一个 PowerShell 脚本来停止本地计算机上的服务 当我运行 get service cmdlet 时 它按预期工作 当我使用 stop service cmdlet 时 出现错误 指出不存在具有我指定名称的服务 如果这
  • 如何将文件的内容与列最后一个数字的增量连接起来

    我有一个包含一些内容的文件 需要重复第 n 次并添加最后一列号的增量 Input content of a file TCTA 7 ccta TCTA 1 TCTA 8 ccta TCTA 1 TCTA 9 ccta TCTA 1 TCTA
  • 如何为命令 net user 在列表中返回的每个用户运行批处理文件?

    我的目标是制作一个通用代码 循环遍历计算机中的所有用户帐户名称并将输出发送到批处理文件 net user 命令输出用户列表 但我想将每个用户名分配给一个参数 所以我应该使用for f命令去做 这可能看起来很简单 但请记住用户名可能在任何位置
  • FFT 的窗口大小与数据长度

    我正在尝试对流音频数据进行快速频谱分析以捕获元音 类似于 JLip sync 使用 PyAudio 在短时间内 0 0625 秒 捕获小块 1024 的语音数据 使用 numpy fft 进行分析 并使用 numpy hanning 窗口消
  • 你如何知道 NSURLSession 对象何时已被 iOS 失效?

    我在测试中发现一个错误 偶尔会收到以下 iOS 错误 标识符为 GUID 的后台 URLSession 已存在 即使我在每次测试后的清理调用中对 NSURLSession 调用 invalidateAndCancel 我正在寻找一种方法来等
  • 如何通过 SOAP API 禁用/停用 SalesForce 用户?

    我想使用 SOAP API 以编程方式禁用用户 我怎样才能做到这一点 我正在使用合作伙伴 API 并且拥有开发人员版本 我已设置管理用户权限 我已经经历过this http www salesforce com us developer d
  • 存储徽章标准的最佳方式?

    我一直在考虑如何在新网站上实现类似于SO的徽章功能 存储徽章标准的最佳方式是什么 两个想法 All code 第二系统 创建一个元架构来定义徽章及其标准 在数据库中存储一些信息 并让代码查询它以找出徽章及其标准 还有更好的方法吗 Rules
  • 如何实现 *object* 来改进我的时钟示例 javascript 程序

    这项工作的目标是理解和发挥某些意义object我听说过的概念 关于赏金 有很多不同的方式 方法可以做到这一点 My tries https stackoverflow com a 13219373 1765658不是很干净 为了添加第二个时