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

JS_ECMA基本语法中的几种封装的小函数的更多相关文章

JS_ECMA基本语法中的几种封装的小函数-2
大家好!今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例: 首先先给大家说一下字符串.数组.数学方法以及json的一点小知识点: 字符串方法: str.length str.charAt(i ...
JS_ECMA基本语法中的几种封装的小函数-1
今天给大家介绍js ECMA中几个封装的小函数以及一些常用的函数小案例: 1,找重复的函数 <script> //在数组里面找重复: function findInArr(n,arr){ ...
axios在vue项目中的一种封装方法
记录下之前领导封装的axios请求 npm install axios // 安装单独写个文件配置axios,此处为request.js import axios from 'axios' //自定 ...
SQL中的5种常用的聚集函数
首先你要知道 where->group by->having->order by/limit ,这个就是写sql语句时的顺序常用的5个聚集函数: Max ...
MySQL存储过程中的3种循环,存储过程的基本语法,ORACLE与MYSQL的存储过程/函数的使用区别，退出存储过程方法
在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环.还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用,很容易引起程序的混乱,在这里就不错具体 ...
Shell中的(),{}几种语法用法-单独总结
shell中的(),{}几种语法用法查看脚本语法是否有错误: bash -n modify_suffix.sh 跟踪执行 sh -x modify_suffix.sh aaa 1. ${var} 2 ...
探究JavaScript中的五种事件处理程序
探究JavaScript中的五种事件处理程序我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...
【转】UML中的几种关系详细解析
UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中, ...
C++ 炼气期之基本结构语法中的底层逻辑
1. 前言从语言的分类角度而言,C++是一种非常特殊的存在.属于高级语言范畴,但又具有低级语言的直接访问硬件的能力,这也成就了C++语言的另类性,因保留有其原始特性,其语法并不象其它高级语言一样易理 ...

随机推荐

【python】下载远程内容到本地
来源:http://www.jb51.net/article/42630.htm urllib模块 urlretrieve方法 urllib.urlretrieve(url[, filename[, ...
iOS MRC ARC 内存管理
转自:http://www.jianshu.com/p/48665652e4e4 1. 什么是内存管理程序在运行的过程中通常通过以下行为,来增加程序的的内存占用创建一个OC对象定义一个变量调用 ...
checkbox实现全选全不选
1.jQuery实现checkbox全选全不选 <!DOCTYPE html> <head runat="server"> <title>jQu ...
【2016-09-16】UbuntuServer14.04或更高版本安装问题记录
出于项目需要,我们的Qt程序需要运行在 1. Windows/Linux-X86平台(CPU为常见的桌面级CPU如G3220.I3等): 2. Windows/Linux-X86低功耗平台(CPU为I ...
WEB前端开发学习：源码canvas 雪
WEB前端开发学习:源码canvas 雪双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...
MysqlDumpslow
可以帮助分析慢查询. 选项: -n 10 列出最近10条慢查询如: mysqldumpslow
Mysql undo与redo Log
http://mysql.taobao.org/monthly/2015/04/01/ http://www.cnblogs.com/Bozh/archive/2013/03/18/2966494.h ...
Android Attr -- Understanding Android Custom Attributes
原文:http://androidbook.com/item/4169
gzip
gzip -c 将输出写到标准输出上,并保留原文本 gzip * : 把当前目录中的每个文件压缩成.gz文件 [root@NB gzip]# ls mysql-bin. mysql-bin..tar ...
html 中几次方，平方米，立方米,下标，上标，删除线等的表示方法
html 中几次方,平方米,立方米,上标,下标,删除线等的表示方法上标下标删除线小号字 M2 54 X24+Y1<3=100 NN <sup>上标</sup> &l ...

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

JS_ECMA基本语法中的几种封装的小函数的更多相关文章

随机推荐

热门专题