微信号:gh_15d32a71b93c

介绍:介绍各种前端技巧,帮助提高前端开发的速度,逐渐做到分分钟完成开发.

JavaScript和图像更改

2017-04-29 11:48 web前端程序员

Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。

几年前,也就是在所有花哨的CSS和各种酷炫的HTML5功能出现之前,我们必须创造图像并通过改变让他们“fly”...我还记得当“blink”被添加到HTML时,庆贺时,以及它被删除。

所以我决定试着做一下,也看看我能不能记住一些。第一步是决定做什么,然后是实际的“如何做”。我想,为什么不用我自己的数字图像替换一个时间或者其他的?第一步让我们稍微复习一些比较老的数字。使用我信赖的GIMP可以让它顺利进行。

现在我有了我的数字图像,我启动我的SAP HANA服务器并进入工作台。在那里我打开了XS应用程序。

我坚信这并不完全是“守旧派”,但是我使用它也不必太#tbt了。现在是使用JavaScript实现图像更改的时候了。

为此,我需要先获得当前时间。

现在让我的小时和分钟成为独特的数字。

几年前,我们会做这样的事情,而不是先让HTML中已经有图像。

现在,尽管HTML中有图像我们也可以直接访问它们的元素并动态更改它们。

或者你也许想添加更多,像基于时间的状态指示器?如果这样的话,你是否也需要一个状态指示器会警告你你应该已经离线了?

在20:00时我应该看到黄色警告我,现在几乎是离线的夜晚了?

所以一切都很好,但是现在呢,它能自动跟上吗?漂亮的小圆圈会做一些变化。

我注意到需要添加“秒”到我的时间的效果中,否则它只是停在那里什么都不做。我删除了一些“输出”语句,并更改了我的状态,以检查分钟,并在“小时”后的40分钟内转到“红色”。

我喜欢在休息时间重温一些老技能,希望这对你来说是一个有趣的小休息...



 
web前端程序员 更多文章 强烈推荐:2017年度建立人工智能的五种简单方法 透明背景的JPG图片(使用svg完成) Web性能问题-什么在阻塞DOM? 用Vue 2来建井字棋游戏:第一部分(1) 值得您关注的十一个JavaScript库
猜您喜欢 配置Android项目 - 静态代码分析工具 阿呆带你入门Oracle RAC MySQL存储引擎总结 送完礼物就收工:假日促销 + 精选放送 MDCC 2016 PPT 下载及简单点评