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

字符串方法: 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获取元素封装的小函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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　

1
2
3
4
5
6
<script>
        var oDate=new Date();
        oDate.setMonth(oDate.getMonth()+1);
        oDate.setDate(0);
        alert(oDate.getDate())
    </script>

5.本月第一天是星期几

1
2
3
4
5
<script>
        var oDate=new Date();
        oDate.setDate(1);
        alert(oDate.getDay());
    </script>

6.九九乘法表：

1
2
3
4
5
6
7
8
9
10
11
<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

1
2
3
4
5
6
7
8
9
10
<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　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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基本语法中的几种封装的小函数的更多相关文章

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

    大家好!今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例: 首先先给大家说一下字符串.数组.数学方法以及json的一点小知识点: 字符串方法: str.length str.charAt(i ...

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

    今天给大家介绍js ECMA中几个封装的小函数以及一些常用的函数小案例: 1,找重复的函数 <script> //在数组里面找重复: function findInArr(n,arr){ ...

  3. axios在vue项目中的一种封装方法

    记录下之前领导封装的axios请求 npm install axios // 安装 单独写个文件配置axios,此处为request.js import axios from 'axios' //自定 ...

  4. SQL中的5种常用的聚集函数

    首先你要知道 where->group by->having->order by/limit  ,这个就是写sql语句时的顺序  常用的5个聚集函数: Max             ...

  5. MySQL存储过程中的3种循环,存储过程的基本语法,ORACLE与MYSQL的存储过程/函数的使用区别，退出存储过程方法

    在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环.还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用,很容易引起程序的混乱,在这里就不错具体 ...

  6. Shell中的(),{}几种语法用法-单独总结

    shell中的(),{}几种语法用法 查看脚本语法是否有错误: bash -n modify_suffix.sh 跟踪执行 sh -x modify_suffix.sh aaa 1. ${var} 2 ...

  7. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  8. 【转】UML中的几种关系详细解析

    UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现 类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中, ...

  9. C++ 炼气期之基本结构语法中的底层逻辑

    1. 前言 从语言的分类角度而言,C++是一种非常特殊的存在.属于高级语言范畴,但又具有低级语言的直接访问硬件的能力,这也成就了C++语言的另类性,因保留有其原始特性,其语法并不象其它高级语言一样易理 ...

随机推荐

  1. Debian下查看系统版本信息命令汇总

    Debian下如何查看版本信息, 包括位数.版本信息以及CPU内核信息.CPU具体型号等等,整个CPU信息一目了然. 1.odoo@debian64:~$ uname -a(Debian查看版本当前操 ...

  2. java判断身份证有效性

    import java.util.Calendar; public class CertNoUtil { public static boolean vIDNumByRegex(String idNu ...

  3. ios cell左滑删除

    iOS项目开发小技能 (三) -UITableView实现Cell左划删除等自定义功能 www.MyException.Cn  网友分享于:2015-06-05  浏览:0次   iOS项目开发小技巧 ...

  4. October 2nd 2016 Week 41st Sunday

    The road to success is lined with many tempting parking spaces. 通往成功的路边充斥着许多诱人的休息区. Exhausted, I thi ...

  5. chaper3_exerise_UVa455_周期串

    #include<iostream> #include<cstring> #include<stdio.h> using namespace std; ; int ...

  6. js冒泡排序与二分法查找

    冒泡排序 var attr=[1,5,7,6,3,9,2,8,4]; var zj=0; //控制比较轮数 for(var i=0;i<attr.length-1;i++) { //控制每轮的比 ...

  7. Android bluetooth用户自定义数据

    default mac: [btif_core.c] btif_fetch_local_bdaddr() default device name: [btif_dm.c] btif_get_defau ...

  8. MSMQ创建消息队列出现“工作组安装计算机不支持该操作”

    [sceislqzw]:你在创建公有队列,而你的机器不属于任何域.一般工作组安装的计算机只能创建私有队列. System.Messaging.MessageQueue QueueReceive = n ...

  9. Win10开机提示Resume from Hibernation该怎么办?

    Windows10系统的电脑开机提示:Resume from Hibernation(从休眠恢复),这是电脑没有真正关机,而是上次关机时进入了[休眠状态],所以开机时提示:从休眠恢复.如何解决Wind ...

  10. ytu 1059: 判别该年份是否闰年（水题，宏定义）

    1059: 判别该年份是否闰年 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 222  Solved: 139[Submit][Status][Web ...