一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html> <head> <title>打字效果</title> <meta http-equiv="Content-Type" Content="text/html;charset=gb2312" /> <style…
Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress.js 为网页中的任何加载中内容(图片,视频等)向用户呈现进度条.它可以用在所有的元素,包括文本输入框,文本域,甚至整个页面.它很轻量,易于似乎用和定制,而且是免费和开源的. 您可能感兴趣的相关文章 2013年最受欢迎的10篇前端开发博文 小伙伴们惊呆了!8个超炫的 Web 效果 35个让人惊讶的…
最近需要实现为网页添加水印的功能,由于水印的信息是动态生成的,而百度谷歌上的方法往往都是为网页添加图片水印或为图片添加水印,而为网页添加文字水印相关资料较少,于是就自己动手写了这个代码. 通常加动态水印的思路是:后台服务端根据参数动态生成图片,前端设置body的background-url或者利用遮罩层+事件委托的方式实现. 本文在这里主要是利用HTML5中canvas来实现动态生成图片,再利用body设置background-url来实现为网页增加文字水印 代码如下: /** * 为网页添加文…
Spin-Wheel 实现鼠标在网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的. 问题分析与实现 这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时也不会是一个标准的圆,通常都是很不规律的.这点上我网上找了找发现浏览器的鼠标手势实现了. 而且我找了一个人实现的手势识别,是通过计算两个点形成的角度来判断,我开始也觉得这种方法不错.但是我在具体实现的时候想到了另一个方法. 我的实现方法:把一个圆分为4个等分,也就是扇区:左上,左下,右上,右下.然后…
不少技术博客有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢? 其实实现的方式很简单,可以在我的网站页面上绑定一个copy事件,当你复制文章内容的时候,自动在剪切板文字后面加上一段版权声明. 我这边是没有加这些的,代码什么的想复制就复制好了.大家都是靠代码技能吃饭的,可以体会写代码的不易,相信一定会尊重知识劳动成果——保留出处等版权信息的. 效果示例 : 代码示例: <body> <p>是的你没有看错, 我还是在路边吃快餐, 在北京市的三里屯…
<!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-T…
user-select有两个值: none:用户不能选择文本 text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整 <style> body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*…
function getSelectedContents(){     if (window.getSelection) { //chrome,firefox,opera         var range=window.getSelection().getRangeAt(0);         var container = document.createElement('div');         container.appendChild(range.cloneContents());…
<html> <script> function getDate(){ var d,s,t; d = new Date(); s = d.getFullYear().toString()+"-"; t = d.getMonth()+1; s += (t>9?"":"0")+t+"-"; t = d.getDate(); s += (t>9?"":"0"…
下边的HTML代码,可以取出日期与星期 <html><body><h1><script language=JavaScript>var d, s = "";var x = new Array("星期日", "星期一", "星期二","星期三","星期四", "星期五","星期六");d = new D…