亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

JavaScript進階篇

難度入門
時長 8小時55分
學習人數
綜合評分9.47
2558人評價 查看評價
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>


    查看全部

  • <!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 

  • 多種選擇（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>

    查看全部

  • ? ? ? ? ? ?

    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>

    查看全部
  • 二維數組

    <!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

  • let t = 帽子
    查看全部
    0 采集 收起 來源：什么是變量

    2022-10-11 

  • 了解成員數量(數組屬性length)

    http://img1.sycdn.imooc.com//6343f4cc0001be8f06640108.jpg

    type 和 language 屬性都可用來指定 <script> 標簽中的腳本的類型。language 屬性在 HTML 和 XHTML 標準中受到了非議，這兩個標準提倡使用 type 屬性。"type" 和 "language" 同時存在時，所有瀏覽器均優先識別 "type" 屬性內的腳本類型；為了保證腳本程序可以正常執行，應當將 script 標記的 "type" 屬性設置為 "javascript"，并且不要設置已經廢棄的 "Languange" 屬性。

    查看全部

  • ? ? ? ? ? ?

    prompt的用法//團里添加新成員（向數組增加一個新元素）

    https://img1.sycdn.imooc.com//6342c04e0001187407900576.jpg

    <!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>


    ? ? ? ?

    查看全部
  • 輸入一個數組的數據，作為另一個輸出數組的結果//課程——團里添加新成員（向數組增加一個新元素）

    <!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>

    http://img1.sycdn.imooc.com//6342be3c000191e003630166.jpg

    http://img1.sycdn.imooc.com//6342bdd00001d20f03470169.jpg

    查看全部
  • 誰是團里成員（數組賦值）

    http://img1.sycdn.imooc.com//634247a5000186e904660569.jpg

    http://img1.sycdn.imooc.com//634247b80001bb7406430634.jpg

    查看全部

  • <!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>


    http://img1.sycdn.imooc.com//6340107e0001a0d809380328.jpg

    i++與++i

    ? ? ? ?

    查看全部
    0 采集 收起 來源：編程練習

    2022-10-08

  • 來來來，已老夫30多年寫代碼的經驗來告訴你這個小白。

    首先你要搞清楚真與假這個概率，首先true是真，false是假。。同時真也代表1，假就代表0。（回顧一下課程就明白）

    第一個 var d = 3>(1>2) 這其實就是一道小學生都會做的運算，有括號的我們就先算括號里面的嘛，括號里面你看一下1>2是真還是假？ 肯定是假對不對，同時我剛才也說了假是不是就是等于0，所以再拿3>0，所以這樣你輸出來是不是就是真，也就是true

    第二個跟第一個同理

    第三個，這里面對比的就是編碼值了，因為是中文。每個漢字其實在計算機里面都有個編碼值：打個比方‘愛’這個字的編碼值是2000，‘我’這個字的編碼值是1500.。那'愛'>'我'比較那肯定就是true。。(具體每個漢字對應的編碼值可以上百度搜索)

    如果聽懂了，希望采納。謝謝

    http://img1.sycdn.imooc.com//633fa04c0001abae10160652.jpg

    較量較量(比較操作符)
    查看全部
  • 完整代碼在這里，功能算是都有實現，有注釋，有問題的話歡迎聯系

<!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 

  • <!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

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

    查看全部
首頁上一頁14151617181920下一頁尾頁

舉報

0/150
提交
取消
課程須知
你需要具備HTML、css基礎知識，建議同學們也可以想學習下js入門篇，快速認識js，熟悉js基本語法，更加快速入手進階篇！
老師告訴你能學到什么？
通過JavaScript學習，掌握基本語法，制作簡單交互式頁面

微信掃碼，參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號
友情提示：

您好，此課程屬于遷移課程，您已購買該課程，無需重復購買，感謝您對慕課網的支持！