JS_ECMA基本语法中的几种封装的小函数

先来回顾一下我们的字符串：

字符串方法: str.length str.charAt(i):取字符串中的某一个; str.indexOf('e');找第一个出现的位置;找不到返回-1; str.lastIndexOf('e'):找最后一个e出现的位置;找不到返回-1; str.toUpperCase();转大写 str.toLowerCase();转小写 str.substring(起始位置,结束位置):字符串截取; str.split('切割的方式');字符串切割;字符串转数组;
数组方法:
删除：arr.splice(开始位置,删除的个数); 添加：arr.splice(开始的位置[往哪一位的前面添加],0,元素1····); 替换：arr.splice(开始位置,删除的个数,元素1···); arr.sort(function(n1,n2){return n1 - n2}):排序 arr.reverse():翻转 arr.push();往数组后面添加一位; arr.unshift():往数组前面添加一位; arr.pop():从数组的后面删除一位; arr.shift():从数组的前面删除一位; arr.join('连接的方式');数组转字符串的方法; arr.concat(arr1,arr2····);数组连接;

6.数学方法: Math.random();随机数; Math.round():四舍五入; Math.ceil()向上取整; Math.floor()向下取整; Math.abs():取绝对值; Math.max(x,y):求最大数; Math.min(x,y);求最小数; Math.pow(x,y):几的几次方; Math.sqrt():开平方;

数组:存多个东西; json:存多个东西; json = { //键值对 name1[键,key]:value1[值,value], name2[键,key]:value2[值,value], }

json 与 arr 的区别：

1：length undefined arr.length; 2：下标属性的方式 arr[0]; 3：顺序没有顺序有顺序; 4：循环 for in for,while,for in

for in循环也可以循环数组,但是不建议使用,因为性能略低;

js小特性: 逗号表达式：只看最后一个逗号后面的那个值;

下面是一个通过class获取元素封装的小函数：

//getByClass(oParent,sClass);//oParent:从哪个父级下面获取;sClass:要获取的是哪个class名字;

function getByClass(oParent,sClass){

if(oParent.getElementsByClassName){

return oParent.getElementsByClassName(sClass);

}else{

var aEle = oParent.getElementsByTagName('*');

var arr = [];

for(var i = 0; i < aEle.length; i++){

var tmp = aEle[i].className.split(' ');

if(findInArr(sClass,tmp) == true){

arr.push(aEle[i]);

}

return arr;

}

下面是一些实用性的小案例额，希望对大家有所帮助

1 计算器效果.html

2.倒计时.html

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

#box{

width: 800px;

height: 300px;

background: green;

color: whitesmoke;

line-height: 300px;

text-align: center;

margin:100px auto;

font-size:40px;

}

</style>

<script>

window.onload=function(){

var oBox=document.getElementById('box');

var oDate=new Date();

oDate.setFullYear(2017,0,1);

oDate.setHours(0,0,0,0);

function clock(){

var ms=oDate.getTime()-new Date().getTime();

var oSec=parseInt(ms/1000);

var oDay=parseInt(oSec/86400);

oSec%=86400;

var oHour=parseInt(oSec/3600);

oSec%=3600;

var oMin=parseInt(oSec/60);

oSec%=60;

oBox.innerHTML='距离2017年1月1日还剩'+oDay+'天'+oHour+'时'+oMin+'分'+oSec+'秒';

}

clock();

setInterval(clock,1000);

};

</script>

</head>

<body>

<div id="box">

距离2017年1月1日还剩xx天xx时xx分xx秒

</div>

</body>

</html>

3.图片时钟.html

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

body {

background: darkgreen;

color: #fff;

font-size:50px;

text-align: center;

padding-top: 300px;

}

</style>

<script>

function addZero(n){

return n<10 ? '0'+n : ''+n ;

}

window.onload=function(){

var aImg=document.getElementsByTagName('img');

clock();

setInterval(clock,1000);

function clock(){

var oDate=new Date();

var oHour=oDate.getHours();

var oMin=oDate.getMinutes();

var oSec=oDate.getSeconds();

var str=addZero(oHour)+addZero(oMin)+addZero(oSec);

for(var i=0;i<aImg.length;i++){

aImg[i].src='img/'+str.charAt(i)+'.png';

}

</script>

</head>

<body>

<img src="img/0.png" alt="" />

<img src="img/0.png" alt="" />:

<img src="img/0.png" alt="" />

<img src="img/0.png" alt="" />:

<img src="img/0.png" alt="" />

</body>

</html>

4.本月一共有多少天.html　

<script>

var oDate=new Date();

oDate.setMonth(oDate.getMonth()+1);

oDate.setDate(0);

alert(oDate.getDate())

</script>

5.本月第一天是星期几

<script>

var oDate=new Date();

oDate.setDate(1);

alert(oDate.getDay());

</script>

6.九九乘法表：

<script>

document.write('<table>');

for(var i = 1; i <= 9; i++){

document.write('<tr>');

for(var j = 1; j <= i; j++){

document.write('<td>'+i+'*'+j+'='+i*j+'</td>');

}

document.write('</tr>');

}

document.write('</table>');

</script>

7.json转换成字符串.html

<script>

var json={a:12,b:5,c:9,d:6};

var arr=[];

for(var name in json){

arr.push(name+'='+json[name])

};

//alert(arr);

var str=arr.join('&');

alert(str);

</script>

8.字符串转换成json.html　

<script>

/*var str = 'a=1&b=2&c=3';

//先切割字符串

var arr = str.split('&');

//console.log(arr);

var json = {};

for(var i = 0; i < arr.length; i++){

//把数组中的每一个用'='在切一下;返回的是一个新的数组[a,1],[b,2],[c,3]

var arr2 = arr[i].split('=');

//console.log(arr2);

//往json中添加,数组中的第一个相当于是json的name,数组中的第二个相当于是json的value;

json[arr2[0]] = arr2[1];

}

console.log(json);

*/

function str2json(str){

var arr = str.split('&');

var json = {};

for(var i = 0; i < arr.length; i++){

var arr2 = arr[i].split('=');

json[arr2[0]] = arr2[1];

}

return json;

}

console.log(str2json('a=1&b=2&c=3'));

</script>

　　今天就和大家分享到这里，明天继续，谢谢大家的支持，有什么不对的地方希望大家多多指教，本人也是一名初学者！

　　转自：http://www.cnblogs.com/lianzhibin/p/6067693.html

转载于:https://www.cnblogs.com/WANGJUN5945/p/6096184.html

JS_ECMA基本语法中的几种封装的小函数相关推荐

JS_ECMA基本语法中的几种封装的小函数-1
今天给大家介绍js ECMA中几个封装的小函数以及一些常用的函数小案例: 1,找重复的函数 <script>//在数组里面找重复:function findInArr(n,arr){for ...
秀操作：函数宏的三种封装方式
关注.星标公众号,直达精彩内容 1. 函数宏介绍函数宏,即包含多条语句的宏定义,其通常为某一被频繁调用的功能的语句封装,且不想通过函数方式封装来降低额外的弹栈压栈开销. 函数宏本质上为宏,可以直接进 ...
秀操作 | 函数宏的三种封装方式
作者:☆星轨★ 链接:https://blog.csdn.net/qq_35692077/article/details/102994959 1. 函数宏介绍函数宏,即包含多条语句的宏定义,其通常为 ...
UML中的9种图例解析
UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中, ...
JavaScript中的几种继承方式及优缺点分析
众所周知,继承是面向对象编程思想中的三大特点(封装,继承,多态)之一. 所谓继承,通俗来讲就是子类自动拥有父类的属性和方法, 继承可以提高代码的复用性. 继承也是前端里面的重要的一个知识点,在实际工作 ...
Java开发中的23种设计模式详解(转)
设计模式(Design Patterns) --可复用面向对象软件的基础设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
区分 UML 类图中的几种关系
区分 UML 类图中的几种关系 2010-12-23 作者:fnw 来源:网络区分 UML 类图中的几种关系 UML 类图中的 "关联关系(association) &qu ...
聊聊 Linux 中的五种 IO 模型
聊聊 Linux 中的五种 IO 模型 2016/04/21 · IT技术 · 8 评论 · iO, 同步, 异步, 阻塞, 非阻塞分享到:0 本文作者: 伯乐在线 - 陶邦仁 .未经作者许可,禁止 ...
php和mysql函数的区别吗,(PHP,MySQL)函数仅在2种情况中的1种有效,找不到区别
因此,我具有此功能来搜索MySQL数据库中的条目: private function SearchContributors($search) { $search_pieces = explode(' ...

JS_ECMA基本语法中的几种封装的小函数

JS_ECMA基本语法中的几种封装的小函数相关推荐

最新文章

热门文章