1、一个简单的计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
input{
width:50px;
}
</style>
<script>
function calc(){
var num1= document.getElementById("num1").value;
var num2= document.getElementById("num2").value;
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var result = num1*num2;
var num = new Number(result);
document.getElementById("result").value=num.toExponential();
}
</script>
<input type="text" id="num1"> *
<input type="text" id="num2" >
=
<input type="text" id="result" >
<input type="button" value="运算" onclick="calc()">
</body>
</html>
2、字符串操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var x = "5";
var y = new String(x);
document.write("变量x的值是:"+x);
document.write("<br>");
document.write("变量x的类型是:"+(typeof x));
document.write("<br>");
document.write("变量y的值是:"+y);
document.write("<br>");
document.write("变量y的类型是:"+(typeof y));
document.write("<br>");
</script>
<br/>
<script>
var y = new String("Hello JavaScript");
document.write("通过.length属性获取字符串'Hello JavaScript'的长度"+y.length);
</script>
<br/>
<script>
var y = new String("Hello JavaScrpt");
document.write("字符串y的值:"+y);
document.write("<br>");
document.write('通过 charAt(0)获取位置0的字符串: '+y.charAt(0)); //返回H
document.write("<br>");
document.write('通过 charCodeAt(0)获取位置0的字符的 Unicode码 :'+y.charCodeAt(0)); //返回H对应的Unicode码 72
</script>
<br/>
<script>
var x = new String("Hello ");
var y = new String("Javascript");
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write( '通过函数concat()把x和y连接起来: ' + x.concat(y) );
</script>
<br/>
<script>
var y = new String("Hello JavaScript");
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write('通过 indexOf ("a")获取子字符"a" 第一次出现的位置 '+y.indexOf ("a"));
document.write('<br>');
document.write('通过 lastIndexOf ("a")获取子字符"a" 最后出现的位置 '+y.lastIndexOf ("a"));
</script>
<br/>
<script>
var x = new String("Hello");
var y = new String("Hello");
var z = new String("aloha");
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write( '字符串z的值: '+z);
document.write('<br>');
document.write('通过 localeCompare()判断 x和y是否相等 '+x.localeCompare(y));
document.write('<br>');
document.write('通过 localeCompare()判断 x和z是否相等 '+x.localeCompare(z));
document.write('<br>');
document.write('0 表示相等<br>');
document.write('1 表示字母顺序靠后<br>');
document.write('-1 表示字母顺序靠前<br>');
</script>
<br/>
<script>
var x = new String("Hello JavaScript");
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write('x.substring (0,3) 获取位0到3的字符串: '+x.substring (0,3) );
document.write('<br>');
document.write('左闭右开,取得到0,取不到3');
</script>
<br/>
<script>
var x = new String("Hello This Is JavaScript");
document.write( '字符串x的值: '+x);
document.write('<br>');
var y = x.split(" ");
document.write('通过空格分隔split(" "),得到数组'+y);
document.write("<br>");
var z = x.split(" ",2);
document.write('通过空格分隔split(" ",2),得到数组,并且只保留前两个'+z);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new String("Hello JavaScript");
p('这个是原字符串: '+x);
var y = x.replace("a","o");
p('只替换第一个 a: '+y);
var regS = new RegExp("a","g");
var z = x.replace(regS, "o");
p('替换掉所有的 a: '+z);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new String("Hello JavaScript");
var temp = x.charAt(0);
p('charAt返回的值'+temp);
p('其类型是'+ typeof temp );
var temp = x.concat("!!!");
p('concat返回的值'+temp);
p('其类型是'+ typeof temp );
var temp = x.substring(0,5);
p('substring返回的值'+temp);
p('其类型是'+ typeof temp );
</script>
</body>
</html>
3、排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function p(s,v){
document.write(s+' '+v);
document.write("<br>");
}
var x = new Array(); //创建长度是0的数组
p('通过 new Array()创建一个空数组:',x);
x = new Array(5); //创建长度是5的数组,,但是其每一个元素都是undefine
p('通过 new Array(5)创建一个长度是5的数组:',x);
p('像new Array(5) 这样没有赋初值的方式创建的数组,每个元素的值都是:',x[0]);
x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
p('创建有初值的数组new Array(3,1,4,1,5,9,2,6) :',x);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
p('通过.length获取当前数组的长度:'+x.length);p('当前数组是:'+x);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
p('通过.length获取当前数组的长度:'+x.length); var x = new Array(3,1,4);
p('通过.length获取当前数组的长度:'+x.length); p('当前数组是:'+x);
p('通过.length获取当前数组的长度:'+x.length); p("使用普通的for循环遍历数组");
for(i=0;i<x.length;i++){ //普通for循环
p(x[i]);
}
p("使用增强for循环遍历数组");
for(i in x){ //for in 循环
p(x[i]);
}
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
var y = new Array(1,5,9,2,6);
p('数组x是:'+x);
p('数组y是:'+y);
var z = x.concat(y);
p('使用concat连接数组x和y');
p('数组z是:'+z);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
p('数组x是:'+x);
var y = x.join();
p('y = x.join() 得到的是数组x的字符串表达,其值是'+y+" 其类型是 :" +(typeof y));
var z = x.join("@");
p('z = x.join("@");是x的字符串表达,不过分隔符不是默认的"," 而是"@" : '+z);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
p('数组x是:'+x);
x.push(5);
p('向x中push 5,得到 ' + x);
var e = x.pop();
p('从x中pop一个值出来,其值是 ' + e);
p('pop之后,x数组的值是:'+x);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
p('数组x是:'+x);
x.unshift (5);
p('对数组 unshift 值5(在最前面加),数组变为:' + x);
var e = x.shift ();
p('从数组中 shift 一个数(从最前面取),其值是:' + e);
p('shift之后,数组变为:' + x);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
x.sort();
p('使用sort排序后的数组x是:'+x);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
function comparator(v1,v2){
return v2-v1;
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
x.sort(comparator);
p('使用sort 进行自定义倒排序后的数组x是:'+x);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
function check(value,a){
for(i in a){
if(value==a[i])
return true;
}
return false;
}
function removeDuplicate(a){
var result =new Array();
while(a.length!=0){
var v = a.pop();
console.log(v);
if( !check(v,a) ){
result.push(v);
}
}
return result;
}
var x = new Array(1,3,4,5,7,7,4,5,6,7,7);
p('数组x是:'+x);
x = removeDuplicate(x);
x.sort();
p('使用sort排序后的无重复数据的数组x是:'+x);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
x.reverse();
p('使用reverse()函数进行反转后的值是:'+x);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
var y = x.slice(1);
p('x.slice(1)获取的子数组是:'+y);
var z = x.slice(1,3);
p('x.slice(1,3)获取的子数组是:'+z);
p('第二个参数取不到');
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
x.splice (3,2);//从位置3开始 ,删除2个元素
p('x.splice (3,2) 表示从位置3开始 ,删除2个元素:'+x);
x.splice(3,0,1,5);
p('x.splice(3,0,1,5) 从位置3开始,删除0个元素,但是插入1和5,最后得到:'+x);
</script>
</body>
</html>
4、获取时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var d = new Date();
document.write('new Date():'+d);
</script>
<br/>
<script>
var d = new Date();
document.write('分别获取年月日: ');
document.write(d.getFullYear());
document.write("/");
document.write(d.getMonth()+1);
document.write("/");
document.write(d.getDate());
</script>
<br/>
<script>
var d = new Date();
document.write("分别获取时:分:秒:毫秒 ");
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.write(":");
document.write(d.getMilliseconds());
</script>
<br/>
<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
document.write("今天是 : "+weeks[day]);
</script>
<br/>
<script>
var time = new Date().getTime();
document.write("从1970/1/1 08:00:00 到今天的毫秒数: "+ time);
</script>
<br/>
<script>
var d=new Date();
document.write("修改日期对象的值为世界末日:<br>");
d.setFullYear(2012);
d.setMonth(11); //月份是基0的,所以11表示12月
d.setDate(12);
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);
document.write(d);
</script>
</body>
</html>
5、随机数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.write(Math.E);
document.write("<br>");
document.write(Math.PI);
</script>
<script>
document.write(Math.abs(-1));
</script>
<script>
document.write(Math.min(1,100));
document.write("<br>");
document.write(Math.max(1,100));
</script>
<script>
document.write(Math.pow(3,3)); //3的立方,即27
</script>
<script>
document.write(Math.round(3.4));
document.write("<br>");
document.write(Math.round(3.5));
</script>
<script>
document.write("一个 0-1 之间的随机数 : Math.random():");
document.write("<br>");
document.write(Math.random());
document.write("<br>");
document.write("十个 5-10 之间的随机数 : Math.round(Math.random() *5)+5 ");
document.write("<br>");
for(i=0;i<10;i++){
document.write(Math.round(Math.random() *5)+5 ); //5-10之间的随机整数
document.write("<br>");
}
</script>
</body>
</html>
6、对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var hero = new Object();
hero.name = "盖伦"; //定义一个属性name,并且赋值
hero.kill = function(){
document.write(hero.name + " 正在杀敌" ); //定义一个函数kill
}
hero.kill(); //调用函数kill
</script>
<script>
function Hero(name){
this.name = name;
this.kill = function(){
document.write(this.name + "正在杀敌<br>");
}
}
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill();
</script>
<script>
function Hero(name){
this.name = name;
this.kill = function(){
document.write(this.name + "正在杀敌<br>");
}
}
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill();
Hero.prototype.keng = function(){
document.write(this.name + "正在坑队友<br>");
}
gareen.keng();
teemo.keng();
</script>
</body>
</html>