js下 Day12、案例

一．垃圾分类效果图: 功能思路分析: 1. 鼠标按下 (1) 获取鼠标到元素的距离(e.offsetX) (2) 开启开关变量 (3) 获取事件源 (4) 记录垃圾初始位置 2. 鼠标移动 (1) 当开关变量为真时,修改垃圾的位置即的left和top (2) 垃圾位置 = 鼠标位置到页面位置 - 鼠标到盒子的位置 3. 鼠标抬起 (1) 关闭开关变量 (2) 循环每一个垃圾桶,通过 getBoundingClientRect()方法获取垃圾桶的四个边界,判断鼠标是否进入垃圾桶 (3) 如…

原生JS下拉加载插件分享。

无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",function(data,obj){ // var str = ""; // data.data.forEach(function(item,index){ // str += "<li>" + item.title + "</li>";…

js下拉框

Js下拉框 http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html…

chart.js图表库案例赏析，饼图添加文字

chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB. 前天用了一下,由于以前也稍微用过,今天总结了一下(水平有限,如果问题,请不吝赐教): 开发中文文档:http://www.bootcss.com/p/chart.js/docs/ ch…

CSS+JS下拉菜单和纯CSS下拉菜单

下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定位它. 有两个问题需要注意, 第一个问题,列表项设置了float浮动,因此列表也要浮动已防止列表收缩: ul.nav,ul.nav ul{float:left} ul.nav li{float:left} 第二个问题,子导航的定位 ul.nav li ul{position:absolute;lef…

小议 js 下字符串比较大小

原文:小议 js 下字符串比较大小之前群里有人问如何比较两个时间大小,他的时间格式是 2014-08-08 而不是 2014-8-8.所以我给的方法是直接比较,如: var a = "2014-08-08"; var b = "2014-09-09"; console.log(a>b, a<b); // false true 很方便不是么,但是原理是什么呢? 打开 ECMA 第 11.8.5 节 The Abstract Relational Com…

node.js 下依赖Express 实现post 4种方式提交参数

上面这个图好有意思啊,哈哈, v8威武啊.... 在2014年的最后一天和大家分享关于node.js 如何提交4种格式的post数据. 上上一篇说到了关于http协议里定义的4种常见数据的post方法 ,详细介绍请点击查看. 分别是这四种: www-form-urlencoded, form-data, application/json, text/xml Express 依赖 bodyParser 对请求的包体进行解析,默认支持:application/json, application/x-…

npm 是node.js下带的一个包管理工具

npm 是node.js下带的一个包管理工具 npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁更高效 npm install -g gulp //全局安装 npm install --save-dev gulp //安装到当前项目并在package.json中添加依赖cnpm install -g -vue-cli 安装脚手架 webpack是模块化管理的工具,使用webpack可实现模块按…

js调用ajax案例

js调用ajax案例测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Fi…

cookie.js插件的案例

cookie.js插件的案例: https://github.com/jaywcjlove/cookie.js/blob/master/README.md 文档 api 在这里即可查看用法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/cookie.js&qu…

WebView JS交互 JSBridge 案例原理 MD

Markdown版本笔记我的GitHub首页我的博客我的微信我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina.com WebView JS交互 JSBridge 案例原理 MD 目录目录简介gradle配置Java端:注册提供给JS端调用的接口JS端:注册提供给Java端调用的接口JS 端注意事项源码解析BridgeWebViewjava 调用 js 中注册的方法调用过程回调过程一个疑惑js 调用 j…

js下拉框二级关联菜单效果代码具体实现

这篇文章介绍了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"> <hea…

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果完成效果如下实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos…

node.js下操作cookie

cookie,又是cookie.工作中与cookie打交道很多次,不过时间跨度也大,每总结多一次,就加深了解多一点. cookie,一定是放在浏览器中的,用于浏览器保存一些小额度的内容.每次我们去访问服务器的时候,cookie都会附着在请求报文中,一起发送给服务器.服务器中没有cookie,它只是操作浏览器发送过来的cookie而已.也因为如此,我们在服务器端的代码中处理cookie的时候,比如变更某个cookie的值,其实这个更改对于浏览器而言,还没有生效,一定要返回到浏览器中,才会将这个更改…

js：把字符串转为变量使用； js下将字符串当函数去执行的方法

1 把字符串当变量使用通过计算 string 得到的值(如果有的话).该方法只接受原始字符串作为参数 demo: var type = "car"; var newStr = "type"; var x = 100; eval("2+2"); eval("type"); eval("x + 17"); console.log(eval("2+2"), eval("type&q…

JS缓冲运动案例：右侧居中悬浮窗

JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS小案例:右侧缓冲悬浮框</title> <style> body { height: 2000px; margin: 0px; } #div1 { width: 100px; height: 150px…

JS缓冲运动案例：右下角悬浮窗

JS缓冲运动案例:右下角悬浮窗红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS小案例:右侧缓冲悬浮框</title> <style> body { height: 2000px; margin:…

js下 Day14、面向对象案例

一．软键盘拖拽效果图: ![img](file:////Users/sairitsutakara/Library/Group%20Containers/UBF8T346G9.Office/TemporaryItems/msohtmlclip/clip_image276.jpg) 功能思路分析: 1. 面向对象框架 \1. 构造函数中: 获取案例上需要用到的元素及数据相关信息 \2. 原型对象中:写好结婚证,初始化方法,事件监听方法 3. 实例对象中: 以对象的形式传参,如数据,选择器名等 2.…

js下 Day05、DOM案例

一．简易购物车效果图: 功能思路分析: 功能一:数量加减 \1. 找到所有的加号按钮,循环绑定点击事件.点击加号时让对应的数量+1 (找清楚加号和数量的关系,让数量标签的内容++) \2. 找到所有的减号按钮,循环绑定点击事件.点击减号时让对应的数量-1 (找清楚减号和数量的关系,让数量标签的内容--). \3. 点击减号时,商品数量不能小于0,需要做一个判断,小于0就让数量等于0. 功能二:统计总数 \4. 点击加号和减号时还需要计算总数量和总价格:总数量即找到所有数量累加在一起:总价即将每…

JS 下拉菜单案例

css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { float: left; width: 100px; text-align: center; } .nav>li a { display: block; line-height: 50px; color: rgb(141, 138, 138); text-decoration: none; posit…

js下 Day20、综合案例

一．购物车效果图: 功能思路分析: 1. 面向对象框架 2. 模拟数据 1.多个店铺数组套对象 2.每个店铺多个商品,数组套对象…

js下 Day18、综合案例

一．分页效果图: 功能思路分析: 分页就是将所有的数据按指定条数分成若干份: 假如有24条数据,每页只显示5条,则需要分成Math.ceil(24 / 5) = 5页; 每次只显示1页数据,所以需要在总数据中利用slice截取出1页数据渲染每一页的数据分布如下: 第一页: 显示1 - 5条数据截取 data.slice(0,5) 第二页: 显示6 - 10条数据截取 data.slice(5,10) 第三页: 显示11 - 15条数据截取 data.slice(10,15) 总结: 截…

js下 Day11、案例

一．成绩分类效果图: 功能思路分析: 1. 渲染数据 2. 鼠标按下开启拖拽 \1. 给成绩盒子绑定鼠标按下事件(mousedown),用事件委托做多个标签的拖拽 \2. 开启控制拖拽的变量 \3. 获取鼠标到元素的距离(e.offsetX) \4. 获取事件源 \5. 克隆一个副本,设置定位,放到成绩盒子中 3. 鼠标移动-副本跟随 \1. 当开关变量为真时移动盒子 \2. 克隆盒子位置 = 鼠标到页面的距离 - 鼠标到元素的距离 4. 鼠标松开-边界判断 \1. 判断克隆元素是否存在,不存…

js下 Day08、DOM案例

一．摇一摇效果图:…

js下 Day07、DOM案例

一．折叠菜单效果图: 功能思路分析: 功能一:数据渲染 \1. 模拟数据,一级数据为数组套对象的形式,二级数据为数组: \2. 先渲染一级数据,然后再嵌套渲染二级数据(map().join('')); 功能二:子菜单的显示隐藏 \1. 定义一个初始下标index = 0; \2. 给每一个一级菜单绑定点击事件,点击一级菜单时要干三件事: (1) 上一个二级菜单隐藏 (2) 修改为当前点击项的下标 (3) 当前点击项的二级菜单显示 #二．留言板效果图: 功能思路分析: 功能一:头像高亮 \1.…

js下 Day19、综合案例

一．吸顶楼层效果图: 功能思路分析: 1. 面向对象框架 2. 渲染导航 \1. 数据 \2. 对象结构的数据用for in遍历 \3. 渲染时将属性名设为锚点(a标签的href) 3. 渲染车系 \1. 车系分类是对象的数据结构,外层渲染用for in \2. 每个分类的内容是数组的数据结构,内层渲染map().join('') \3. 渲染时将每个字母的分类设为id名,配合导航里的锚点 4. 导航吸顶 \1. 绑定滚动事件(window.addEventListener('scroll',…

js下 Day17、综合案例

一．面向对象轮播效果图:…

js下 Day16、正则案例

一．封装格式化日期功能思路分析: \1. 第一个参数format表示指定的时间格式 \2. 第二个参数date为指定的时间(可以不传,默认当前时间) \3. 获取第二个参数中指定时间的年月日时分秒 \4. 将format中的格式利用replace()方法替换 #二．表单验证效果图: 功能思路分析: 1. 面向对象框架 2. 用户名验证 \6. 给用户名文本框绑定失去焦点事件(blur) \7. 编写手机号正则和邮箱正则 \8. 验证文本框的内容是否符合手机号正则或邮箱正则 \9. 验证通过返…

JS 下拉菜单

HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/j…

【学习笔记】js下拉刷新、上拉加载 mescroll框架的使用

写在前边: 工作需要,使用ajax在原来的列表下边使用ajax请求后台数据,拼接在列表最下边,在github转了好久,发现了一个bug极多的js刷新插件,尝试了一个下午,就在快放弃的时候,发现下边有留言说用mescroll框架比较简单好用.遂研究许久,做Javaweb嘛,难免碰前端-- mescroll.js快速上手: 前往mescroll官网下载js和css :http://www.mescroll.com/load.html 1. 下载并引用 mescroll.min.css , mescr…

【js下 Day12、案例】的更多相关文章