JS实例

Vue.js实例练习

最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接标题用了自定义组件,代码如下: components: { 'my-title': { template: '<h1 v-text="title"></h1>', data: function () { return { title: 'Vue.js 实例练习 Bootstrap样式' } } } } 增加书的内容和…

JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1" style="background-color: #74086e;color: #ccdce…

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuery.HTML5.Node.js实例大全-读书笔记2 3.3 响应鼠标动作图3-2的效果已经有了,需要鼠标来操作展示想看的照片,这就需要在相应的地方加上事件. 3.3.1 响应小照片单击动作在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法,在单击小图片时要显示大图片,这…

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuery.HTML5.Node.js实例大全-读书笔记1 3.2 照片加载与定位根据功能设计,可以先写好 HTML 结构基础,再配好 CSS 做出大致效果,最后用 JavaScript加上各种动作.首先请看 HTML 代码结构. 3.2.1 HTML 代码 CSS代码保存到 eg3.css 文件中,Ja…

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章用 JavaScript 实现的照片展示构建软件设计的方法有两种:一种是把软件做得很简单以至于明显找不到缺陷:另一种是把它做得很复杂以至于找不到明显的缺陷. ——C.A.R.Hoare,1980 年图灵奖获得者在这个自拍自恋的时代,照片是要展示的.在前面的章节里已经讲解了事件的绑定,本章主要利用前面的知识做一…

【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 7.位置方法 8.迭代方法 9.归并方法在实例中介绍,实例如下 /* Array类型 js数组中的每一项可以用来保存任何类型的数据:js数组的大小是可以动态调整的 */ var colors = ["red", "blue", "green"];…

[百度地图] 用于类似 DWZ UI 框架的百度地图功能封装类 [MultiZMap.js] 实例源码

MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个多标签的 UI 的框架: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面查看 : http://www.cnblogs.com/ed…

模拟jQuery中的ready方法及实现按需加载css,js实例代码

这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合了一些书籍内容,总结一下.先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isRea…

百度地图整合功能分享修正版[ZMap.js] 实例源码!

ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 修改跟新增一些功能; /** * 百度地图 api 功能整合 * @author Gloot * @email…

jquery.validate.js实例演示

validate是前端重要的交互手段,提升性能的同时更能提升用户操作体验,validate的实现大概有三种方式:HTML5部分支持,validate验证框架,手动写js或ajax调用接口.使用validate框架是非常方便的.这里提供一个validate的实例演示,http://cms.xlongwei.com/open/validate.html. 实例代码(演示页面也可以查看源代码): <form action="/open/validate.html" method=&q…

Vue.js实例

构造器每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的: var vm = new Vue({ // 选项 })…

【js实例】js中的5种基本数据类型和9种操作符

js中的5中基本数据类型 js标识符第一个字符必须为字母,下划线,或美元符其他字符可以是字母,下划线,美元符,数字 js标识符区分大小写标识符不能使关键字和保留字关键字: break do instanceof typeof case else new var catch finally return void continue for switch while debugger function this with default if throw delete in try …

vue.js实例对象+组件树

vue的实例对象首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板 **data:** 数据通过data引入到组件中在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容. {{ }} 双括号语法里面放入数据的变量组件注册语法糖全局组件 A方…

用grunt进行ES6转换，再用uglify压缩所有js实例

1.首先安装node.js 去官网下载exe执行文件安装即可,安装完成后自带有npm管理. 2.安装grunt CLI 在项目根文件夹下执行如下代码: npm install -g grunt-cli 3.安装Grunt npm install grunt --save-dev 4.配置Gruntfile.js 首先需要往项目里添加两个文件:package.json和Gruntfile.js; 如果你从其它项目中拷贝了这2个文件,可以执行npm install直接安装. 其中package.js…

js实例--飞机大战

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>飞机大战</title> <style> #did{ width:500px;height:500px; background:url("./images/bg2.png") no-repeat 0px -1036px; position:relative;ove…

js实例:验证只能输入数字和一个小数点

分享一个javascript脚本代码,用于验证只能输入数字和一个小数点,检测数字输入是否符合要求,效果不错,有用到的朋友拿去吧. 原文地址:http://www.jbxue.com/article/12978.html 本节主要内容:使用javascript限制只能输入数字和一个小数点. 例子: 复制代码代码示例: //js验证数字输入function gaga(obj){ // 值允许输入一个小数点和数字 obj.value = obj.value.replace(/[^\d.]/g,"&qu…

js实例代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>index.html</title>  </head> <body> <p id=&q…

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4

5.2.2 让瀑布流动起来打好基建之后,就需要写JavaScript代码.首先如果数据不够显示一屏幕的情况,就用新数据来补足它,在补充的时候是根据4列中最矮的那一个为优先补充,因为高矮尺寸一般只有在客户端才看得到,服务端虽然也可以计算,但是会很浪费资源,客户端的内存和CPU能用则多用,只要不让客户端变慢就行. 只要图片高度不一致,通过这样的思路很快就可以看到一个“瀑布流”,这仅仅是静态的,一般滚动的时候瀑布流都会添加数据,所以接下来就是添加滚动事件,只要有滚动就计算然后补充数据. 先看图5-5…

angular js 实例参数学习

<!DOCTYPE html> <html> <head> <meta name="description" content="[add your bin description]"> <meta charset="utf-8"> <title>JS Bin</title> <script src="http://apps.bdimg.com/li…

一个有意思的js实例，你会吗？？[原创]

首先,看看下面一个js例子,你觉得会输出什么呢? function fn(a){ a(); function a(){ console.log(2); } var a = function(){ console.log(3); } } fn(function(){console.log(1)}); 如果你看不出来,可以copy到浏览器中试试喔. 本人已经在IE,Firefox,360浏览器下测试过,这段代码都输出2.这时,一些人就会有疑问,为什么呢,为什么不是1和3呢,其实,是这样的: var…

JS实例（二）

一:注册页面包括非空验证.邮箱验证.密码相等验证,在输入之前提示文字,获得焦点时文字清除颜色变化,输入正确显示正确图片,错误显示错误图片,所有验证通过才可提交,重置会重置回初始模样. 效果图如下: CSS代码: <style type="text/css"> .d { float:left; margin:auto; } .dw { height:35px; margin:10px 0px 10px 400px; } .validateImg { display:none…

JS实例（一）

一:单选按钮,选择同意,提交变为可用,反正提交不可用: HTML里面代码: <form id="f1" name="f1"> <input type="radio" value="true" id="ok1" name="ok" onclick="doEnable()"/> <label for="ok1">同意…

[AS3]as3与JS的交互(AS3调用JS)实例说明

一,AS3 vs JavaScript (1)AS3调用JS 函数: ExternalInterface.(functionName:, arguments): //AS3 Code 属性: 同上,通过调用JS函数更改值 (2)JS调用AS3 函数: AS3部分: 1,注册JS中调用的函数名(第一个参数),ExternalInterface.(functionName:, closure:):.2,写对应的处理函数(第二个参数). JS部分: 1,设置页面中SWFObject的ID属性.2,调用…

doT.js实例详解

doT.js详细介绍 doT.js特点是快,小,无依赖其他插件.官网:http://olado.github.iodoT.js详细使用介绍使用方法:{{= }} for interpolation{{ }} for evaluation{{~ }} for array iteration{{? }} for conditionals{{! }} for interpolation with encoding{{# }} for compile-time evaluation/includes…

Js实例——模态框弹出层

1.描述百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> <head> <title>模态框弹出层.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-…

js实例分析JavaScript中的事件委托和事件绑定

我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处理的时候.但是,大多数时说的是“事件绑定”,对于“事件委托”,或是不提,或是浅尝辄止.对于我这个比较好奇的人来说,实在很蛋疼.尤其是想更多的了解“事件委托”的时候. 这次干脆一劳永逸,自己把查出来的资料整理成一篇日志,总结这块的知识,也方便需要的朋友查阅. JavaScript中事件传播过程那些事儿…

上传插件dropzone.js实例

dropzone.js默认是Ajax上传图片给服务器,那么如何获取到图片名呢?其实我们是可以通过dropzone的success函数获取到服务器返回的数据 dropzone.js在HTML的配置如下: Dropzone.autoDiscover = false;//防止报"Dropzone already attached."的错误 $(".dropzone").dropzone({ url: "__URL__/upload/", addRemo…

js实例属性和原型属性

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试文档</title> <script type="text/javascript"> // 实质上属性和方法是一样的,方法是属性为引用型的函数. //一个对象有4种属性: // 1,构造函数通过this关键…

【Demo】Tree.js实例

Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库. 简单点的说法:WebGL可以看成是浏览器给我们提供的接口,在javascript中可以直接用这些API进行3D图形的绘制:而Three.js就是在这些接口上又帮我们封装得更好用一些. 既然有了WebGL,我们为什么还需要Three.js? 这是因为WebGL门槛相对较高,需要相对较多的数学知识.虽然WebGL提供的是面向前端的API,但本质上WebGL跟前端开发完全是两个不同的方向,知识的重叠很少.相关性只是他们都在w…

html5 WebSocket的Js实例教程

详细解读一个简单+ ,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读. 从WebSocket通讯三个阶段(打开握手.数据传递.关闭握手)进行了探讨,各阶段中浏览器和服务器做了些什么事情也有所涉及. //检查浏览器是否支持WebSocket if(window.WebSocket){ console.log('This browser supports WebSocket'); }else{ console.log('Thi…

【JS实例】的更多相关文章