看程序学js-2

于 2019-06-16 19:13:32 发布
阅读量109 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/92419672
版权

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>
涂家豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值