清水拌墨茶-CSDN博客

原创实用JavaScript脚本

收集日常实用的JavaScript小脚本共享load function addLoadEvent(fun){ var oldLoad = window.onload; if(typeof oldLoad != "function"){ window.onload = fun; }else{ window.onload = function(){

2017-07-02 16:51:07 425

原创使用原生JavaScript实现轮播图

首先我们整理一下轮播图的实现规则，使用绝对定位设置left值的方式 1、没有点击时，图片会自动向后循环翻转 2、鼠标放在图片上，停止自动循环 3、鼠标移开时回复自动循环 4、点击上一页的时候，图片停止自动循环，图片向右移动 left+imgWidth，当移动到第一个图片时再点击上一页直接跳到最后一页，点击结束后恢复自动循环 5、点击下一页的时候，图片停止自动循环，图片向左移动 left-i

2017-07-11 19:33:48 450

原创关于JavaScript知识的个人总结

关于JavaScript脚本JavaScript脚本是一个增加用户交互性的脚本，也就是说它是一个辅助脚本，它的作用是让用户访问我们的网站时，有更好的用户体检（友好的动态效果等），而我们网页的主要功能不能依靠JavaScript脚本，这就表示当网站的JS脚本被禁用时用户依然可以正产使用网站只是缺少了一些漂亮的动态效果。增加网站性能：向后兼容兼容低版本浏览器

2017-07-10 17:03:32 356 1

原创使用Modernizr+HTML-DOM实现placeholder兼容低版本浏览器

众所周知，HTML5中提供了很多比较实用的新属性，其中最常用就是placeholder属性，这个属性默认在输入框中展示一串浅灰色的提示信息，当用户点击输入时，提示信息消失。但是作为HTML5的新表单属性就面临了低版本浏览器不兼容的问题。之前看到网上有很多使用JQuery脚本实现placeholder兼容的例子，今天我使用本Modernizr.js加上原生JS中的HTML-DOM中的forms对象实现

2017-07-10 08:55:28 730

原创原生JavaScript实现斑马线表格

虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用JavaScript实现的是兼容性最强的（浏览器不支持或禁止JavaScript脚本除外），所以今天使用原生JS实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。index.html<table> <thead> <tr> <th>Dat

2017-07-09 21:07:34 2323

原创原生JavaScript实现内部链接

当我们制作一个如下的页面时：<body><header>  <img src="image/logo.jpg" alt="The logo">  <nav> <ul> <li> <a href="index.html">Hom

2017-07-09 20:59:11 1074

原创原生JavaScript实现幻灯片效果

当我们制作一个页面时，尤其是制作一个首页时，通常会设计一个可以链接到整个网站的其他主体页面的导航栏，或者一段网站的介绍文字中会包含这页面的跳转，通常情况会使用title属性为这些跳转链接添加一些解释性的文字，但是我们可以通过制作一个幻灯片的demo，加强用户的体验性。当用户的鼠标移动到某一链接时，下方会出现对应的图片预览，这样即美化页面，又大大增加了整个网站的交互性，下面就让我们一起制作一个漂亮的幻

2017-07-09 20:41:32 1056

原创关于setTimeout()方法的第一个参数是否加双引号的问题

今天使用setTimeout+CSS-DOM实现了一个简单的动画demo，但是在使用setTimeout时发现一个问题，这个方法的第一个参数有两个写法：setTimeout(“global()”,1000); setTimeout(global,1000);上网查了好久，才明白原来是传进去的参数的作用域不同。第一种参数，传递的是一个global()方法，该方法会在全局变量中寻找。第二种参数，传递的

2017-07-05 20:53:30 2334

原创使用location.search解析URL中？后的请求信息

客户端网站向服务器发送请求时常常会携带一些请求信息，开发人员通常会使用get请求向服务器发送信息，这些信息常常以键值对的方式添加在URL的？之后，而location对象的search属性可以获取到这段字符串，但是我们想要的是键值对中的值，而不是整个键值对，这就要通过JS脚本去解析这段字符串。实现思路1、先获取location.search的值（字符串） 2、去掉开头的？ 3、以&切割字符串

2017-07-05 11:21:54 2044

原创使用setTimeout制作倒计时

为了加强对JavaScript原生代码的编写能力，以及巩固setTimeout()的使用方法，制作了一个倒计时的demo，倒计时在现在的网站中算是一个常见的小功能，如果大家喜欢的话可以留下，就当作一个日常实用的小脚本。实现思路1、先获取小时值将小时值减1开始进行倒计时分钟59 秒数59 2、秒数的个位从9开始递减，当秒数个位小于0时，秒数的十位减1 3、秒数的十位小于0时，分钟的

2017-07-05 10:42:12 2545

原创 HTML5之WebSQL

webStorage作为HTML5中重要的新概念之一，web Storage Database既轻量级数据库，它的出现大大提高的Web应用程序的性能，在HTML5出现之前对数据的保存都是由服务器端实现，现在HTML5提供这种客户端轻量级数据库存储，可以直接将用户的数据保存在客户端，这就减轻了服务器的负担。下面就来通过介绍一个WebSQL简单实例。让大家快速了解WebSQL的使用方法。三大核心方法op

2017-07-04 22:36:18 729

原创使用Ajax异步加载请求JSON数据

html<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="addLoadEvent.js"></script> <script src="getHttpObject.js"></script>

2017-07-02 21:52:08 2655

原创关于JavaScript的性能优化

平稳退化：当浏览器不支持JavaScript（或者JavaScript被禁用后）依然能保证网页的基本操作，相关概念伪协议，具体实例：<a href="images/p3.jpg" onclick="showNew(this);return false">跳转</a>在上述的标签中，在JavaScript文件里设置了相应跳转事件有指定的跳转位置，但是在a标签的href属性中依然添加了跳转路径，这

2017-07-02 12:52:30 244

原创 JavaScript+DOM制作照片展示框

先上效果截图下面是实现代码和注释：html：<body> <div class="all"> <h1>A photographic</h1> <ul id="list"> <li>  <a hre

2017-07-02 12:23:00 870

原创 JavaScript学习笔记之JSON&Ajax

JSONJSON定义JSON就是一种类似XML的结构化的数据表示，本身就是一个字符串，但是它比XML更加轻便、速度更快、可读性更高，更容易使用JavaScript解析，但是没有XML描述性强。JSON的数值分为：简单值（数字，字符串，布尔值，null）和数组以及对象。JSON的使用方法数组+对象var em = ‘[ { “nam

2017-07-01 18:30:02 269

原创浅谈JavaScript之DOM

DOM（文档对象模型）1、常见HTML节点。元素节点：html标签，主要属性有TagName和innerHtml(以文本的方式返回标签内（说明这个标签、节点中必须有内容）所有内容，不解析Html，但是设置的时候可以增加html标签，可以解析);文本节点：纯文本属性节点：id、style、title、className … … 不能被遍历2、寻找节点的方法getEl

2017-06-29 21:42:44 281

原创浅谈JavaScript之BOM

浅谈JavaScript之BOM基本对象Window对象系统对话框新建窗口窗口位置窗口大小浅谈JavaScript之BOM今天对JavaScript的BOM又重新学习了一遍，现在将BOM的基本知识总结一下，希望能帮到大家，随便复习一下。基本对象BOM表示的是浏览器对象模型，因为每个浏览器的自身属性大多数都是不同的，所以BOM本身没有很标准的规范，我们现在所学习的只是主流浏览器都共通的属性

2017-06-29 19:18:55 388

zm_nizhi的博客