JavaScript进阶篇_学习笔记

首页免费课 JavaScript进阶篇笔记

JavaScript进阶篇

                
                慕课官方号
            页面重构设计

                    查看讲师更多课程 
                    慕课官方号讲师的其他课程
                
帝堵抢车位动画制作
初级·36954
免费课程
                                
JavaScript入门篇 
入门·739813
免费课程
                                
                难度入门
            
                时长 8小时55分
            
                学习人数
            
综合评分9.47
                            2557人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.3
                                逻辑清晰

最热最新

爱尚丽明
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期对象 </title>
<script type="text/javascript">
var mydate=new Date();
document.write("当前时间："+mydate+"<br>");
mydate.setTime( mydate.getTime() + 2* 60 * 60 * 1000);
document.write("推迟二小时时间：" + mydate);
document.write("推迟二小时时间：" + mydate.getTime());
</script>
</head>
<body>
</body>
</html>
查看全部

0 采集收起来源：返回/设置时间方法
2022-10-25
爱尚丽明
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
let _value1 = document.getElementById('txt1').value || 0;
let _value2 = document.getElementById('txt2').value || 0;
let _select = document.getElementById('select').value
console.log(_value1)
console.log(_value2)
let _fruit = ''
//获取第一个输入框的值
//获取第二个输入框的值
//获取选择框的值
//获取通过下拉框来选择的值来改变加减乘除的运算法则
//设置结果输入框的值
switch(_select){
case '+':
_fruit = Number(_value1) + Number(_value2)
break;
case '-':
_fruit = Number(_value1) - Number(_value2)
break;
case '*':
_fruit = Number(_value1) * Number(_value2)
break;
default:
_fruit = Number(_value1)/Number(_value2)
}
document.getElementById("fruit").value = _fruit;

}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onClick="count()"/> 
<input type='text' id='fruit' />
</body>
</html>
查看全部

0 采集收起来源：编程练习
2022-10-24
weixin_慕少0311380
```
多种选择（Switch语句)——case的新用法
```
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>switch</title>
<script type="text/JavaScript">

function ass(x,y)
{
switch (true){
case x>y:
return x;
break;

case y>x:
return y;
break;


default:
return "两者相等，无最大值";
break;

}

}
ass(4,5);
document.write("5和4的较大植是"+ass(4,5)+"</br>");
ass(5,5);
document.write("6和4的较大植是"+ass(5,5));

</script>
</head>
<body>
</body>
</html>
查看全部

0 采集收起来源：多种选择（Switch语句)
2022-10-19
weixin_慕少0311380
```
document.write()和document.getElementById("").innerHTML=""的区别
```
```
多重判断（if..else嵌套语句）
```
document.write()输出结果会覆盖原有内容，而后者不会
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>if...else</title>
<script type="text/JavaScript">
function re(){
//var myage =document.getElementById('aa');//赵红的年龄为99
var myage =document.getElementById('aa').value; //赵红的年龄为99
if(myage<=44)
{document.write("青年");}
else if(myage<=59)
{document.getElementById("bb").innerHTML = "中年人";}
else if (myage<=89)
{document.getElementById("bb").innerHTML = "老年人";}
else
{document.getElementById("bb").innerHTML = "长寿老年人";}
}
</script>
</head>
<body>
<div>
<label>请输入你的年龄：</label>
<input id="aa" type="text" />
<input type="submit" onclick="re()" value="提交" />
<p id="bb"></p>
</div>
</body>
</html>
查看全部

0 采集收起来源：多重判断（if..else嵌套语句）
2022-10-15
weixin_慕少0311380
```
二维数组
```
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>二维数组</title>
<script type="text/javascript">
var a=new Array();
for(var i=0;i<3;i++){
a[i]=new Array();
for(var j=0;j<6;j++){
a[i][j]=i*j;
document.write(a[i][j]);
}
}
</script>
</head>

<body>
</body>
</html>
//问：
//这里输出的为什么是0000000123450246810，是什么算法？
答：你的输出内容语句在for循环里，这一行数字可以看成xyz[0][0]=0、xyz[0][1]=0、xyz[0][2]=0,......输出的元素没有间隔就是你这个结果。你可以改成document.write(xyz[i][j]+"<br>");就能清楚一点
查看全部

0 采集收起来源：二维数组
2022-10-11
慕仔6313570

let t = 帽子

查看全部

0 采集收起来源：什么是变量
2022-10-11
weixin_慕少0311380
```
了解成员数量(数组属性length)
```
type 和 language 属性都可用来指定 <script> 标签中的脚本的类型。language 属性在 HTML 和 XHTML 标准中受到了非议，这两个标准提倡使用 type 属性。"type" 和 "language" 同时存在时，所有浏览器均优先识别 "type" 属性内的脚本类型；为了保证脚本程序可以正常执行，应当将 script 标记的 "type" 属性设置为 "javascript"，并且不要设置已经废弃的 "Languange" 属性。
查看全部

0 采集收起来源：了解成员数量(数组属性length)
2022-10-10
weixin_慕少0311380
```
prompt的用法//团里添加新成员（向数组增加一个新元素）
```
<!doctype html>
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("Please enter your name","")
if (name!=null && name!="")
{
document.write("Hello " + name + "!")
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()"
value="Display a prompt box" />
</body>
</html>
查看全部

0 采集收起来源：团里添加新成员（向数组增加一个新元素）
2022-10-09
weixin_慕少0311380
```
输入一个数组的数据，作为另一个输出数组的结果//课程——团里添加新成员（向数组增加一个新元素）
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增加新元素</title>
<script language="javascript">
var a=new Array(),b=new Array();
b=["小米","中米","大米","老米"];
var num=0;
for(num=0;num<4;num++){
a[num]=prompt(b[num]);}

document.write("数组第一个值是:"+a[0]+"<br>");
document.write("数组第二个值是:"+a[1]+"<br>");
document.write("数组第三个值是:"+a[2]+"<br>");

</script>
</head>
<body>
</body>
</html>
查看全部

0 采集收起来源：团里添加新成员（向数组增加一个新元素）
2022-10-09
weixin_慕少0311380
```
谁是团里成员（数组赋值）
```
查看全部

0 采集收起来源：谁是团里成员（数组赋值）
2022-10-09
weixin_慕少0311380
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS基础</title>
<script type="text/javascript">
var a,b,sum;
var a = 5;
var b = 100%7;
sum = a > b && a*b > 0 ;
document.write( "我认为 a 的值是:" +5 + " b的值是:" + 2+ "sum 的值是:" +true+"<br/>");
document.write( "答案是,第一轮计算后，a 为："+a+ ";b为："+b +";第一次计算sum为："+ sum +"<br/>");

sum = ( (++a) + 3 ) / (2 - (--b) ) * 3;
document.write( "再一次计算后，我认为 a 的值是:" + 6 + " b的值是:" + 1+ "sum 的值是:" + 27 +"<br/>");
document.write( "答案是，第二轮计算后，a 为：" + a + ";b为：" + b +";第二次计算sum为："+ sum +",sum的类型也发生变化了。");

</script>
</head>
<body>
</body>
</html>
```
i++与++i
```
查看全部

0 采集收起来源：编程练习
2022-10-08
weixin_慕少0311380
来来来，已老夫30多年写代码的经验来告诉你这个小白。
首先你要搞清楚真与假这个概率，首先true是真，false是假。。同时真也代表1，假就代表0。（回顾一下课程就明白）
第一个 var d = 3>(1>2) 这其实就是一道小学生都会做的运算，有括号的我们就先算括号里面的嘛，括号里面你看一下1>2是真还是假？肯定是假对不对，同时我刚才也说了假是不是就是等于0，所以再拿3>0，所以这样你输出来是不是就是真，也就是true
第二个跟第一个同理
第三个，这里面对比的就是编码值了，因为是中文。每个汉字其实在计算机里面都有个编码值：打个比方‘爱’这个字的编码值是2000，‘我’这个字的编码值是1500.。那'爱'>'我'比较那肯定就是true。。(具体每个汉字对应的编码值可以上百度搜索)
如果听懂了，希望采纳。谢谢
```
较量较量(比较操作符)
```
查看全部

0 采集收起来源：较量较量(比较操作符)
2022-10-07

qq_爱偷猫的鱼_0

完整代码在这里，功能算是都有实现，有注释，有问题的话欢迎联系

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
     *{
      margin: 0;
      padding: 0;
      font-weight: 550;
     }
     ul li {
      list-style: none;
      cursor: pointer;
     }


     .container{
      width: 600px;
      height: 600px;
      z-index: 1000;
      padding: 10px;    
     }

     .container .tab{
      position: relative;
     }

     .container .tab .title{
      display: block;
      float: left;
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      z-index: 1010;
      margin-left: 5px;
      border: 2px solid  #ddd;
      border-bottom: none;
      position: relative;

     }

     .container .tab  .content{
      z-index: 1020;
      position: absolute;
      top: 32px;
      display: none;
      border: 2px solid  rgb(172, 170, 186);
      border-top: 2px solid  rgb(213, 95, 87);

      width: 300px;
      height: 140px;
      padding: 10px 5px;
      font-size: 20px;
      line-height: 20px;
     }

     .container .tab.active .title{
      z-index: 1040;
      border-bottom:2px solid #fff;
      border-top:2px solid rgb(213, 95, 87);
     }

     .container .tab.active .content{
      display: block;
      z-index: 1030;
     }



       
       
    </style>
    <script type="text/javascript">
    window.onload = function(){
      //默认显示第一个选项卡
      //页面加载完成后开始事件绑定
      var titleList = document.getElementsByClassName("title");
      for(var i=0; i<titleList.length; i++){
        titleList[i].addEventListener("click",switchTab);
      }

    }
    // JS实现选项卡切换
    function switchTab(event){
      //如果当前即为有效页，直接返回
      var currentTab = event.target.parentNode;
      if(currentTab.className.split(" ").indexOf("active") > -1){
        return;
      }
      //切换选项卡步骤：1、清空所有li的className为"tab"  2、设置当前选中li的classNamee为"tab active"
      var tabList = document.getElementsByClassName("tab");
      for(var i=0; i<tabList.length; i++){
        tabList[i].className = "tab"
      }
      currentTab.className = "tab active";
    }
   
   
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<ul class="container">
    <li class="tab active">
      <span class="title">房产</span>
      <div class="content">
          <h6>275万购昌平邻铁三居 总价20万买一居</h6>
          <h6>200万内购五环三居 140万安家东三环</h6>
          <h6>北京首现零首付楼盘 53万购东5环50平</h6>
          <h6>京楼盘直降5000 中信府 公园楼王现房</h6>
      </div>
    </li>
    <li class="tab">
      <span class="title">家居</span>
      <div class="content">
          <h6>40平出租屋大改造 美少女的混搭小窝</h6>
          <h6>经典清新简欧爱家 90平老房焕发新生</h6>
          <h6>新中式的酷色温情 66平撞色活泼家居</h6>
          <h6>瓷砖就像选好老婆 卫生间烟道的设计</h6>
      </div>
    </li>
    <li class="tab">
      <span class="title">二手房</span>
      <div class="content">
          <h6>通州豪华3居260万 二环稀缺2居250w甩</h6>
          <h6>西3环通透2居290万 130万2居限量抢购</h6>
          <h6>黄城根小学学区仅260万 121平70万抛!</h6>
          <h6>独家别墅280万 苏州桥2居优惠价248万</h6>
      </div>
    </li>
</ul>

 
</body>
</html>

查看全部

0 采集收起来源：编程挑战

2022-09-30

qq_爱偷猫的鱼_0

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <style type="text/css">
    .table tr{
      background-color: #fff;
    }
    .table tr:hover{
      background-color: #f2f2f2;
    }
    .table tr.thead:hover{
      background-color: #fff;
    }
  </style>
  <script type="text/javascript"> 
    var num = 1003;
      window.onload = function(){}
    // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
    //通过css可以实现
    

    //添加按钮时的弹出对话框
    function appendPrompt(){
      var name = prompt("请输入学员姓名","");
      if(name!=null&&name!=""){
        appendRow(name);
      }

    }
     
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function appendRow(name){
      var numstr = "xh" + num.toString().substring(1);
      var tableNode = document.getElementById("table");
      var node = document.createElement("tr");
      var trStr = "<td>"+numstr+"</td>"+
        "<td>"+name+"</td>"+
        "<td><a href='javascript:void(0);' onclick='removeRow(event)'  >删除</a></td>";
      node.innerHTML = trStr;
      tableNode.appendChild(node);
      num ++;
     }
    		
   	 
     // 创建删除函数
     function removeRow(evt){
      var deleteRow = evt.target.parentNode.parentNode;
      deleteRow.parentNode.removeChild(deleteRow);
     }


  </script> 
 </head> 
 <body> 
	   <table border="1" width="50%" id="table" class="table">
	   <tr class="thead">
		<th>学号</th>
		<th>姓名</th>
		<th>操作</th>
	   </tr>  

	   <tr>
		<td>xh001</td>
		<td>王小明</td>
		<td><a href="javascript:void(0);" onclick="removeRow(event)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
	   </tr>

	   <tr>
		<td>xh002</td>
		<td>刘小芳</td>
		<td><a href="javascript:void(0);" onclick="removeRow(event)"  >删除</a></td>   <!--在删除按钮上添加点击事件  -->
	   </tr>  

	   </table>
	   <input type="button" value="添加一行" onclick="appendPrompt()" />   <!--在添加按钮上添加点击事件  -->
 </body>
</html>

查看全部

0 采集收起来源：编程练习

2022-09-29

qq_爱偷猫的鱼_0

var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;

查看全部

0 采集收起来源：网页尺寸offsetHeight
2022-09-29

首页上一页 13 14 15 16 17 18 19 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript进阶篇