今天我又写了个很酷的实例：星级评分系统（可自定义星星个数、显示信息） sufuStar.star(); 使用默认值5个星星，默认信息 var msg = [........]; sufuStar.star(10,msg); 自定义星星个数为10、显示信息msg格式参考默认值，条数必须和星星个数一致； 自己实现一些实例，有个好处，能增加应用各知识点的熟练度，还能检验出自己的薄弱项！一经发现，立即翻API文档恶补！ 不知道是不是我太笨，这个实例居然写了整整一天！ 不废话了，先...
最近对css的兴趣提不起来，因为以前对图片轮播一直耿耿于怀苦于学艺不精，所以，花了点时间熟悉了一下js。然后一条道走到黑，用jquery和js写了一下轮播和图片淡入的效果。以后学习的路很长，希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲，网上的教程有很多，简单来说。 淡入淡出，其实这里只用到了淡入的效果。每一张淡入的图片，我们将它的display设置为block，其他为none，所以实际存在并且在文档流占位置的只有一张...
插件！插件！天天听到有人求这个插件，那个插件的，当然，用第三方插件可以大幅提高开发效率，但作为新手，我还是喜欢自己来实现，主要是我有时间！ 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以无视下面这段废话：在开始之前，先说下我学前端到现在的一点感受。到今天应该有两个月左右了吧，基本每天6-10小时的学习时间，纯自学，据说培训不靠谱！本人目前的阶段是只会三大件（HTML5、CSS3、javascript）,其它所有...
今天继续研究了bind函数的实现，也知道了shim和polyfill的说法，现在总结一下， if (!Function.prototype.bind) {Function.prototype.bind = function (oThis) {if (typeof this !== "function") {// closest thing possible to the ECMAScript 5 internal IsCallable functionthrow new TypeError("Function.prototype.bind - what is trying to be bound is not callable");}var aArgs = Array.prototype.slice.call(arguments, ...
我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式，方法有很多，比如：通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式，注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是，如果没有给元素设置任何样式，也会把浏览器默认的样式返回来。 1、ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值，但是有时候获取的并非是节点的样式值，而是空值。这是因...
下面是我自己写的图片裁剪的功能介绍： 可以利用鼠标拖拉，产生裁剪框可以改变裁剪框大小点击确定，返回裁剪数据原理完成裁剪的方法有两种： 1、利用HTML5新增拖拽事件drag drop等2、传统方法，利用鼠标事件，mousedown、mousemove等在这里，我们采用方法2。 裁剪区域的形成要进行裁剪首先要形成裁剪区域，这个裁剪区域的形成我们可以与鼠标移动的距离相关联。鼠标移动多远，裁剪区域就有多大。如下图：如上图所示鼠标的横向移动距...
声明，该DEMO依托于某个培训机构中，非常感谢这个培训结构。话不多说，现在开始改demo的制作。 首先，在前端的学习过程中，轮播图是我们一定要学习的，所以为了更加高效的实现各种轮播图，封装了一个运动的框架。 function getStyle(obj,attr) {if(obj.currentStyle){return obj.currentStyle[attr];//为了获取IE下的属性值}else{return window.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值} }function animat...
实例代码： function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); }; function addClass( elements,cName ){ if( !hasClass( elements,cName ) ){ elements.className += " " + cName; }; }; function removeClass( elements,cName ){ if( hasClass( elements,cName ) ){ elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cNam...
首先，我们需要xhr对象。这对我们来说不难，封装成一个函数。 var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp");} catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest();} catch (e2) { window.alert("您的浏览器不支持ajax，请更换！");}} return xhr; }; 然后，我们来写核心函数。 var ajax = function(conf) { // 初始化 //type参数,可选 var type ...
jquery animate动画效果： 代码<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>动画</title><style>*{margin:0;padding:0;}.box{width: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center;}</style><script>//获取对象样式规则信息，IE下使用currentStylefunction getStyle(obj,style){return obj.currentStyle?obj.currentStyle[style]:getComput...
利用css+原生js制作简单的钟表。效果如下所示 实现该效果，分三大块：html、javascript、csshtml部分 html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多，采用jvascript生成 <!doctype html> <html> <head><meta charset="UTF-8"><link rel=stylesheet href=外部的css文件路径 /><title>时钟</title> </head> <body><div class="clock" id="clock"><!-- 原...
本文为大家分享了原生弹窗拖拽代码demo，供大家参考，具体内容如下 效果图：实现代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>弹窗拖拽</title><style>*{margin:0;padding:0;}.box{position: absolute;width: 400px;height: 300px;top:100px;left:100px;border:1px solid #001c67;background: #}.move{position: absolute;width: 100px;height: 100px;top:100px;left:150px;border:1px solid #000...
闲的蛋疼，封装了个二级城市下拉 先保证html里有 <SPAN style="BACKGROUND-COLOR: #ffffff; COLOR: #ff0000"><select id="province" size=1 > </select> <select id="city" style="width:60px"> </select> <input type="hidden" id="pro_city" /></SPAN> 然后引用js 最终通过new SelectCity() 调用。 懒得分离这里js就写在页面了 一言不合上代码 <html> <head> <meta charset="UTF-8"> </head> <body> <select id="pr...
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性从而通过改变transform：rotate属性值来达到3d立方体旋转的效果HTML代码块：<body> <input type="button" class="open" value="点击散开"/> <input type="text" class="xNum" va...
javascript/js的ajax的GET请求代码如下所示：<script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } // -----------ajax方法-----------// function ...