1.javascript的对象定义及使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript对象的定义与使用</title>
</head>
<body>
</body>
<script>
var obj = new Object();
obj.name = "zhangsan"
obj.age = 17;
obj.say = function(){
console.log(this.name+":"+this.age);
}
obj.say();
function CreateObj(name , age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.say = function(){
console.log(this.name+ ":"+ this.age);
}
return obj;
}
var obj1 = CreateObj('zhangsanfeng', 149);
obj1.say();
function Stu(uname, uage){
this.name = uname;
this.age = uage;
this.say = function(){
console.log(this.name +":"+this.age);
}
}
var s1 = new Stu('zhaoyun ',49);
var s2 = new Stu('guanyunchang ',149);
s1.say();
s2.say();
var obj ={name:'zhangsan ',age:26}
console.log(obj.name)
console.log(obj.age)
var ob = {}
ob.name = "zhangsan ";
ob.age = 24;
ob.say = function(){
console.log('我叫:'+ this.name+'我今年'+this.age+'岁了。')
}
ob.say();
</script>
</html>
2.javascript内置对象-Array数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript的内置对象-Array</title>
</head>
<script>
var a = new Array();
var b = new Array(10);
var c = new Array(11,12,13);
var d = [1,2,3,4,5]
for(var i = 0; i<d.length;i++){
console.log(d[i]);
}
for(i in d){
console.log(d[i]);
}
d.forEach(function(v){
console.log(v);
});
console.log(d.toString())
console.log(d.join(':'))
var aa = [1,2,3];
console.log(aa.concat(4,5));
var bb = [1,2,3,4,2,5,6];
console.log(bb.join(':'))
console.log(bb.sort().join(':'))
console.log(bb.reverse().join(':'))
var aa = new Array(1,2,3);
console.log(aa.join(":"))
aa.push(4)
aa.push(5)
console.log(aa.join(":"))
aa.pop();
console.log(aa.join(":"))
console.log(bb.join(':'))
bb.length = 3;
console.log(bb.join(":"))
bb = [];
console.log(bb.join(':'))
</script>
<body>
</body>
</html>
3.JavaScript内置对象-基本包装类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript--内置对象</title>
</head>
<script>
var a = "zhangsan ";
console.log(a.substring(2,5))
var a = new String('zhangsan ')
console.log(a.substring(2,5))
var num = 12.356;
console.log(num)
var num = new Number(12.356)
console.log(num.toFixed(2))
</script>
<body>
</body>
</html>
4.javascript内置对象-Date日期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript--内置对象</title>
</head>
<script>
function formatDate(dd){
if(!dd instanceof Date){
return;
}
var y = dd.getFullYear(),
m = dd.getMonth()+1,
d = dd.getDate(),
hh = dd.getHours(),
mm = dd.getMinutes(),
ss = dd.getSeconds();
hh = hh<10?'0'+hh:hh
mm = mm<10?'0'+mm:mm
ss = ss<10?'0'+ss:ss
return y+'-'+m+'-'+d+'-'+' '+hh+':'+mm+':'+ss;
}
var dd = new Date();
document.write('时间戳:'+dd.valueOf());
document.write('<h2>'+formatDate(dd)+'</h2>')
</script>
<body>
</body>
</html>
5.javascript内置对象-String字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript--内置对象</title>
</head>
<script>
var s1 = 'ZhangSanFeng';
document.write(s1+'<br/>');
document.write(s1[5]+'<br/>');
document.write(s1.charAt(5)+'<br/>');
document.write(s1.substr(5,3)+'<br/>');
document.write(s1.substring(5,8)+'<br/>');
document.write('大写:'+s1.toUpperCase()+'<br/>');
document.write('小写:'+s1.toLowerCase()+'<br/>');
document.write(s1.indexOf('an')+'<br/>');
document.write(s1.lastIndexOf('an')+'<br/>');
document.write(s1.replace('SanFeng','wuJi')+'<br/>');
document.write('10,2,3,4'.replace(/,/g,':')+'<br/>')
var str = '12:2:2:4:56:6:7';
document.write(str+'<br/>');
document.write(str.split(":")+'<br/>');
document.write(s1+'<br/>');
var aa = " hello world! "
document.write('#'+aa+'#'+'<br/>');
document.write('#'+aa.trim()+'#'+'<br/>');
</script>
<body>
</body>
</html>
6.javascript内置对象-Math对像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript--内置对象</title>
</head>
<script>
document.write(Math.abs(-10)+'<br/>')
document.write(Math.ceil(10.00000001)+'<br/>')
document.write(Math.floor(9.99999999)+'<br/>')
document.write(Math.round(4.5555)+'<br/>')
document.write(Math.max(1,2,3)+'<br/>')
document.write(Math.min(1,2)+'<br/>')
document.write(Math.random()+'<br/>')
document.write(Math.ceil(Math.random()*1000000)%101+300+'<br/>')
</script>
<body>
</body>
</html>
7.JavaScript内置对象-单击事件与元素标签操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript--单击事件</title>
</head>
<body>
<h2 id="aa">JavaScript语言实例--单击事件</h2>
<button onclick="fun()">点击我</button>
<ul id="uid">
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
<ol id="oid">
<li>aaaaaa</li>
<li>bbbbbb</li>
</ol>
</body>
<script>
function fun(){
var hid = document.getElementById('aa');
console.log(hid);
hid.innerHTML='JavaScript语言实例--单击事件!!';
hid.style.color='red';
hid.style.backgroundColor = '#ddd';
}
var m = document.getElementById('uid').getElementsByTagName('li');
for(var i in m){
console.log(m[i].innerHTML);
m[i].style.color = 'red';
}
</script>
</html>
8.JavaScript中的Timing定时事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>javascript -- 定时器</h2>
<h2 id="hid">计数器:0</h2>
<button onclick="DoStop()">停止</button>
</body>
<script>
var m = 0,mytime = null;
function Do(){
m++;
document.getElementById('hid').innerHTML = '计时器'+m;
mytime = setTimeout(Do, 1000);
}
Do();
function DoStop(){
clearTimeout(mytime);
}
</script>
</html>
9.JavaScript实现简单计算器实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>JavaScript语言实例--简单计算器</h2>
<form action="" name="myform" method="GET">
数值1:<input type='text' name="num1" size="10px"/><br/><br/>
数值1:<input type="text" name="num2" size="10px"/><br/><br/>
结果:<input type="text" name="res" readonly style="border: 0px;" size="10px"><br/><br/>
<input type="button" onclick="doFun(1)" value="加">
<input type="button" onclick="doFun(2)" value="减">
<input type="button" onclick="doFun(3)" value="乘">
<input type="button" onclick="doFun(4)" value="除">
</form>
</body>
<script>
function doFun(c){
n1 = parseInt(document.myform.num1.value);
n2 = parseInt(document.myform.num2.value);
var res;
switch(c){
case 1:res = n1+'+'+n2+'='+(n1+n2);
break;
case 2:res = n1+'-'+n2+'='+(n1-n2);
break;
case 3:res = n1+'*'+n2+'='+(n1*n2);
break;
case 4:res = n1+'/'+n2+'='+(n1/n2);
break;
}
document.myform.res.value = res;
}
</script>
</html>
10.JavaScript简单操作元素标签实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>javascript--放大缩小和隐藏</h2>
<button onclick="doFun(1)">放大</button>
<button onclick="doFun(2)">缩小</button>
<button onclick="doFun(3)">隐藏</button>
<br/><br/>
<div style="border: 1px;height: 300px;width: 200px;background-color: aqua;" id="dd"></div>
</body>
<script>
var width=200,height=300;
var hid = document.getElementById('dd');
function doFun(c){
switch(c){
case 1:
width+=10;
height+=10;
hid.style.width = width+'px';
hid.style.height = height+'px';
break;
case 2:
width-=10;
height-=10;
hid.style.width = width+'px';
hid.style.height = height+'px';
break;
case 3:
hid.style.display = 'none';
break;
}
}
</script>
</html>