随笔分类 -  web前端开发

1
JavaScript 通过身份证号获取出生日期、年龄、性别 、籍贯
摘要：JavaScript 通过身份证号获取出生日期、年龄、性别 、籍贯（很全） 效果图： 示例代码： //由于没有写外部JS，所以代码比较长！！！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 阅读全文
posted @ 2018-10-08 13:38 滴水穿石！ 阅读(5842) 评论(0) 推荐(0)
Bootstrap自适应各种设备
摘要：<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 手机、平板电脑、台式电脑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initi 阅读全文
posted @ 2018-09-20 13:44 滴水穿石！ 阅读(546) 评论(0) 推荐(0)
css3动画大全
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CSS3动画实现方式大全</title> <script src="jquery-2.1.0.min.js"></script> <style type=" 阅读全文
posted @ 2018-09-05 10:46 滴水穿石！ 阅读(870) 评论(0) 推荐(0)
给HTML5 Video 设置多语言字幕文件
摘要：现在各种支持HTML5的浏览器都能够播放html5视频了，但是对于字幕的支持却很少，我们期待像DVD那样强大的字幕。 往往我们还不得不通过js来做，着实是一件痛苦的事情。 现在IE10率先对HTML5 Video 字幕给与内置的支持，而且还支持多语言，可任意切换，真是太给力了。 示例代码如下： [h 阅读全文
posted @ 2018-03-08 15:30 滴水穿石！ 阅读(2124) 评论(0) 推荐(0)
省时的浏览器同步测试工具Browsersync
摘要：中文网：http://www.browsersync.cn/ 阅读全文
posted @ 2018-01-29 17:02 滴水穿石！ 阅读(123) 评论(0) 推荐(0)
前端开发工具介绍
摘要：一、前端开发工具介绍： 1.chrome谷歌浏览器的访问助手安装和激活；2.sublime text3编辑器的配置与插件安装；3.Atom编辑器的配置与插件、主题的安装与卸载；4.浏览器的实时刷新工具BrowserSync的安装与配置；5.前端神器Emmet插件的使用技巧； 具体介绍第5点.前端神器 阅读全文
posted @ 2017-12-06 11:53 滴水穿石！ 阅读(288) 评论(0) 推荐(0)
CSS3中Animation为同一个元素添加多个动画效果
摘要：CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法，就是说一个元素，只能给它定义一个动画效果，不能同时定义。 需求说明比如说，我想实现一个这样的动画效果: 一颗星星从上往下滑落，当滑落到指定位置时开始闪烁 这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 阅读全文
posted @ 2017-11-06 17:34 滴水穿石！ 阅读(22038) 评论(0) 推荐(0)
animation几个比较好玩的属性(alternate,及animation-fill-mode)
摘要：注释：本例在 Internet Explorer 中无效。 这是摘自w3school的一段关于keyframes的代码，大家有兴趣的可以看一下， http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes 大家可以看到一个红色正方形，从上方运动到下面，再快速回到上面，再按animation:5s;从上面运动到下方，这样周而... 阅读全文
posted @ 2017-11-04 17:17 滴水穿石！ 阅读(2985) 评论(0) 推荐(0)
fullpage.js用法总结
摘要：兼容性: 主要功能： 1.支持鼠标滚动； 2.支持前进后退键盘控制; 3.多个回调函数; 4.支持手机.移动设备; 5.支持窗口缩放自动调整; 6.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等; 7.支持CSS3动画; 实现方法： 1.插入jquery.fullPage.cs 阅读全文
posted @ 2017-10-17 11:33 滴水穿石！ 阅读(2681) 评论(0) 推荐(0)
HTML / CSS技巧 – 可滚动的 tbody（漂亮表格）
摘要：Book List Book List Title ID Country Pr... 阅读全文
posted @ 2017-10-12 17:32 滴水穿石！ 阅读(2170) 评论(0) 推荐(0)
HTML5 表单新增元素与属性
摘要：1 form 属性和 formaction 属性 本课时讲解在 HTML4 中，表单内的从属元素必须书写在表单内部，而在 HTML5 中，可以把他们书写在页面上任何地方，然后为该元素指定一个 form 属性，属性值为该表单的 id，这样就可以声明该元素从属于指定表单了 2 formmethod 和 阅读全文
posted @ 2017-10-12 13:54 滴水穿石！ 阅读(332) 评论(0) 推荐(0)
播放视频插件swfobject.js与Video Html5
摘要：播放视频的方法： 方法一、 使用HTML5播放 your browser does not support the video. poster用来设置视频的封面图， loop是否循环播放 autoplay是否自动播放 controls是否显示控制按钮 缺点：兼容不太好 方法二：使用视频插件swfobject.js 首先下载下载所需要的文件，在demo.html中 ... 阅读全文
posted @ 2017-07-11 11:24 滴水穿石！ 阅读(2998) 评论(0) 推荐(0)
让访问pc端的官网直接跳转到移动端的网站代码
摘要：举个例子：tpshop框架 pc端index.html页面加入以上代码后，移动端访问该域名：http://ns.xxx.cn后就会直接跳转到 阅读全文
posted @ 2017-06-15 16:30 滴水穿石！ 阅读(584) 评论(0) 推荐(0)
HTML5中meta属性的使用详解
摘要：meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。 1、声明文档使用的字符编码 2、声明文档的兼容模式 3、SEO 优化 4、为移动设备添 阅读全文
posted @ 2017-06-15 16:09 滴水穿石！ 阅读(199) 评论(0) 推荐(0)
javascript取url的参数的方法
摘要： 阅读全文
posted @ 2017-06-15 15:31 滴水穿石！ 阅读(285) 评论(0) 推荐(0)
bootstrap悬浮顶部或者底部
摘要：这是bootstrap提供的样式,只需要引入bootstrap.css即可. 需要使用的class样式: navbar navbar-inverse navbar-inner navbar-fixed-top //悬浮顶部样式 navbar-fixed-bottom //悬浮底部样式 contain 阅读全文
posted @ 2017-06-05 14:23 滴水穿石！ 阅读(6522) 评论(0) 推荐(0)
微信扫描打开APP下载链接提示代码优化
摘要：原文链接：http://caibaojian.com/weixin-tip2.html 上一次我发了一篇文章叫“微信打开网址添加在浏览器中打开提示”，里面我发出来了三个代码，分别是纯JS、JS+HTML、jQuery+HTML代码。今天来一个简化版带可以关闭的按钮操作。使用的是纯JS+HTML+CS 阅读全文
posted @ 2017-06-05 14:12 滴水穿石！ 阅读(740) 评论(0) 推荐(0)
iframe高度自适应的6个方法
摘要：原文链接：http://caibaojian.com/iframe-adjust-content-height.html JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以通过CS 阅读全文
posted @ 2017-06-05 14:07 滴水穿石！ 阅读(619) 评论(0) 推荐(0)
JS移动客户端--触屏滑动事件
摘要：移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //手指放到屏幕上时 阅读全文
posted @ 2017-06-05 14:04 滴水穿石！ 阅读(140) 评论(0) 推荐(0)
一些有用的HTML5 pattern属性
摘要：最近在做手机页面时，遇到数字输入的键盘的问题，之前的做法只是一刀切的使用 type="tel"，不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案，最终的结论却令人沮丧。不过也趁机详细了解了下pattern这个属性。 type="tel" 和 type="number" 阅读全文
posted @ 2017-06-05 13:51 滴水穿石！ 阅读(1239) 评论(0) 推荐(0)

1