对原生js的一些小尝试

意图仿造JQ操作以及弄个个人工具箱,不断完善中,代码均为个人摸索,所以肯定会有不少不足的地方,希望读者们能提出来。

 1 var xzhUtils = {
 2   //-----DOM对象添加类-----
 3   //[email protected]: obj  DOM对象
 4   //[email protected]: cls  添加的类
 5   addClass : function (obj, cls){
 6     var ocls = obj.className;
 7     if(!ocls){
 8       obj.className = cls;
 9     } else{
10       ocls += " "+cls;
11       obj.className = ocls;
12     }
13   },
14   //-----DOM对象移除类-----
15   //[email protected]: obj  DOM对象
16   //[email protected]: cls  移除的类
17   removeClass : function (obj, cls){
18     var ocls = obj.className;
19     if(ocls){
20       var arr = ocls.split(" ");
21       for(var i in arr){
22         if(arr[i]==cls){
23           arr.splice(i,1);
24           break;
25         }
26       }
27       ocls = arr.join(" ");
28       obj.className = ocls;
29     }
30   },
31   //-----计算上卷值-----
32   scrollPos : function() {
33     var scrollPos;
34     if (typeof window.pageYOffset != ‘undefined‘){
35       scrollPos = window.pageYOffset;
36     }else if (typeof document.compatMode != ‘undefined‘ && document.compatMode != ‘BackCompat‘){
37       scrollPos = document.documentElement.scrollTop;
38     }else if (typeof document.body != ‘undefined‘){
39       scrollPos = document.body.scrollTop;
40     }
41     return scrollPos;
42   },
43   //-----获取下一个兄弟节点-----
44   //[email protected]: eventObj  要获取下一兄弟节点的DOM对象
45   //[email protected]: x  eventObj的下一兄弟节点
46   next : function(eventObj){
47     var e = eventObj;
48     var x = e.nextSibling;
49     while(x.nodeType!=1){
50       x = x.nextSibling;
51     }
52     return x;
53   }
54 }
时间: 2024-11-21 05:36:43

对原生js的一些小尝试的相关文章

原生js打飞机小游戏

最近为了巩固一下原生的知识,然后拿了一个js小游戏来入手.主要也是为了学习和练手. js代码如下: 1 window.onload = function(){ 2 var oBtn = document.getElementById('gameBtn'); 3 oBtn.onclick = function(){ 4 this.style.display = 'none'; 5 Game.init('div1');//把父级传进去 6 }; 7 }; 8 //创建Game单体 9 10 var

一个简单用原生js实现的小游戏----FlappyBird

这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="game"> <div id="b

原生js处理倒计时小实例

昨天写了一个简单的不能循环走的倒计时,那么今天写一个添加了定时器之后的倒计时.先来看看布局的代码: <style> .t1 { width:400px; } </style> <body> 距离:<input class="t1" type="text" value="November 27,2013 22:3:0" /><br /> 还剩:<input class="t

用原生js写2048小游戏

WEB前端交流群  172994155  回复 ww 验证  <!DOCTYPE html> <html> <head> <title> 2048-game </title> <meta charset="utf-8" /> <style media="screen"> #game { display: none; position: absolute; left: 0px; top

JQuery&amp;原生js ——实现剪刀石头布小游戏

jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供 http://pic.cnhubei.com/space.php?uid=1913&do=album&id=1107884http://pic.cnhubei.com/space.php?ui

原生JS实现的h5小游戏-植物大战僵尸

代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结合面向对象的编程思想进行开发,在实现时使用了部分es6语法,对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下. 如有需要,可根据自己的需求修改源码样式.源码配置属性代码,实现个性化定制. 以下为文件目录结构示意图,核心代码在js文件夹下的四个common.js.main.js.game.js

微信小程序结合原生JS实现电商模板(二)

接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车,加入购物车和立即购买的逻辑实现:购物车结算功能完善(需添加收货地址才能结算,并完善新增.编辑.杉树地址相关操作):在分类模块实现了商品的分类展示以及不同分类对应的数据流显示,以及进入详情的逻辑操作.请不要吝啬你的发财手帮我star或转发一下,谢谢了.下面附上目前的效果:(切图自己抠的,请见谅.) 附上源码地

小demo原生js同步翻译,可以玩玩儿

1. 背景: 平时不知道用js写什么练手,这里就写了一个类似百度翻译的小demo.大家可以平时没事儿了看看书,写写像这种类型的小demo,调用以下公开的api即可.对于学生党,能进入学校实验室做项目更好.进不去的,平时写写小demo练练也不差.(我为什么没在实验室) 2. demo前准备工作: 页面布局 了解百度翻译API,所需配置参数 准备 MD5.js 加密算法函数(百度自己搜) 写js代码 3. 步骤: 1. 页面布局: 布局就不说了,直接贴图上代码: 可进行语言切换 html代码: <!

原生js实现的3个小特效(时钟、轮播图、选项卡)

时钟: <p id="timeTxt"></p>  //将获取到的时间显示在timeTxt这里面        <button onclick="startTime()">关闭</button>        <!--时钟-->        function startTime(){  //创建startTime()函数            var today=new Date();  //定义一个对象