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

　　大家好！今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例：

首先先给大家说一下字符串、数组、数学方法以及json的一点小知识点:

字符串方法:
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

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

        window.onload=function(){

            var oNum1=document.getElementById('num1');

            var oNum2=document.getElementById('num2');

            var oVal=document.getElementById('val');

            var oBtn=document.getElementById('btn');

            oBtn.onclick=function(){

//                var a=Number(oNum1.value);

//                var b=Number(oNum2.value);

                var a=oNum1.value;

                var b=oNum2.value;

                var c=oVal.value;

//                c=='+' && alert(a+b);

//                c=='-' && alert(a-b);

//                c=='*' && alert(a*b);

//                c=='/' && alert(a/b);

//                c=='%' && alert(a%b);

                alert(eval(a+c+b))

            }

        }

    </script>

</head>

<body>

<input type="text" name="" value="" id="num1"/>

<select name="" id="val">

    <option>+</option>

    <option>-</option>

    <option>*</option>

    <option>/</option>

    <option>%</option>

</select>

<input type="text" name="" value="" id="num2"/>

<input type="button" name="" value="计算" id="btn"/>

</body>

</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="" />

<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>

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

Never too old to learn.

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

JS_ECMA基本语法中的几种封装的小函数-1
今天给大家介绍js ECMA中几个封装的小函数以及一些常用的函数小案例: 1,找重复的函数 <script> //在数组里面找重复: function findInArr(n,arr){ ...
JS_ECMA基本语法中的几种封装的小函数
先来回顾一下我们的字符串: 字符串方法: str.length str.charAt(i):取字符串中的某一个; str.indexOf('e');找第一个出现的位置;找不到返回-1; str.l ...
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++语言的另类性,因保留有其原始特性,其语法并不象其它高级语言一样易理 ...

随机推荐

Linux下安装和配置JDK与Tomcat（入门版）
JDK路径:/usr/java/jdk1.6.0_25 Tomcat路径:/usr/local/apache-tomcat 1. 下载jdk6.0(选择“.rpm.bin”结尾的,6u25版本) ht ...
svn 设置post-commit后报错svn: Can't convert string from 'UTF-8' to native encoding
文件语言编码和系统冲突导致的错误,设置svn目录下hooks/post-commit加上: export LANG=zh_CN.GB2312 或者: export LANG=zh_CN.UTF-8
Code First05--CodeFirst中值对象
今天主要介绍EF Code First中一个高级部分:Value Object,中文翻译过来叫做值对象. 所谓的值对象就是一些没有生命周期,也没有业务逻辑上唯一标识符的类.哪些类是Entity,哪些类 ...
Java多线程基础知识（五）
一. Java中的13个原子操作类在Jdk1.5中,这个包中的原子操作类提供了一种用法简单,性能高效,线程安全的更新一个变量的方式. 1. 原子更新基本类型类 AtomicBoolean : 原子更 ...
[codeforces 360]A. Levko and Array Recovery
[codeforces 360]A. Levko and Array Recovery 试题描述 Levko loves array a1, a2, ... , an, consisting of i ...
百度地图api 常用demo
功能一:获取map地图窗口的可视区域: var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZ ...
django的序列化
关于django的序列化主要应用在将数据库中检索的数据返回给客户端用户,特别的Ajax请求一般返回的Json格式两种方法: 方法一:serializers: 缺点就是只能应用于对象 "&q ...
应用HTK搭建语音拨号系统1:数据准备
选自:http://maotong.blog.hexun.com/6204849_d.html 应用HTK搭建语音拨号系统--数据准备苏统华哈尔滨工业大学人工智能研究室 2006年10月30日声 ...
ubuntu下编码转换工具
ubuntu打开windows下的txt或者代码文件,经常会出现乱码, ubuntu自带一种转换工具,是命令行的,下面提供一种最简单的方法进行转换比如要转换的文件为1.txt,进入1.txt的目录 ...
python查找并删除相同文件-UNIQ File-wxPython版本
今天用wxPython做了一个GUI程序,我称之为UNIQ File,实现查找指定目录内的相同文件,主要原理是计算文件的md5值(计算前先找出文件大小相同的文件,然后计算这些文件的md5值,而不是所有 ...

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

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

随机推荐

热门专题