css3clock.js - 一个用CSS3与纯js实现的简单时钟

前言项目代码明细可以查看我Github上的源码:https://github.com/nelsonkuang/css3clock.js 实现思路主要是用CSS3控制时针.分针和秒针旋转:时针每12小时转360度,分针每小时转360度,还有秒针每分钟转360度:但初始状态的各条针的位置和角度就要用js来控制,用js去获取浏览器加载进来的css rule,然后根据时钟的初始时间分别计算出时针.分针和秒针的初始角度去调整css rule来初始化时钟. 实现过程 1.静态实现:先用html+css把…

【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

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

baguetteBox.js响应式画廊插件(纯JS)

baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. Demo页面 github 中文使用特点纯JS编写,无任何依赖支持多重画廊(Multiple-gallery)效果, 且允许自定义参数支持手势滑动(仅在支持多点触控设备上) 现代简约风格图像字幕支持响应式的图像 CSS3转换 SVG按钮,没有额外的文件下载压缩后大约2.3KB 安装方法…

impress.js 一个创建在线幻灯的js库

真的好奇怪,我居然会写前端技术的博客.没有办法的,最近实习,看的大多是前端.所以今天就用这个来练练手了. Impress.js 是一个非常棒的用来创建在线演示的Javascript库.它基于CSS3转换和过渡.工作于现代浏览器(Google Chrome.Safari.Firefox 10 或 IE10).并受prezi.com的理念启发的演示工具.如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常不错.在线De…

js 图片压缩上传(纯js的质量压缩，非长宽压缩)

下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript…

纯js实现复制到剪贴板功能

在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯JS方法复制文本到剪切板. 插件名是Clipboard.js,该插件不依赖 Flash,而是依赖于最新HTML5推出 Selection API 和 execCommand API. execCommand 支持以下浏览器:Chrome浏览器42+,火狐41+,IE9+.Safari目前仍不支持cut…

如何使用纯js实现一个带有灰色半透明背景的弹出框

原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createElement("div"); backgroundDiv.style.cssText = "left:0;top:0;position:fixed;background:#ddd;opacity:0.8;width:100%;height:100%"; body.appen…

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

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

F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员还可以随时根据企业的情况调整流程,通过流程监控实时分析流程实例的运行数据分析,提供企业流程的不断优化的依据,同时智能流程版本管理功能,当流程变化转大时旧的实例按旧的流程定义运转,新启动的流程按新版本的流程运转,新旧隔离互不影响. F2本着专注的精神.精湛的技术.卓越的品质.做业界最优秀的流程引…

［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head><style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5%} LABEL {…

[分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localstore,demo见http://xueduany.github.io/localstore/,下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstorage…

纯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…

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

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

纯JS Web在线可拖拽的流程设计器

F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员还可以随时根据企业的情况调整流程,通过流程监控实时分析流程实例的运行数据分析,提供企业流程的不断优化的依据,同时智能流程版本管理功能,当流程变化转大时旧的实例按旧的流程定义运转,新启动的流程按新版本的流程运转,新旧隔离互不影响. F2本着专注的精神.…

纯JS画点、画线、画圆的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…

纯JS文本比较工具

前段时间由于工作需要写了一个纯JS文本比较工具在这里与大家分享下算法有待优化,还希望大家多多指教先上效果图: 奉上源码(把源码保存为html格式的文件就可以直接运行了): <!doctype html> <html> <head> <title>文本比较工具</title> <style type="text/css"> *{padding:0px;margin:0px;} html,body{ overfl…

纯js实现html转pdf

项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式.简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf.咋不上天呢--查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种:1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass.2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试了一下,效…

纯JS单页面赛车游戏代码分享

分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>Best Fly Car</title> <style> input { border: 1px solid yellow; margin-l…

纯js实现DIV拖拽

写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但发现这段代码使用前必须设置top和left样式属性,否则拖动时div会有跳动,而且不支持多个div的拖动.于是对代码大概修改了一番,贴在这里,以备后用,希望大神勿怪. /** * 纯js实现多div拖拽 * @param bar, 拖拽触柄 * @param target, 可拖动窗口 * @param in…

七夕情人节表白-纯JS实现3D心形+图片旋转

七夕情人节就快到了,这里献上纯js表白神器-心里都是你,预览: 技术点:css-3d.js-随机色.js-transform 1.html: <div class="heart"> <div class="cube"> <div> <img src="images/1.jpg" width="100" height="100" alt="">…

CSS3动画和JS动画的比较

前言之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画优点: js动画控制能力强,可以在动画博凡过程中对动画进行精细控制,开始.暂停.终止.取消都是可以做到的动画效果比css3动画丰富,比如曲线运动,冲击闪烁,视差滚动效果,只有js动画才能完成 js动画大多数情况下没有兼容性问题,而css3动画有兼容性问题缺点 js动画的复杂度高于css3 js在动画浏览器的主线程…

纯js轮播图练习-2，js+css旋转木马层叠轮播

基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web当中,也是出现了很多使用了这种轮播的方式. 下方是网易云音乐的客户端(PC)的海报. 自己跟着视频也学着做一个web的模仿一下. 以下为轮播图全部代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu…

纯js轮播图练习-1

偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理掌握核心的理论知识和技术的操作,其他的都可以在这个基础上做出细微的更改和不断的去完善. html代码,先写好要的基本元素,比如轮播的图片等. 这里使用的是简单的色块,和两个按钮. 基本上轮播图布为轮播区和操作区: 轮播区:轮播图片或者的色块的区域操作区:操作轮播图的按钮,可以进行左右轮播该部分先排除对操作区的布局,主要是轮播区进行了三个方面的布局…

EazyUI主页框架搭建纯JS样例

採用Jfinal+EazyUI 执行起来就好能够了眼下还未增加后台代码纯JS代码搭建的一个二级菜单+主页客户换肤, 给使用EazyUI的新人一个高速可用的JS 搭建界面也给自己保存下界面效果下载地址 http://download.csdn.net/detail/qq873113580/8902255…

纯js实现省市级联效果

我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧很清晰明了,什么样的文件放入什么样的文件夹中,劝大家还是养成分文件夹存放的习惯,这样看的条理清晰也方便我们管理,以及维护等等可以看到,我将实现省市级联的js文件放入了js文件夹中,将得到的省市的json数据放入json文件夹中,界面就不用说了吧这里先放上我们的界面代码 <%@ page langu…

纯JS实现鼠标每隔一段时间才能让页面再次滚动

这里没有用到浏览器的兼容性写法,只是提供思路(这里使用的是Google浏览器的方法) javascript代码部分: //获取html元素var oHtml =document.documentElement;//功能实现的主要依赖var count = 1: oHtml.addEventListener("mousewheel",function (e) { var event = e || window.event; if(count === 1) { function () {…

纯js的统计图插件-统计图

第一次写博客,写的不到望大家见谅! 今天给大家分享一个纯js的插件(统计图),有知道的可以在下面评论一起谈论一下,刚学着的时候,我是看了好久才看懂的一个基本结构,到后来我才知道原来直接去原网站上找到复制下来js就可以了. 这是他的网址:https://www.echartsjs.com/zh/index.html 这个是人家官方的网址,大家可以现去看一下人家的效果,效果蛮多的,基本上可以满足基本项目的需求. 下面我来给打架举一个例子: <!DOCTYPE html> <html la…

NPM酷库：jsdom，纯JS实现的DOM

NPM酷库,每天两分钟,了解一个流行NPM库. 昨天认识了一个在Node.js环境下操作HTML的库 cheerio,cheerio实现了jQuery接口,用起来十分方便.为什么不直接用jQuery呢?因为Node.js环境中没有实现DOM对象. jsdom 今天,我们要学习的jsdom就是一个纯JS实现的DOM,jsdom可以在Node.js环境中"模拟出"DOM环境,像jQuery这样对DOM依赖的库就可以在Node.js中运行了. const jsdom = require(&q…

纯JS前端分页方法（JS分页）

1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本地进行一些简单的分页处理以减轻浏览器渲染时的内存损耗.如后台传回的数据条数非常多,达到几千条甚至上万条,但是后台又不方便分页传回数据,这个时候就只能前端先获取所有数据保存下来,然后前端本地进行分页并渲染显示. 2.只需要一个纯原生的js函数就可以实现前端的分页功能,直接上js代码: /** * @n…

js+vue、纯js 按条件分页

听说大牛都从博客开始的... 人狠话不多,翠花上酸菜代码: 有注解基本上都看的懂!但是自己还是要注意以下几点,免得以后再浪费时间. #.vue 中监听事件 v-on:change=“vueChange($event.target.value)”(或@),注意纯 js中监听事件 onchange="JSChange( this.options[this.options.selectedIndex].value )"来获得 value;也可以在函数中拿到标签 Dom 用 addvad…

【css3clock.js - 一个用CSS3与纯js实现的简单时钟】的更多相关文章