2016年09月_小圣贤君

11月 10月 09月 08月

原创 javascript购物车实现详细代码讲解

我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操

2016-09-27 21:13:37 108099 22

原创 javascript实现窗口随着鼠标移动且移动路径重现

现在实现一个挺有趣的示例，页面中出现一个窗口，鼠标在窗口指定位置区域内按下拖动，窗口会随着鼠标一起移动，松开鼠标，停止移动，点击“轨迹重现”，窗口会自动走一遍移动路径。请看代码：<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style

2016-09-22 22:41:48 4691 1

原创 javascript实现页面滚屏效果

当我们浏览网页的时候，时常会碰到可以滚动屏幕的炫酷网页，今天笔者对这一技术进行简单实现，效果不及读者理想中那般炫酷，主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签，代表五个页面，点击数字可以切换到对应的页面，滚动鼠标滑轮可以实现数字标签的切换，页面的切换。笔者未对页面的平稳滚动进行实现，读者可自行试验研究。请看代码：这是html代码：<!doctype html><

2016-09-22 20:51:30 10605

原创 javascript实现图片放大镜效果

当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。今天我对这一技术，进行简单实现，实现图片放大镜效果。我在代码中进行了代码编写的思路的说明和详细的代码注释，方便读者，请看代码：<!doctype html><html> <head> <meta charset="U

2016-09-21 21:49:07 6190

原创 javascript图片轮播技术动态实现

我们经常会在网页中见到轮播的图片，如京东主页面中图片自动更换。我们在这里对这一技术进行实现，主要能够使图片自动进行轮播，数字标签随着图片一同更换，鼠标移动到数字标签上，相应的图片停留，鼠标在整个图片区域内时，图片停止轮播，鼠标离开图片区域，图片继续轮播的功能。请看示例代码：这是html结构代码：<!DOCTYPE html><html> <head> <meta cha

2016-09-20 16:06:39 10292

原创 javascript实现页面中回到顶部功能

当一个页面比较长的时候，在下拉页面到一定长度的时候，页面右下角通常会出现一个回到顶部的图标，点击即可以回到页面顶部，本案例对这一功能进行了简单实现。当页面下拉到一定长度后，页面右下角出现一个回到顶部图标，点击之后，页面会滑动到页面顶部，同时回到顶部图标也会消失。适合初学者参考。<!doctype html><html> <head> <meta charset="UTF-8"> <tit

2016-09-20 11:37:47 4973

原创 javascript操作表格案例讲解

本案例是一个简单表格，通过javascript DOM相关技术，实现对表格的删除更改。案例代码详细的表达了思路分析，适合DOM初学者。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author"

2016-09-20 11:07:33 1238

原创 javascript计时秒表简单设计

这是一个简单的秒表设计，能够实现计时、停止等功能，涉及Window对象中setInterval、location等知识点的应用。<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">

2016-09-14 18:22:21 2378

原创 javascript中组合使用构造函数模式和原型模式创建对象

首先来讲一下构造函数创建对象。ECMAScript中的构造函数可用来创建特定类型的对象。请看下面示例了解一下构造函数模式：function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = sayName;}function sayName

2016-09-12 11:26:11 2204

原创 javascript中原型模式创建对象特点分析

在javascript中，我们创建的每个函数都有一个prototype（原型）属性。这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让多有对象实例共享它所包含的属性和方法。function Person(){}Person.prototype.name = "Dawang";Person.prototype.age = 2

2016-09-11 21:41:07 1749

转载趣谈表单设计的准则

表单可能是日常UI设计中最常见的设计元素了，它广泛的应用范畴、多年来的积淀使得表单设计牵涉到大量的、约定俗成的设计规则。今天我们来聊聊这些最常见的表单设计准则。无论是注册网站还是内容输入，总是回避不了表单这种UI控件。表单几乎是每一个数字产品都无法规避的组成部分，它的作用近乎无可替代。不过，表单这种控件应用范畴极为广泛，应用情况牵涉到方方面面，所以请注意，今天的文章里我们所提及的设计准则都只是一

2016-09-11 19:52:07 659

原创 Egret开发HTML5小游戏代码分享

本游戏为《Egret HTML5游戏开发指南》中的案例。作者将代码在这里做一下分享。案例中有两个主要的代码文件，一个Main.ts，一个Circle.ts。在CIrcle.ts中使用了egret.Tween，这是用来创建动画缓存的类。需要在egretProperties.json中配置tween模块。如图所示：下面给出两个主要代码，这是Main.ts：class Main extends egr

2016-09-07 19:35:15 4726 1

原创在html中使用javascript注意事项

把javascript插入到html页面中要使用元素。使用这个元素可以把javascript嵌入到html页面中，让脚本与标记混合在一起，也可以使用外部的javascript文件，需要注意的几点有：1.在包含外部javascript文件时，必须将src属性设置为指向相应文件的url。这个文件既可以是与包含它的页面位于同一服务器上的文件，也可以是其他任何域中的文件。2.所有元素都会按照他们在

2016-09-05 20:22:00 1263