随笔分类 - javascript
摘要：概念 Array 数组是有序的元素序列。 语法 new Array(length) new Array(element1) new Array(element1, element2) new Array(element1, element2, element3) new Array(element1
阅读全文
摘要：你想了解前端吗？ 你想了解后端吗？ 你想了解设计吗？ 81For全栈技术这里包含了互联网所有内容，81For.com是全栈技术网，包括：前端、后端、全栈、jquery、vue、react、router、css、scss、less、webpack、plus、javascript、typescript、
阅读全文
摘要：在线制作h5 网址：http://www.godgiftgame.com 网站名称：上帝的礼物 推荐指数：5颗星 功能概要 可以设置背景、元素图片、元素文字、元素图形、声音、加载、链接、分享，生成h5，有二维码和链接两种形式，可以分享到新浪微博、腾讯微博、qq空间、Facebook、Twitter。
阅读全文
摘要：canvas应用例子-思维导图效果图如下：函数说明：// 求圆上一点坐标，返回坐标点function circlePoint(x, y, r, a) { var tmpx = x + r * Math.cos(a * Math.PI / 180); var tmpy = y + r * ...
阅读全文
摘要：requirejs初探参考资料官网：http://requirejs.org中文译文：http://makingmobile.org/docs/tools/requirejs-api-zhreuqirejs、backbone的配置例子(function(){ require.config({ ...
阅读全文
摘要：环形效果是不是相当的诱人，首先看几个例子：1、colorful-clock --- 漂亮2、CSS3+js实现多彩炫酷旋转圆环时钟效果 --- very good3、Percentage Loader --- 帅colorful-clock效果图如下：有没有更刺激的，接下来见证奇迹的时刻，如下图（精致）：在此之前，在回顾下前两个例子：1、时钟效果_raphael.js2、幸运大抽奖实现原理：第一步：构造圆环r.customAttributes.arc = function(value, total, R) { var alpha = 360 / total * value, ...
阅读全文
摘要：时钟效果，很久很久以前由flash提供网页的各种有趣的效果，近些年由html5推出canvas后，canvas与之博弈。现在讲的是用raphaeljs实现时钟效果。raphaeljs封装了svg和vml操作方法，SVG(Scalable Vector Graphics)可缩放矢量图形。VML(The Vector Markup Language)矢量可标记语言。先饱饱眼福，win7中的时钟效果show下，见下图：接下来亮相的时钟效果图（金属光泽的超质感），见下图：简单描述实现原理：第一步：画时钟。时钟圆盘、时钟时分秒指针、刻度、时间。画图方法circle、rect、text。// 画时钟表盘r
阅读全文
摘要：幸运大抽奖全新来袭，现在普遍的抽奖活动都是由flash开发的，然而，今天向大家展示由js实现的抽奖。早在2012年的时候写过一篇文章关于js抽奖的《javascript 抽奖》。 借助raphaeljs插件实现，官网：http://raphaeljs.com 中文文档：http://lab.julying.com/raphael-js/docs/ 幸运大抽奖已两种方式展现，一种是圆盘旋转（猎豹式），另一种是指针旋转（考拉式），实现抽奖三部曲。第一部：绘制圆盘和指针。var r = Raphael("test",300,300);// 绘制圆盘r.image...
阅读全文
摘要：如何管理CSS和JS文件，一直是前端一个热门的话题。下面将简单分享一下使用心得，欢迎大家吐槽、拍砖和提供更好的实现方式。一、管理CSS文件，本博客将讨论less管理。iReset.less、iButton.less、iCss3.less、iIcon.less、iTab.less、iMenu.less、iDialog.less、iForm.less、iDatagrid.less等等文件、以上文件都是最小模块文件。把上面的文件按实际需要合并成一个iBase.less文件。如：打算将iReset.less、iButton.less合并在iBase.less中。在iBase.less中引入如下文件即可
阅读全文
摘要：关于input手机号的验证一、手机号的判断方法：function isPhoneTel(n){ var reg = /^1[3|4|5|8]\d{9}$/; if(!!(reg.test(n))){ return true; } else{ return false; }}二、input绑定事件phone: function(){ var _this = this; // 只可以输入数字、删除等键 _this.kphone.onkeydown = function(e){ e = e || window....
阅读全文
摘要：一、原始值javascript中包含5种原始类型：字符串、数字、布尔值、null和undefined。判断一个值得最佳选择是typeof运算符，返回一个表示值得类型的字符串。字符串 string数字 number布尔值 booleanundefined undefined例如:if(typeof name === "string"){ console.log("name的值是字符串"); }二、引用值javascript中包含几种内置的引用类型：Object、Array、Date和Error。判断是否为引用类型最佳选择instanceof运算符。默...
阅读全文
摘要：JSON定义JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪，但是JavaScript很容易解释它，而且 JSON 可以表示比"名称 / 值对"更复杂的结构。JSON 语法是 JavaScript 对象表示法语法的子集。数据在名称/值对中、数据由逗号分隔、花括号保存对象、方括号保存数组JSON 值可以是：数字（整数
阅读全文
摘要：表单允许客户端的用户以标准格式向服务器提交数据。表单的创建者为了收集所需数据，使用了各种控件设计表单如 INPUT 或 SELECT。查看表单的用户只需填充数据并单击提交按钮即可向服务器发送数据。服务器上的脚本会处理这些数据。表单由三个重要属性action，method，onsubmit。action：规定当提交表单时，向何处发送表单数据。method：规定如何发送表单数据。onsubmit：当表单被提交时执行脚本。页面提交表单的数据是不可信任的，js脚本验证作为辅助验证，嘿嘿，防君子不防小人。后台需要对表单提交数据判断。全部正确跳转到成功页，否则，跳转到辅助性的提示页（记录这些非法操作的用户
阅读全文
摘要：gruntjs官方教程：http://gruntjs.com本次主要讲述Gruntfile.js配置文件在项目中的应用配合jade、less一起使用。项目目录包括jade文件夹、less文件夹、css文件夹、js文件夹等等jade文件夹中包含首页、版本选择页以及提示信息页活动首页样式变化频繁，但是jade可以实现超文本标记语言结构化，简化开发利于维护版本选择页变化较小，一次开发，以后基本维持。结果页及信息提示页实现结构化，主要变动标题及链接，可以通过配件tip_conf.jade文件，每次修改这个配置文件即可。tip_conf.jade源码介绍：title = '活动标题',b
阅读全文
摘要：仿选择版本页描述：有不同组类型，即类型A和类型B，类型包含具体型号类型如A_a、A_b等等。具体型号类型有三种状态：可选状态、选中状态、不可选状态，可选状态具有态胎效果。选中状态时按钮下一步变为可点击状态。基础知识：css方面内外边距的使用、二态效果、样式表中的类的使用等js方面设计点击事件、闭包等。效果如下图：js源码及简单介绍：/** getId函数* 功能：获取元素ID*/function getId(){ return document.getElementById(arguments[0]);}/** getTagNames函数* 参数kname：元素标签名称* 参数...
阅读全文
摘要：gruntjsgruntjs是构建前端可维护性的项目，如自动化、文件压缩、合并及单元测试等等。关于package.json和Gruntfile.js基础介绍1、在项目的当前目录下，新建packjson.json文件{ "name":"mtest", "version":"0.1.0", "engines": { "node": ">= 0.8.0" }, "dependencies": { "async": &
阅读全文
摘要：js模板引擎模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。js模板引擎包括如下：template官方参考：http://aui.github.io/artTemplateBaiduTemplate官方参考：http://baidufe.github.io/BaiduTemplatejuicer官方参考：http://juicer.namedoT官方参考：http://olado.github.io/doTkissy官方参考：http://docs.kissyui.com和https://github.com/
阅读全文
摘要：有关js动态绑定事件//为元素绑定事件function addEvent(elem,type,fn){ if(window.addEventLister){ elem.addEventLister(type,fn,false); } else if(window.attachEvent){ elem.attachEvent("on"+type,fn); } else{ elem["on" + type] = fn; }}//将元素和方法放到数组arrelems中function bind(elem,fn){ v...
阅读全文
摘要：伴随着html5和css3的成熟，页面展现的越来越绚丽越吸引人，尤其体现在各大网站的专题活动上。现在写了一个简略的框框。实现思想：当滚动条滚动时，滚动到底部切换到下一屏，滚动到顶部时切换到上一屏。点击按钮时滚动到对应的屏。代码简略：1、滚动条滚动方向，-1向下，1向上，注意：如用ie，请用ie9以上的浏览器看效果。document.addEventListener(mousewheel,function(e){ e = e || window.event; if(!isFirefox){ direct = e.wheelDelta>0?-1:1; } el...
阅读全文
摘要：iframe介绍父页面：<input id="pbtn" type="button" value="父按钮" /><iframe id="test" name="test" src="sub.html" scrolling="no" frameborder="0" width="400px" height="150px"></iframe><div id=
阅读全文