纯js+html+css实现模拟时钟

前几天没事写的个模拟时钟,代码仅供小白参考,大神请自动绕过. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟时钟</title> <style> body { margin: 0; padding: 0; } #blockDial { width: 200px; height: 200p…

使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 Animation:时分秒指针转动. :before/:after :伪元素基本思路: <div id="clock" class=""> <ul> <li class="kedu"></li> &l…

纯js和纯css+html制作的手风琴的效果

一:纯css+html的手风琴效果这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;list-style: none;} #div{width: 1180px;height: 405px;bo…

css模拟时钟

css模拟时钟思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appendChild css3旋转: transform:rotate(30deg); css3改变旋转中心点: transform-origin:0 0; 获取当前时间, 把时间数字转换为度数 <!DOCTYPE html> <html lang="en"> <…

纯js自动批量引入js、css插件，支持自定义参数

//autoload.js ;! function(e) { var autoload = e.autoload || {}; e.autoload = autoload; e.autoload = new function() { this.options = { id: 'autoload', } var o = this.options; this.include = function(_opt) { o = _opt; var id = document.getElementById('…

js,jquery,css,html5特效

包含js,jquery,css,html5特效,源代码本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全版本下载 CSS3实现手机移动端触屏向上拖动的提示箭头动画 jQuery+HTML5弹出创意搜索框层 html5手机端的点击弹出侧边滑动菜单代码纯css3艺术文字样式效果代码纯css3手机页面图标样式代码 jQuery自动与手动图片切换效果下载纯css3天气动画场景特效 HTML5填充颜色的f…

纯js实现瀑布流布局及ajax动态新增数据

本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: ? 1 2 3 4 5 6 7 8 9 10 1…

一个模拟时钟的时间选择器 ClockPicker

最近开发的一个模拟时钟的时间选择器 ClockPicker,用于 Bootstrap,或者单独作为一个 jQuery 插件. 源代码托管在 GitHub 上: ClockPicker 最近项目中需要用到一个时间选择器,之前用到的 bootstrap-datetimepicker 在选择日期时蛮好用,但是它的时间选择(时:分)却有点别扭,后来发现 Android 上调闹铃时的选择器挺不错,于是决定自己开发一个类似的模拟时钟的时间选择器. 最开始只是打算做一个用于 Bootstrap 的组件,后来发…

JS、CSS以及img对DOMContentLoaded事件的影响

最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件.一个是强大的令人发指的性能分析工具,一个是重要的性能指标,于是就用Timeline对DOMContentLoaded事件进行了一番研究. 前端的纯技术就是对规范的认知什么是DOMContentLoaded事件? 首先想到的是查看W3C的HTML5规范,DOMContentLoaded事件在什么时候触发: Once the user agent st…

纯JS实现KeyboardNav(学习笔记)二

纯JS实现KeyboardNav(学习笔记)二这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码预览地址最终效果 KeyboardNav使用指南: 左下角为网站的icon,'.'代表网站无icon或未设置网站按键盘上相应的按键进入对应网站鼠标放上去可编辑并保存网站,除了初始网站,用户编辑的网站存在本地cookies 清空cookies后保存在本地的网站将被清除,还原会初始状态 CSS样式…