自做的小时钟css3+js

原理参考http://www.yyyweb.com/demo/colorful-clock/index.html

一个挺漂亮的小时钟，虽然挺简陋的。

源代码是自己写。

实现起来不怎么难，大家学习学习吧。

其中用的css3的flex弹性盒子，个人觉得有了这个弹性盒子之后，水平的布局都简单了，不过flex兼容性比较低，所以一些小demo可以用上！

效果如图：

以上纯属个人观点，有误请大家指点出来。

源码附上：https://github.com/ScauZhang/time

时间： 2024-12-07 18:28:18

自做的小时钟css3+js的相关文章

css3-手把手 transform 小时钟

学习css3ing,正在学习transfomr,突发奇想用此做个小时钟,开始吧: 准备前期工作,把时钟的表盘,时分秒针,实时时间标签的大概样子做好,效果如图: html代码如下: <div class="main"> <div id="timeLabel"></div> <div id="hour"></div> <div id="minute"><

[IOS_HTML5]各种JS框架介绍--用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具. 在文章的末尾,也介绍了使用JAVA.C#.Lua以及AS3来开发安卓应用的工具. 希望大家都能找到适合自己的开发工具!祝大家开发安卓/IOS应用一切顺利! PhoneGap 开发语言: HTML, CSS, JavaScript 开发工具: Ph

声明式界面开发小时钟--进阶阶段

先看看游戏规则 <html> <head> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> </head> <body ng-app="ezstuff"> <ez-clock></ez-clock> </body> </h

前端学习笔记--16/5~22/5 jQuery，HTML5+CSS3+JS 简易微信贺卡开发

先写一下上周的总结,基本上没有偷懒,每天都有认真学习前端知识.但是有一点目标不清晰.我上周订下来的计划只完成了50%,即是只完成了坐H5+CSS3+JS的小demo.imooc上的jQuery练习并没有完成,而且还差不少. 周六去了一天潜江吃大虾,不过作为弥补,星期天一整天又把缺的时间补回来了. 至于健身,上周属于间隔期,不过在周日这些计划也都重新启动了.到今天也已经完成了执行. 下面来单步跟踪一下每天学的只是吧. 5.16 jQuery使用each()方法遍历元素. 语法: $(selecto

CSS3+Js制作的一款响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 1 2 3 4 5 6 7 8 9

小程序app.js小结

小程序app.js //app.js import { ApiUrl } from 'utils/apiurl.js'; import { httpReq } from 'utils/http.js'; //以上两个文件为封装的请求数据的接口,文件内容我会放在最后,不用这俩文件的可以安装wx.request(微信开发文档提供方法来请求),这两个文件也是在原方法上做了改动但效果一样的. App({ onLaunch: function () { var logs = wx.getStorageSy

jsoup爬虫简书首页数据做个小Demo

昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固,比如java反射注解,知道一点就是说不出来,很尴尬- 生命不止,学习不止啊之前那个项目 QNews 用的是的第三方的数据平台,所以访问次数会有限制,这就很无奈... 我的博客地址每天只能请求100次-.但是LZ这个穷屌丝也买不起服务器,所以就上网查,有什么别的方法可以获取数据,意外之间发现了jsoup这个强大的框架,就花了上午时间学习了一下,然后下午做了一个小Demo,功能比较单一,请见谅

先做一个“小程序”——关于微信应用号的六大猜想

先做一个“小程序”——关于微信应用号的六大猜想 9月 21 日,苦等了9个多月的时间,应用号终于与我们见面了,命名为「小程序」. 01 为什么推出小程序? 考虑到小程序对整个APP市场的影响,毫无疑问会对现有的APP生态带来一定的冲击.但是,之所以推出小程序,最直接的原因可能是为了构建和扩充微信生态链,让微信更具开放性. 如我们所知,目前微信公众号分为三类: • 服务号,连接人和商品,目前很多电商企业,以及在微信端提供产品和服务的企业都用服务号. • 订阅号,微信官方的定位是阅读,连接人和资讯的

关于C#做个小笔记

RichTextBox控件很强大,不用滚动条就能上下移动看文本. 但是编程中它在winform和WPF里,略有不同. 但是一般的TextBox这个控件在两者里面,我暂时没看到区别,都能用textbox1.Clear()清除文本框. 下面是RichTextBox在winform和WPF里有哪些不同. ------------------------------------------ 分割线 1.RichTextBox控件对象如何追加文本并换行在winform中,向RichTextBox控件