js 学习笔记

5 篇文章 0 订阅
1 篇文章 0 订阅

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

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( ̄▽ ̄)ブ

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

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

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
为减少 js 关键词的占用,此文件只占用“c$”一个关键词; * 使用时用: c$.函数名(参数列表); 或者 c$().函数名(参数列表) * 字符串操作函数、日期操作函数、数组操作函数等,直接增加到 String、Date、Array 类里面,便于直接使用 */ /** * 获取元素,或者在DOM加载完成时执行某函数 * @param arg 此参数为字符串时,认为是 c$.getElement 的缩写,用来获取元素。用法参考 c$.getElement * 如果 arg 是 function 则认为是 c$.ready 的缩写,在dom加载完成时执行。没有此参数则返回 c$ 对象。 * @param dom 需要选择的DOM对象,默认是 window.document * @return 没有arg参数时返回 c$ 对象,arg参数是字符串时返回查询的元素,arg参数是函数时没有返回内容。 * * @example * c$("mytext") // 返回 id 或者 name 为"mytext"的元素 * c$("#mytext") // 返回 id 为"mytext"的元素 * c$("@mytext") // 返回 name 为"mytext"的所有元素 * c$(".class1") // 返回 class 为"class1"的所有元素 * c$("$div") // 返回 标签 为"div"的所有元素 * c$("$div #text1") // 返回 div 标签里面 id 为"text1"的元素(支持多级查询,以空格分隔) * c$(function(){alert('执行DOM加载完成事件');}); // 为 c$.ready(fun) 的缩写 * * c$.函数名(参数列表) // 调用这工具类里面的函数 * c$().函数名(参数列表) // 调用这工具类里面的函数 */ var c$ = window.c$ = function(arg, dom) { // 如果没有参数,则返回 本对象;让程序可以这样写: c$().函数名(参数列表) if (arguments.length === 0) return c$; if (typeof arg == 'function') return c$.ready(arg); // 有参数则调用获取元素的函数,为 c$.getElement 的缩写 return c$.getElement(arg, dom); }; /** * 这是错误调试程序 * 当页面发生错误时,提示错误讯息;仅测试环境里会提示,正式环境下不提示错误。 * 注意:chrome、opera 和 safari 浏览器不支持 onerror 事件 * @param msg 出错讯息 * @param url 出错档案的地址 * @param sLine 发生错误的行 * @return true 返回true,会消去 IE下那个恼人的“网页上有错误”的提示 */ window.onerror = function(msg, url, sLine) { // 测试时可以提示出错信息;正式发布时不提示 if (c$.isTest) { var errorMsg = "当前页面的javascript发生错误.\n\n"; errorMsg += "错误: " + msg + "\n"; errorMsg += "URL: " + url + "\n"; errorMsg += "行: " + sLine + "\n\n"; errorMsg += "点击“确定”消去此错
JS学习笔记相关文档 Login.html学习 placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。 该提示会在用户输入值之前显示在输入字段中。 注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email和password。 测试样例参见test/placeholder.html 局部刷新 class="toolbar clearfix" ToolBar  隐藏掉系统原先的导航栏 clearfix 主要是用在浮动层的父层,而 clear 主要是用在浮动层与浮动层之间,和浮动层同一级,如果想要撑开父层的高度,clear 就要放在最后。 Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果需要引用该插件功能,需要引入modal.js OR bootstrap.js OR bootstrap.min.js 用法:通过 data 属性在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal",同时设置 data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框(带有 id="identifier")。 测试样例参见test/Modal.html function($) javascript中(function($){...})(jQuery)写法是指的是是匿名函数。 function(arg){...}这也定义了一个匿名函数,参数为arg。 测试样例参见test/AnonymousFunction.html .navbar-fixed-top使导航条固定在顶部 Index.html学习 Font Awesome 图标 Font Awesome 是一套绝佳的图标字体库和CSS框架。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 如果需要该插件功能,需要引入font-awesome.css OR font-awesome.min.css <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> </head> <body> <i class="fa fa-car"></i> <i class="fa fa-car" <i class="fa fa-car" </body> </html> 测试样例参见test/tubiao.html 1、列表图标 <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li> <li><i class="fa-li fa fa-square"></i>List icons</li> </ul> 2、动态图标 <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i> 3、旋转和翻转的图标 <i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180"></i> <i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class="fa fa-shield fa-flip-vertical"></i> 4、图标抖动√ <!-- 测试图标抖动--> 测试<i class="ace-icon fa fa-envelope icon-animated-vertical"></i> <p> 经测试:图标抖动与bootstrap.min.css;font-awesome.min.css;ace.min.css相关联</p> 测试样例参见test/tubiao2.html PS:fa-angle-double-down双箭头向下指示的图标,展开操作时用。 任务折叠+进度控制 主要是li标签的循环嵌套,浮于上层的列表需要引入jquery-2.1.4.min.js,bootstrap.min.js以使用dropdown等属性实现展开与折叠特性 进度控制, 除了使用<div class="progress-bar progress-bar-success"></div>直接控制进度条的长度外,还可以使用如下功能: <progress value="50" max="100"></progress>以实现进度条的变更控制,从后台获取数据,并计算其百分比并显示在前端。 分别使用progress-bar,progress-bar-warning,progress-bar-danger,progress-bar-success表示其安全与否等级。 测试样例分别参见test/liTag.html, test/progress.html 评论与回复 评论区的滚动:设置定量高度,在文字被排满的情下,自动加入滚动条 <div class="test"></div> <input type="text" id="test"/><input type='button' value='提交' [removed] function fun(){ var str = document.getElementById("test").value; var divs = document.getElementsByTagName("div"); for(i=0;i<divs.length;i++){ if(divs[i].className == "test"){ divs[i][removed] += "" +str+"</br>"; } }} [removed] 可实现评论提交功能。 也可通过与后台交互的方式,如发送post请求,提交给后台,后台审核通过后,通过servlet机制再传送给前端。 测试样例分别参见test/comment.html, test/comment2.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

努力鸭~

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

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

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

打赏作者

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

抵扣说明:

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

余额充值