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++语言的另类性,因保留有其原始特性,其语法并不象其它高级语言一样易理 ...
随机推荐
- XML文件数据操作
#region XML序列化文件和反序列化 /// <summary> /// 通用类的保存函数,可以将已经声明过可序列化的类以文件方式保存起来. /// 保存格式分为 XML明文式和 二 ...
- windows server 2008 R2 SP1 安装exchange 2010
一. 先决条件 若在windows server R2 SP1企业版系统上典型安装exchange server2010 SP3,则需要提前确定一下先决条件 AD域环境,域和林的功能级别必须是wind ...
- HDU 4939 Stupid Tower Defense（dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4939 解题报告:一条长度为n的线路,路上的每个单元格可以部署三种塔来给走在这条路上的敌人造成伤害,第一 ...
- BZOJ2243——[SDOI2011]染色
1.题目大意:给个树,然后树上每个点都有颜色,然后会有路径的修改,有个询问,询问一条路径上的颜色分成了几段 2.分析:首先这个修改是树剖可以做的,对吧,但是这个分成了几段怎么搞呢,我们的树剖的不是要建 ...
- 剑指Offer 矩形覆盖
题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 解法,还是斐波那契数列 AC代码: class So ...
- ssh(安全外壳层)
SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SSH 是目前较可靠,专为远程登录会 ...
- u-boot 2011.09 调用kernel 的流程
这段时候我总是觉得有个问题,u-boot 的存在是不是就是为了调用kernel 而存在的. 所以,粗浅的跟了一下这个流程,还有很多细节上的东西没有做好,往指正. u-boot-2011.9 调用内核代 ...
- MikroTik RouterOS防火墙与过滤详解
MikroTik RouterOS能对包状态过滤:P2P协议过滤:源和目标NAT:对源MAC.IP地址.端口.IP协议.协议(ICMP.TCP.MSS等).接口.对内部的数据包和连接作标记.ToS 字 ...
- apache2错误日志在哪，可以看到php错误
在以下路径中 /var/log/apache2/error.log
- Java语言中几个常用的包
Java采用包结构来组织和管理类和接口文件.本文介绍Java语言类库中几个常用的包,因为这几个包在软件开发与应用中经常需要用到,其中有些包是必要的.若是离开它,还真不能做事情了. 第一个包:java. ...