大家好！今天继续给大家写一下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获取元素封装的小函数：

  1. //getByClass(oParent,sClass);//oParent:从哪个父级下面获取;sClass:要获取的是哪个class名字;
  2. function getByClass(oParent,sClass){
  3. 	if(oParent.getElementsByClassName){
  4. 		return oParent.getElementsByClassName(sClass);
  5. 	}else{
  6. 		var aEle = oParent.getElementsByTagName('*');
  7. 		var arr = [];
  8. 		for(var i = 0; i < aEle.length; i++){
  9. 			var tmp = aEle[i].className.split(' ');
  10. 			if(findInArr(sClass,tmp) == true){
  11. 				arr.push(aEle[i]);
  12. 			}
  13. 		}
  14. 		return arr;
  15. 	}
  16. }　

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

1 计算器效果.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script>
  7.         window.onload=function(){
  8.             var oNum1=document.getElementById('num1');
  9.             var oNum2=document.getElementById('num2');
  10.             var oVal=document.getElementById('val');
  11.             var oBtn=document.getElementById('btn');
  12.             oBtn.onclick=function(){
  13. //                var a=Number(oNum1.value);
  14. //                var b=Number(oNum2.value);
  15.                 var a=oNum1.value;
  16.                 var b=oNum2.value;
  17.                 var c=oVal.value;
  18. //                c=='+' && alert(a+b);
  19. //                c=='-' && alert(a-b);
  20. //                c=='*' && alert(a*b);
  21. //                c=='/' && alert(a/b);
  22. //                c=='%' && alert(a%b);
  23.                 alert(eval(a+c+b))
  24.             }
  25.         }
  26.     </script>
  27. </head>
  28. <body>
  29. <input type="text" name="" value="" id="num1"/>
  30. <select name="" id="val">
  31.     <option>+</option>
  32.     <option>-</option>
  33.     <option>*</option>
  34.     <option>/</option>
  35.     <option>%</option>
  36. </select>
  37. <input type="text" name="" value="" id="num2"/>
  38. <input type="button" name="" value="计算" id="btn"/>
  39. </body>
  40. </html>

2.倒计时.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #box{
  8.             width: 800px;
  9.             height: 300px;
  10.             background: green;
  11.             color: whitesmoke;
  12.             line-height: 300px;
  13.             text-align: center;
  14.             margin:100px auto;
  15.             font-size:40px;
  16.         }
  17.     </style>
  18.     <script>
  19.         window.onload=function(){
  20.             var oBox=document.getElementById('box');
  21.             var oDate=new Date();
  22.             oDate.setFullYear(2017,0,1);
  23.             oDate.setHours(0,0,0,0);
  24.             function clock(){
  25.                 var ms=oDate.getTime()-new Date().getTime();
  26.                 var oSec=parseInt(ms/1000);
  27.                 var oDay=parseInt(oSec/86400);
  28.                 oSec%=86400;
  29.                 var oHour=parseInt(oSec/3600);
  30.                 oSec%=3600;
  31.                 var oMin=parseInt(oSec/60);
  32.                 oSec%=60;
  33.                 oBox.innerHTML='距离2017年1月1日还剩'+oDay+'天'+oHour+'时'+oMin+'分'+oSec+'秒';
  34.             }
  35.             clock();
  36.             setInterval(clock,1000);
  37.         };
  38.     </script>
  39. </head>
  40. <body>
  41. <div id="box">
  42.     距离2017年1月1日还剩xx天xx时xx分xx秒
  43. </div>
  44. </body>
  45. </html>

3.图片时钟.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {
  8.             background: darkgreen;
  9.             color: #fff;
  10.             font-size:50px;
  11.             text-align: center;
  12.             padding-top: 300px;
  13.         }
  14.     </style>
  15.     <script>
  16.         function addZero(n){
  17.             return n<10 ? '0'+n : ''+n ;
  18.         }
  19.         window.onload=function(){
  20.             var aImg=document.getElementsByTagName('img');
  21.             clock();
  22.             setInterval(clock,1000);
  23.             function clock(){
  24.                 var oDate=new Date();
  25.                 var oHour=oDate.getHours();
  26.                 var oMin=oDate.getMinutes();
  27.                 var oSec=oDate.getSeconds();
  28.                 var str=addZero(oHour)+addZero(oMin)+addZero(oSec);
  29.                 for(var i=0;i<aImg.length;i++){
  30.                     aImg[i].src='img/'+str.charAt(i)+'.png';
  31.                 }
  32.             }
  33.  
  34.         }
  35.     </script>
  36. </head>
  37. <body>
  38. <img src="img/0.png" alt="" />
  39. <img src="img/0.png" alt="" />:
  40. <img src="img/0.png" alt="" />
  41. <img src="img/0.png" alt="" />:
  42. <img src="img/0.png" alt="" />
  43. <img src="img/0.png" alt="" />
  44. </body>
  45. </html>

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

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

5.本月第一天是星期几

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

6.九九乘法表：

  1. <script>
  2. document.write('<table>');
  3. for(var i = 1; i <= 9; i++){
  4. 	document.write('<tr>');
  5. 	for(var j = 1; j <= i; j++){
  6. 		document.write('<td>'+i+'*'+j+'='+i*j+'</td>');
  7. 	}
  8. 	document.write('</tr>');
  9. }
  10. document.write('</table>');
  11. </script>

7.json转换成字符串.html

  1.     <script>
  2.         var json={a:12,b:5,c:9,d:6};
  3.         var arr=[];
  4.         for(var name in json){
  5.             arr.push(name+'='+json[name])
  6.         };
  7.         //alert(arr);
  8.         var str=arr.join('&');
  9.         alert(str);
  10.     </script>

8.字符串转换成json.html　

  1. <script>
  2. /*var str = 'a=1&b=2&c=3';
  3. //先切割字符串
  4. var arr = str.split('&');
  5. //console.log(arr);
  6. var json = {};
  7. for(var i = 0; i < arr.length; i++){
  8. 	//把数组中的每一个用'='在切一下;返回的是一个新的数组[a,1],[b,2],[c,3]
  9. 	var arr2 = arr[i].split('=');
  10. 	//console.log(arr2);
  11. 	//往json中添加,数组中的第一个相当于是json的name,数组中的第二个相当于是json的value;
  12. 	json[arr2[0]] = arr2[1];
  13. }
  14. console.log(json);
  15. */
  16. function str2json(str){
  17. 	var arr = str.split('&');
  18. 	var json = {};
  19. 	for(var i = 0; i < arr.length; i++){
  20. 		var arr2 = arr[i].split('=');
  21. 		json[arr2[0]] = arr2[1];
  22. 	}
  23. 	return json;
  24. }
  25. console.log(str2json('a=1&b=2&c=3'));
  26. </script>

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

Never too old to learn.

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

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

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

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

      先来回顾一下我们的字符串: 字符串方法: str.length str.charAt(i):取字符串中的某一个; str.indexOf('e');找第一个出现的位置;找不到返回-1; str.l ...

  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. 用CSS画个三角形

    <!DOCTYPE html> <html> <head> <style type="text/css"> #trangle { d ...

  2. 外国类似stackoverflow这样的网站访问慢怎么解决-遁地龙卷风

    第二版 百度搜索蓝灯 下载桌面版 双击运行 如果打开的浏览器不是你想要的 拷贝地址栏地址给你想要的浏览器 一切就ok了!!!!! 建议不访问国外网站时,便将蓝灯关掉,否则在访问一些不开蓝灯能够正常访问 ...

  3. Java设计模式 之 代理模式

    所谓的代理模式就是为其它类或对象提供一个代理以控制对这个对象的访问.那么常见的代理有远程代理,虚拟代理,保护代理,智能代理. 1. 远程代理:为一个不同地址空间的对象提供一个本地代理对象. 2. 虚拟 ...

  4. Android沉浸式任务栏的实现

    1.MainActivity.java public class MainActivity extends Activity { @Override protected void onCreate(B ...

  5. hiho #1361 Playfair密码表

    题目1 : Playfair密码表 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho经常用Playfair密码表加密自己的代码. 密码表是按以下步骤生成的. ...

  6. Android自定义标题栏

    预览一下效果: 素材: 新建一个布局title_bar.xml,代码如下: <?xml version="1.0" encoding="utf-8"?&g ...

  7. git分支管理策略

    http://www.ruanyifeng.com/blog/2012/07/git.html https://www.digitalocean.com/community/tutorials/how ...

  8. [转]IntelliJ Idea 常用快捷键 列表(实战终极总结！！！！)

    IntelliJ Idea 常用快捷键 列表(实战终极总结!!!!) ntelliJ Idea 常用快捷键 列表(实战终极总结!!!!) 1. -----------自动代码-------- 常用的有 ...

  9. SQL merge into 表合并

    Merge关键字是一个神奇的DML关键字.它在SQL Server 2008被引入,它能将Insert,Update,Delete简单的并为一句.MSDN对于Merge的解释非常的短小精悍:”根据与源 ...

  10. 一个很详细的web.xml讲解

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "- ...