今天我又写了个很酷的实例:星级评分系统(可自定义星星个数、显示信息) 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 ...