img

咖啡与代码

咖灰怪’s Blog

“当你发现自己的才华撑不起野心时,就请安静下来学习吧。”
Swiper:移动端网站的内容触摸滑动 JavaScript 插件
2018-02-17 20:55    JavaScript 类库与拓展    1185 阅读    0条回复

之前过节,想自己做点H5页面的时候,了解到了 Swiper 这款插件,发现非常好用,简单粗暴!通过Swiper这个插件,我们可以自己徒手快速撸出好看的H5页面。 1. 什么是 Swiper Swiper 是纯 javascript 打造的滑动特效插件,常用于移动端网站的内容触摸滑动。Swiper 能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 GitHub: nolimits4web/...

WebSocket实现
2017-06-23 16:12    JavaScript 前端综合    574 阅读    0条回复

1. 什么是WebSocket? WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 可以用来替代长轮询(long polling);long polling 就是客户端不停地向服务器发送请求以获取最新的数据信息,比如说用ajax轮询就是一种方式。 应用场景:一些高实时的应用场景,比如社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、...

PACE:页面自动加载进度插件
2017-06-23 11:46    JavaScript 类库与拓展    612 阅读    0条回复

1. Pace.js pace是一个页面自动加载进度的js插件,而且使用特别方便。 主页地址: PACE Github地址: PACE 官方也提供了很多加载样式,都很不错,例如: 更多主题可以在这里看: pace/docs 并且提供wordpress插件: PACE WordPress插件 2. 使用 2.1 基本用法 只需要引入一个pace.js文件和一个主题文件,就自动集成了该功能,在加载页面...

QRCode.js:基于JQuery的生成二维码JS库
2017-06-22 23:50    JavaScript JQuery 类库与拓展    328 阅读    0条回复

1. QRCode.js QRCode.js是一个二维码生成javascript库;支持跨浏览器的HTML5 Canvas和表格标签的DOM操作;并且不依赖其它的库或拓展。 主页: QRCode.js Github: davidshimjs/qrcodejs 2. 用法 2.1 基础用法 <div id="qrcode"></div> <scrip...

JS复制指定id内容到粘贴板(Ctrl+C效果)
2016-12-12 14:44    JavaScript    313 阅读    0条回复

最近捣鼓一个小问题,搞一个按钮,点击复制url到黏贴板,但是不是当前页面url,而是对应一个元素的url,且一个页面会有多个url。一开始找到一个方法,但是竟然只兼容IE浏览器,神奇了,竟然有只兼容IE的东西。后来发现一个zeroclipboard.js这个插件,但是怎么也搞不出那个效果,有点麻烦。 最后翻到了一个js封装好的方法,有效! 想要实现的一个效果是,下面html代码: <tr&g...

PHP地理信息搜索功能——接入高德地图Web服务API,关键字搜索
2016-07-12 14:19    PHP ThinkPHP JavaScript    350 阅读    0条回复

效果 搞了一个基于高德地图Web服务API,关键字搜索服务的东西,先来效果图: 搜索不到内容时: 实现 HTML代码 前端部分代码,样式就省略了: 城市:<input type="text" id="searchPlaceCity" placeholder="输入城市"> 关键字:<input type="te...

用Jquery实现动态添加和删除tr行
2016-05-19 23:36    JavaScript JQuery    389 阅读    0条回复

一 效果 这里放一个,用Jquery实现动态添加和删除tr行的小例子,之前自己琢磨的,毕竟js不熟,摸索中,下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样。 二 实现 下面是代码: <html> <head> <meta http-equiv="Content-Type" content=&qu...

JavaScript中获取当前日期的代码
2016-04-07 00:59    JavaScript    279 阅读    0条回复

如果要用js来获取当前的时间,比如“2016年4月7日星期四”,我们可以这样写: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script...

JS代码实例——弹出多选选择框
2016-04-01 13:16    JavaScript    659 阅读    0条回复

1. 效果 最近在搞一个多选的功能,发现实现下拉框多选比较麻烦,网上搜是有一些js插件什么的可以实现,但是比较麻烦。于是搞了这么一个JS的弹出框,进行多选提交后显示在页面上。 效果是这样的,初始的样式如下,可点击选择: 点击选择后弹出一个选择框,多选的: 点击选择将同步更新到页面上,然后进行后续操作: 2. 实现 2.1 HTML代码 <input type="hidden&quo...