js 学习笔记

注解均为个人理解,有不对的请指正。炒鸡感谢~

1. js脚本执行顺序问题
<head>
  ...
<script>  
function openwin(){ 
	
	window.open("ordersInfo2.html", "newwindow", "height=100, width=400,top=200,left=200, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")    
	
	}  
</script> 
...
</head> 
<input type="button" onclick="openwin()" value="Buy" >

运行点击 button 没反应,网页源代码没有解析 onclick 方法,放在 body结束标签后就好了。这是由于 js 脚本语言的是 顺序执行的 ,脚本里所调用到的数据还没有解释到数据所在的位置,找不到自然就没反应了。

2. js 九九乘法表
//九九乘法表
    document.write("<table align='center' border='1' >");//绘制一个表格样式
    for(let n1=1;n1<=9;n1++){
        document.write("<tr>"); //行标签开始
        for(let n2=1;n2<=n1;n2++){
            document.write("<td>");//列标签开始
            document.write(n1+"*"+n2+"="+n1*n2+"&nbsp;&nbsp;&nbsp;");
            document.write("</td>"); //列标签结束
        }
        document.write("</tr>");//行标签结束
    }
    document.write("</table>");

    document.write("<br>");

效果图:
在这里插入图片描述

3. 循环1-100,求 是3的倍数… 5的倍数 … 7的倍数…
    for(let n2=3;n2<=7;n2+=2){
        let arr=new Array();
         for(let n1=1;n1<=100;n1++){
            if(n1%n2==0){ 
                arr.push(n1);  //向数组末尾压入(添加)元素
            }
        }
        document.write("是"+n2+"的倍数 "+arr);
        document.write("<br>"); 
    }

效果图·:
在这里插入图片描述

4. 最大公因数,最小公倍数

法一:(欧几里得/辗转相除法)

<script>
function calc(){
        let n1=document.getElementById("n1").value;
        let n2=document.getElementById("n2").value;
        //先将输入的数进行大小排序,从小到大,保持n1<n2
        if(n1>n2){
            let t =n1;
            n1=n2;
            n2=t;
        }
            let a=n2;
            let b=n1; 
            while(a%b!=0){  //辗转相除法,
               let t=b;
               b=a%b; //它的余数始终是他的除数
               a=t;   //它的被除数是上一次的除数
                
            }
           
            document.getElementById("n3").value=b;  
        
       
        let n4=n1*n2/b;
        document.getElementById("n4").value=n4;
    }  
</script
<body>
<span>请输入两个数: </span>
    <input id="n1">
    <input id="n2">
    <button onclick="calc()">提交</button><br>
    <span>最大公因数是:</span><span><input id="n3"></span><br>
    <span>最小公倍数是:</span><span><input id="n4"></span>
 </body>

效果图:
在这里插入图片描述
法二:普通思路

//求最小公倍数法2: 
 let a=4;
 let b=6;
 let c=a>b?a:b;   //求两数中较大的那个数
 for(let i=c;i<a*b;i++){   `公倍数的范围在 较大数-两数乘积 求最小从较大数开始递增`
    if(i % a==0 && i % b==0){   此处应该用短路与,如果第一个条件为假,第二个就不用判断了
         console.log("最小公倍数是"+i)} 
 }

 求最大公约数法2: 
 let a=20;
 let b=60;
 let c=a<b?a:b;//求两数中较小的那个数
 for(let i=c;i>=1;i--){  `公约数的范围在  1-较小数 求最大从较小数开始递减`
    if(a % i==0 && b % i==0){ 
         console.log("最大公约数是"+i)} 
 }
5. 将数组中值为0的项去掉,将不为0的值存入一个新的数组

法一:splice()

var oldarr=[1,3,4,5,0,0,6,6,0,5,4,7,6,7,0,5];
    var newarr= new Array();
    for(let i=0;i<oldarr.length;i++){
        if(oldarr[i]==0){
            oldarr.splice(i,1);
            i--;   //由于删掉后数组下标会变,会导致相邻的第二个0不会被检测到,
                  //此时i向前移动一位,重新扫描一遍即可。
        }
        else{
            newarr.push(oldarr[i]);
        }
    }
    console.log(oldarr); // [1, 3, 4, 5, 6, 6, 5, 4, 7, 6, 7, 5]
    console.log(newarr); // [1, 3, 4, 5, 6, 6, 5, 4, 7, 6, 7, 5]
    `对比结果一致,实际上要想达到题目要求不需要 if,只需else中的内容,
    这里只是为了验证 用了 splice 函数后为避免遗漏重复元素而需要将数组下标前移。`

法二:filter()

`//也可以用高阶函数 filter 过滤返回新的集合,,lambda表达式,e是每一个迭代的项`
    var arrr =oldarr.filter(e => e!=0);
    /* 上句相当于
   var arrr= oldarr.filter(function(e){
        //方法体
        return e!=0;
    });
    
    */
6. 冒泡排序----我之理解
 //冒泡排序(n个数,两两相比,比一次换一次,把最大的换到最右,下一次循环就是前n-1个元素相比了)
    var arr3 = [5,2,8,1,43,88,44];
    for(let i=arr3.length-1;i>=0;i--){ //外层循环递减,每次确定一个数,每次比较的个数递减
        let count =0;  //优化:定义一个变量count来保存每一趟交换中两两交换的次数,
        for(let j=0;j<i;j++){ //内层循环两个两个比,把最大的换到最右边
        //注意这里不能写成j<=i,若j=i,下面j+1就角标越界了
            if(arr3[j]>arr3[j+1]){
                let t= arr3[j];
                arr3[j]=arr3[j+1];
                arr3[j+1]=t;

               count++; //优化:交换次数
            }
        }
        if(count==0){ //优化:如果count==0,则说明排序已经完成,退出for循环
            break;
               }
        console.log(arr3);
    }
    console.log(arr3); 
   
    /* 
    也可以这样写循环,看你自己是怎么理解的了
        for(let i=0;i<arr3.length;i++){
            for(let j=0;j<arr3.length-i-1;j++){ 
            //若j<arr3.length-i,当i=0,j从0-6,j=6,j+1=7,角标越界,因此需要减1
                 if(arr3[j]>arr3[j+1]){
                    let t= arr3[j];
                    arr3[j]=arr3[j+1];
                    arr3[j+1]=t;
                 }
            }
        }
        
    排序过程如下:
      [2, 5, 1, 8, 43, 44, 88]
      [2, 1, 5, 8, 43, 44, 88]
      [1, 2, 5, 8, 43, 44, 88]
      [1, 2, 5, 8, 43, 44, 88]
      [1, 2, 5, 8, 43, 44, 88]
      [1, 2, 5, 8, 43, 44, 88]
     `可以很明显的看到,在第三次外循环后已经不需要了,
     因此上述代码需要优化,优化后只有前三行。
     需要注意的是,优化代码的位置,理清思路再放哦😀`
    */
7. reverse();手动将一个给定的整型数组转置输出
	var arr2 = [1,2,3,4,5,6,7];
    let b = arr2.length/2; //不用向上取整,i<b,i++,是取不到小数的
    for(let i=0;i<b;i++){
            let t=arr2[i];
            arr2[i]=arr2[arr2.length-i-1];
            arr2[arr2.length-i-1]=t;
    }
    console.log(arr2.join(",")); //[6, 5, 4, 3, 2, 1]
8. 二分查找
var arr6 = [2,4,6,6,8,10,11];
let target =3;
let low=0;
let high= arr6.length-1;
var result=Erfen(arr6,target); //调用函数
function Erfen(arr6,target){
    while(low<=high){                       //也可以用(low+high)/2算mid
        let mid=Math.ceil(low+(high-low)/2);//求中间数下标,每次循环都要重新算mid
        if(arr6[mid]==target){
            while(mid!=0 && arr6[mid-1]==arr6[mid]){ //如果目标值是重复的,以第一个为准,向前推
                mid--;
            }
            // console.log(mid);//控制台输出mid,但low,high没变化,又继续执行大循环,形成死循环
            return mid; //返回目标数组下标,直接退出循环
        }
        else if(arr6[mid]<target){
            low = mid +1; //如果这里是mid ,三个数的测试用例,目标值为一侧的数,mid始终不变,会陷入死循环。eg:[-2,1,2],2
        }
        else{
            high = mid-1;
        }
    }
    return -1;
 }
 console.log(result);
9. 万年历
//万年历 ,页面上输出 年 月 日 星期 时 分 秒 每一秒切换一次
//事件对象 h1 br 
setInterval(()=>{ //无参箭头函数
    //获取时间对象
    let d1 = new Date();
    let year = d1.getFullYear();
    let month =d1.getMonth();
    let day = d1.getDate();
    let week = d1.getDay();
    let hour = d1.getHours();
    let min = d1.getMinutes();
    let sec = d1.getSeconds();
    //获取元素信息 标签
    let body = document.getElementsByTagName("body")[0];
    body.innerHTML= "";
    let strweek= "";
    switch(week){
        case 1:
            strweek = "星期一"
            break;
        case 2:
            strweek = "星期二"
            break;
        case 3:
            strweek = "星期三"
            break;
        case 4:
            strweek = "星期四"
            break;
        case 5:
            strweek = "星期五"
            break;
        case 6:
            strweek = "星期六"
            break;
        case 7:
            strweek = "星期日"
            break;
        default:
            break;
    }
    document.write("<h1>"+year+"年"+"-"+(month+1)+"月-"+day+"日-"+strweek+"</h1>")
    document.write("<h2>"+hour+"时"+"-"+(min)+"分-"+sec+"秒"+"</h2>")
},1000)
10. 未完待续

有好的经验可以一同分享到这里~

java学习ing.jpg 😊o( ̄▽ ̄)ブ

有其他见解,评论区留言或者私信,一起讨论,纠正。

关注我,努力鸭~和我一起学习鸭~

另外,转载文章请记得附上原文链接哦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力鸭~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值