2017年03月_画一生情入颜容

原创案例八、jquery点个赞吧

这个要实现的功能比较简单，就是实现点击按钮，有心向上飘，一直飘出屏幕外。首先只需要在body中定义一个button。和盛放心的盒子<div id = "demo"></div><input type = "button" id = "btn1" value = "点个赞吧" />由于还要引进心的图片，所以在这里我们在设置css样式的时候还要设置图片img的样式。 css代码如下： <sty

2017-03-31 23:38:18 381

原创 jQuery中DOM操作方法的简单总结

对于jQuery提供的大量的DOM操作方法，应该根据要完成的任务和元素的位置做出不同的选择，这里先列举一些常见的DOM操作方法。1。要在HTML中创建新元素，使用$()函数。例如：$('<a href = "#top"> back to top </a>');$('<a id = "top"></a>');第一行创建了一个back to top 的链接，第二行则创建了一个作为目标的锚。 2。

2017-03-31 20:16:49 323

原创案例七、jquery模仿微信聊天界面

首先看一下我们的效果图。这个颜色可能搭配的有些不合适，但基本功能大都实现了。就是你和你同桌对话，你发的消息在你的左侧，而在他设备的右侧。首先先写好整体的框架，在一个大容器中放两个盒子，分别是左侧和右侧的界面。然后每个盒子里面包含了三大部分：头部、内容区、和底部。只要写好一侧，另一侧进行粘贴复制就可以了。首先定义一个大的来盛放左右两个盒子。<div id = "main"> //左侧聊天界面

2017-03-30 23:26:19 5379 1

为什么会出现WebSocket，这是因为传统的http有以下不足：1。HTTP客户端和服务器之间的交互是采用请求/应答模式，在客户端请求时，会建立一个HTTP连接，然后发送请求消息，服务端给出应答消息，然后连接就关闭了。（后来的HTTP1.1支持持久连接）2。因为TCP连接的建立过程是有开销的，如果使用了SSL/TLS开销就更大。3。在浏览器里，一个网页包含许多资源，包括HTML，CSS，JavaS

2017-03-29 22:03:54 421

原创案例六、打地鼠的小游戏

在写这个打地鼠的游戏开始首先要清楚每一步该做什么然后再一步一步搭好框架再完善功能。1.创建table三行三列，用来存放坑（图片） 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能一、首先实现第一步，用table创建一个三行三列的坑<div id = "content"><h2>打地鼠</h2><br/><table id =

2017-03-29 00:03:02 2239 1

原创 JavaScript中变量和函数声明的提升

js中变量的提升和函数声明提升也是笔试常常会考到的知识点。 1。变量提升那什么是变量的提升？可以理解为就是不管变量的位置在哪里，它们的声明都会在后台提升至代码顶部。来看看一个例子。在JS中，就是把定义在后面的（变量或函数）提升到前面中定义。 var world = "Hello World!"；function hello(){ alert(world); //Hello

2017-03-27 21:58:18 417

原创拖放

使用拖放主要可实现两种功能：(1).从计算机上将文件拖到网页上。(2).将元素拖到同一页面的其他元素中。将元素拖放到页面上，需要以下几个步骤： 1.设置你想拖动的任何HTML元素的draggable属性。 2.给任何可拖动的HTML元素的draggable事件添加事件监听器. 3.给任何接受拖放元素的dragover 和 drop 添加事件监听器。 draggable不是一个布尔值，必须

2017-03-27 21:01:34 601

原创案例五、利用jQuery写一个弹幕

在要写一个弹幕案例的时候，首先要清楚每一步要干什么。首先搭好框架之后在要发送弹幕时应该准备进行如下步骤：获取到要发送到弹幕上的内容，即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val();生成一个元素。利用jQuery的 var createSpan =$(““)生成一个span元素，以便发送。给刚创建的span赋值，即获取到的文本框中的值

2017-03-24 23:16:55 744

原创理解Canvas的save()和restore()方法

❑ save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 ❑ restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。 save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error通俗地讲，canvas中的

2017-03-24 17:02:42 1218

原创表单的知识点总结

JavaScript最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。在HTML中，表单是由<from>元素表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因而与其他HTML有相同的默认属性，bugHTMLFormElement也有自己独有的属性和方法：例如：acceptC

2017-03-22 23:32:24 377

原创几种常用的排序算法总结

几种常用的算法的时间空间复杂度 1、冒泡排序思想：比较相邻的元素，如果第一个元素比第二个大，就交换位置，对每一对相邻的元素进行同样的操作。这样最后的元素应该是最大的数。排除最后一个数，针对前面的所有元素进行上述步骤，持续每次在越来越少的元素中找到最大。算法 Java代码： static void popSort(int[] a){ for(int

2017-03-21 22:24:13 333

原创事件委托

为什么要进行事件委托？事件委托是什么？由于事件处理程序可以为现代的web应用程序提供交互能力，因此在添加页面上的事件处理程序的数量没有一个严格的限制，将会直接关系到页面的整体运行性能。导致这个问题是多方面的。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。所以对于

2017-03-20 20:08:58 243

原创事件对象

事件主要有四种：HTML5、DOM0、DOM2 和 IE方法，在上篇已经叙述到。而对于事件对象来说主要分为两部分来分析，即DOM级事件对象和IE的事件对象。在说事件对象时首先要了解什么是事件对象。在触发DOM上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件类型以及与其他特定事件相关的信息。例如，鼠标操作导致

2017-03-18 11:32:07 353

原创事件处理程序和跨浏览器的事件处理程序

事件分为：HTML5、DOM0级、DOM2级、IE方法； 1、HTML5事件处理程序:```<input type = "button" value = "Click Me" onclick = "alert("clicked")">也可以调用在页面其他地方<script type="text/javascript">function showMessage(){alert("Hello

2017-03-17 18:04:36 307

原创 js闭包和作用域

闭包就是有权访问另一个函数作用域中的变量的函数，这个函数就叫做闭包。在了解什么是js的闭包时，我们需要引入另外几个概念：作用域链,垃圾(内存)回收机制,函数嵌套,等等.。作用域链：就是函数在定义的时候创建的,而不是在执行的时候确定。用于寻找使用到的变量的值的一个索引,而他内部的规则是,把函数自身的本地变量放在最前面,把自身的父级函数中的变量放在其次,把再高一级函数中的变量放在更后面,以此类推直至

2017-03-16 21:07:13 514

原创案例四、2.用Canvas画一片星空

在知道用Canvas元素画一个五角星时，那么画一片星空只需要将画五角星的函数加入到一个星星数目的循环中就可以了。画一片星空 window.onload = function(){ var canvas,context; canvas = document.getElementById('canvas'); context

2017-03-15 21:15:30 1102

原创案例四、1.使用Canvas画一个五角星

在使用Cnavas元素画一个五角星时，最难的应该是五角星角的坐标。首先在Canvas元素中，y轴是向下为正。由于五角星有五个角，圆为360度，所以角与角之间的距离应该为72度。此时的五角星的十个点的坐标当成是在内外两个圆上排列。读过高中的同学都应该明白图中标示出来的四个点的坐标是怎样算出来的。由于Canvas元素中y轴向下为正，所以sin的值为负。然后开始画五角星的顶点，用一个循环就

2017-03-15 21:01:00 3802

原创 ajax 异步的javascript和xml

XMLHttpRequest和web服务器进行数据的一步交换。运用javascri操作DOM（文档对象模型）来实现动态局部刷新页面。var request ; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); }else{ request = new ActiveXObject(“Mircrosoft.X

2017-03-14 20:17:07 861

原创一个关于焦点图（轮播图）的插件——myfoucs

简单3步，你即可以用上myFocus。Step 1. 在html的标签内引入相关文件提示：符合条件的情况下，引入风格文件(js/css)可省，引入myFocus库即可。那么风格文件是如何自动引入的？详情请看myFocus的文件结构与自动引入风格文件机制。每一种风格都有一个js文件和css文件。必须都引入，且是同一类型Step 2. 创建myFocus标准的html结构，并填充你的内容可以自己定义

2017-03-13 19:36:07 509

原创案例三、自己写一个轮播图

当不能用bootstrap外部框架时，自己写一个轮播图。首先定义一个装所有组件的盒子，div class为content。里面包含了图片区域，底下的小圆圈区域和左右箭头区域。该案例可以实现点击底下对应的小圆圈换图，点击左右箭头换图，以及自动轮播。轮播图*{margin: 0;padding: 0;}#content{width: 1000px;

2017-03-12 22:30:30 2204

原创 js中模仿块级作用域

js中没有块级作用域的概念，例如：function printNumber(num) { for(var i = 0; i < num; i ++ ) { console.log(i); } alert(i); }在java、c++等语言中，变量只会在for循环内有定义，在for循环外是访问不到的，但上面这段代码却可以在js中

2017-03-12 11:59:48 834

原创案例二、自定义选项卡

做一个自定义的选项卡frame 框架//清除默认样式*{margin: 0;padding: 0;}.nav_body{width: 600px;height: 400px;margin: 0 auto;background:#8bc34a;}.nav_top{height: 50px;background: #00b

2017-03-11 23:26:39 559

原创当IE浏览器不支持document.getElementByClassName()

当我们写代码时，尤其是要获得一个对象的className值时，在IE下是不支持document.getElementByClassName()这种方法的，那么我们可以自己写一个方法用来获取classname的值function getByClassName(obj,cls){// obj目标元素，cls要获得的class名var element = obj.getEle

2017-03-08 16:52:24 6107

原创案例一、自定义弹出小窗口

自定义小窗口和改变父窗口的透明度

2017-03-08 16:27:10 1154

csdn_zsdf的博客