文章目錄
- 學習成果
- 中北大學畢業設計管理系統
- 教務系統登陸
- 個人社保計算
- 個人存款在線計算器
- 7.12--lesson1
- HTML：表單
- 7.13--lesson2
- HTML：表格
- HTML：超鏈接
- HTML：圖片
- HTML：串列
- HTML：標題
- HTML：顏色
- HTML：字符物體
- HTML：iframe框架
- 面試常問：get post區別
- 12306用戶注冊
- 7.14--lesson3
- CSS：簡介
- CSS：選擇器
- CSS：代碼放的位置
- CSS：開發常用樣式
- 7.15--lesson4
- CSS：顯示
- CSS：浮動
- bootstrap
- 7.16--lesson5
- bootstrap表格
- 7.17--lesson6
- 學習心得
- 上網程序
- JavaScript學習重點
- JavaScript函式
- 7.19--lesson7
- JavaScript正則運算式
- JavaScript事件
- JavaScript表單驗證
學習成果
中北大學畢業設計管理系統
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中北大學畢業設計管理系統</title>
<style>
body{background-color: #4781C9;}
#logindiv{
background-color: white;
margin: 0 auto;
margin-top: 130px;
height: 530px;
width: 550px;
padding-top:30px ;
}
#uname{
height: 55px;
width: 426px;
background-color: transparent;
border: 1px solid lightgray;
padding-left: 30px ;
margin-bottom: 10px;
margin-left: -30px;
border-radius: 5px;
}
#upsw{
height: 55px;
width: 426px;
background-color: transparent;
border: 1px solid lightgray;
padding-left: 30px ;
margin-bottom: 10px;
margin-left: -30px;
border-radius: 5px;
}
#login{
height: 55px;
width: 456px;
background-color: orangered;
border: 1px solid lightgray;
color: white;
font-size: 28px;
font-family: "微軟雅黑";
border-radius: 5px;
margin-bottom: 10px;
}
#linkdiv{
margin-top: 10px;
}
#bottomdiv{
margin-top: 30px;
font-family: "仿宋";
}
#weibomig{
margin-left: 15px;
margin-right: 15px;
}
#thirdmig{
margin-left: -6px;
margin-bottom: -4px;
}
</style>
</head>
<body>
<form action="heihei.html" method="get">
<div align="center" id="logindiv">
<img width="300px" height="85px" src="images/nuc.png"/>
<h1>畢業設計管理系統</h1>
<img id="firstimg" src="images/user.png" />
<input id="uname" type="text" placeholder="請輸入用戶名"/><br>
<img id="secondimg" src="images/password.png" />
<input id="upsw" type="password" placeholder="請輸入密碼"/><br>
<input id="login" type="submit" value="登陸"/><br />
<div id="linkdiv">
<a href="three.html"><img src="images/weixin.png" /></a>
<a href="three.html"><img id="weibomig" src="images/weibo.png" /></a>
<a href="three.html"><img src="images/qq.png"/></a>
</div>
<div id="bottomdiv">
<p>
開發者：王佳蕊 中北大學軟體學院
<img id="thirdmig" hspace="20px" width="20px" src="images/1.jpg"/>
</p>
</div>
</div>
</form>
</body>
</html>
教務系統登陸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>教務系統登陸</title>
<style>
body{
background-color: #1E9FFF;
}
#logindiv{
background-color: white;
width: 400px;
height: 440px;
margin: 0 auto;/*居中*/
margin-top: 150px;/*頂端外邊距*/
padding-top: 20px;/*頂端內邊距*/
text-align: center;/*文字居中*/
}
h1{
font-family:"微軟雅黑" ;
color: #1E9FFF;
margin: 0px;
}
#uname{
width: 318.4px;
height: 38px;
border-radius: 5px;
border: 1px solid lightgray;
margin-left: -30px;
background-color: transparent;
padding-left: 30px;
}
#upsw{
width: 318.4px;
height: 38px;
border-radius:5px;
border: 1px solid lightgray;
margin-left: -30px;
background-color: transparent;
padding-left: 30px;
margin-top: 20px;
}
#ubt{
width: 350.4px;
height: 38px;
background-color: #1E9FFF;
margin-top: 20px;
border-radius: 5px;
color: white;
border: 1px;
}
</style>
</head>
<body>
<form action="text.html" method="get">
<div id="logindiv">
<h1>UOlab聯合開放實驗室</h1>
<h1 style="margin-bottom: 20px;" 10px;>管理平臺</h1>
<img src="images/user.png" />
<input type="text" id="uname" placeholder="用戶名"/><br>
<img src="images/password.png">
<input type="password" id="upsw" placeholder="密碼"><br>
<input id="ubt" type="submit" value="登陸"/>
</div>
</form>
</body>
</html>
個人社保計算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>個人社保計算</title>
<!-- 新 Bootstrap 核心 CSS 檔案 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery檔案，務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function jisuan(){
//獲得工資，看輸入是否合法
var sal = document.getElementById("salary").value;
//判斷是否合法
var regExp = /^[0-9]{4,5}$/;
if(!regExp.test(sal)){
document.getElementById("salary").value="必須輸入4-5位數字";
document.getElementById("salary").style="color:red";
return;
}
//合法的話開始計算
var salNum = parseInt(sal);//把字串轉成數字
var ylgr = salNum * 0.08;
var ylgs = salNum * 0.02;
document.getElementById("ylgr").innerHTML=ylgr;
document.getElementById("ylgs").innerHTML=ylgs;
var ybgr = salNum * 0.02;
var ybgs = salNum * 0.06;
document.getElementById("ybgr").innerHTML=ybgr;
document.getElementById("ybgs").innerHTML=ybgs;
var sygr = salNum * 0.005;
var sygs = salNum * 0.015;
document.getElementById("sygr").innerHTML=sygr;
document.getElementById("sygs").innerHTML=sygs;
var gsgs = salNum * 0.005;
document.getElementById("gsgs").innerHTML=gsgs;
var shengyu = salNum * 0.008;
document.getElementById("shengyu").innerHTML=shengyu;
var gjjgr = salNum * 0.005;
var gjjgs = salNum * 0.015;
document.getElementById("gjjgr").innerHTML=gjjgr;
document.getElementById("gjjgs").innerHTML=gjjgs;
var grhj = ylgr + ybgr + sygr + gjjgr;
var gshj = ylgs + ybgs + sygs + gsgs + shengyu + gjjgs;
document.getElementById("grhj").innerHTML=grhj;
document.getElementById("gshj").innerHTML=gshj;
var total = salNum + gshj;
document.getElementById("total").innerHTML=total;
}
function clearContent(){
document.getElementById("salary").value="";
document.getElementById("salary").style="color：black";
}
</script>
</head>
<body>
<div class="container text-center">
<img height="100px" img-circle width="100px" src="images/1.jpg"/>
<table class=" table text-center table-bordered">
<tr>
<td>工資</td>
<td colspan="3">
<input onfocus="clearContent()" class="form-control" placeholder="請輸入工資" id="salary" type="text">
</td>
<td>
<button onclick="jisuan()" class="btn btn-danger btn-block" >計算</button>
</td>
</tr>
<tr class="bg-primary">
<td>險種</td>
<td>個人%</td>
<td>個人</td>
<td>公司%</td>
<td>公司</td>
</tr>
<tr>
<td>養老</td>
<td>8%</td>
<td id="ylgr"></td>
<td>20%</td>
<td id="ylgs"></td>
</tr>
<tr>
<td>醫療</td>
<td>2%</td>
<td id="ybgr"></td>
<td>6%</td>
<td id="ybgs"></td>
</tr>
<tr>
<td>失業</td>
<td>0.5%</td>
<td id="sygr"></td>
<td>1.5%</td>
<td id="sygs"></td>
</tr>
<tr>
<td>工傷</td>
<td></td>
<td></td>
<td>0.5%</td>
<td id="gsgs"></td>
</tr>
<tr>
<td>生育</td>
<td></td>
<td></td>
<td>0.8%</td>
<td id="shengyu"></td>
</tr>
<tr>
<td>公積金</td>
<td>12%</td>
<td id="gjjgr"></td>
<td>12%</td>
<td id="gjjgs"></td>
</tr>
<tr>
<td>合計</td>
<td>個人合計</td>
<td id="grhj"></td>
<td>公司合計</td>
<td id="gshj"></td>
</tr>
<tr>
<td>總額</td>
<td id="total" colspan="4"></td>
</tr>
</table>
開發者：王佳蕊 中北大學軟體學院小學期實訓
</div>
</body>
</html>
個人存款在線計算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>個人存款在線計算器</title>
<!-- 新 Bootstrap 核心 CSS 檔案 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery檔案，務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
//定義一個函式完成存款的計算
function calc(){
//一開始處做表單驗證，檢驗輸入的是否是數字
//1.獲取存款金額（讀取文本框里用戶輸入的資料，即讀取id）
//把文本框（document.getElementById）通過ID先拿到,然后拿值（value）
var cunkuanjine = document.getElementById("amount").value;
//定義一個正則（規則）運算式，假設要求存款金額是六位數字
//[0-9]:表示只能是數字；{2,6}:表示2到6位數字
var regExp = /^[0-9]{2,6}$/;
if(!regExp.test(cunkuanjine)){
//說明用戶輸入不合法輸入不合法
document.getElementById("amount").value = "輸入不合法，必須是2-6位數字"
document.getElementById("amount").style = "color:red";
return;
}
//把帶雙引號的數字變為不帶雙引號的數字，用perseInt（）函式
var cunkuannum = parseInt(cunkuanjine);//字串轉成整數
//2.開始計算
//取得存款年限，即取得年利率
var lilv = document.getElementById("year").value;//利率
var lixi = cunkuannum * lilv;//利息
var total = cunkuannum + lixi;//本息合計
//3.把計算結果寫入相應文本框
document.getElementById("lixi").value = lixi;
document.getElementById("total").value = total;
}
function clearContent(){
//清空文本框
document.getElementById("amount").value = '';
document.getElementById("amount").style = "color:black";
return;
}
</script>
</head>
<body>
<div class="container text-center">
<h1>個人網銀-存款計算</h1>
<table class="table table-bordered text-center">
<tr class="bg-primary"><!--藍底白字-->
<td colspan="2">個人存款計算器</td>
</tr>
<tr>
<td>存款金額</td>
<td>
<input onfocus="clearContent()" class="form-control" placeholder="請輸入存款金額" type="text" id="amount"/>
</td>
</tr>
<tr>
<td>存款年限</td>
<td>
<select id="year" class="form-control">
<option value="0.0175">一年(1.75%)</option>
<option value="0.045">兩年(2.25%)</option>
<option value="0.0825">三年(2.75%)</option>
<option value="0.1100">四年(2.75%)</option>
<option value="0.1375">五年(2.75%)</option>
</select>
</td>
</tr>
<tr>
<td>所得利息</td>
<td>
<input id="lixi" type="text" class="form-control" readonly="readonly" />
</td>
</tr>
<tr>
<td>本息合計</td>
<td>
<input id="total" type="text" class="form-control" readonly="readonly" />
</td>
</tr>
<tr>
<td colspan="2">
<!--btn-block：占滿表格-->
<button onclick="calc()" class="btn bg-primary btn-block">計算</button>
</td>
</tr>
</table>
開發者：王佳蕊 中北大學軟體學院2020級
</div>
</body>
</html>
7.12–lesson1
HTML：表單
- 課堂筆記
- HTML介紹
- HTML是什么？What（推薦使用5W1H學習法） 叫做：超文本標記語言，最新版本：HTML5，簡稱H5 HTML代碼由誰執行？瀏覽器，主流的5大瀏覽器： Chrome、Firefox、Opera、Safari、Edge； 建議：從現在起停止使用360、qq等瀏覽器，
- 為什么用它？Why 要做Web專案，界面必須得用它，
- 誰來用？Who 后端開發人員一定要會、Web前端開發工程師、網頁美工（UI）
- 什么時候用？When 做專案需要時候就用，
- 用在哪里？Where 用在網頁上，搭建網頁結構或元素，
- 怎么用？How 按教程學，在專案中實戰使用，通過實際使用來學，
- HTML標準
HTML是由W3C制定的國際標準，W3C：國際萬維網組織， 最新版：HTML5
- 提醒
- 不要背代碼！！！ 通過多寫，來永久記憶，
- 學編程最佳方式：多寫！！！！一定要動手做！ （聽不會，看不會）
- 理解的基礎上記憶，理解的越多，死記越少！
- 每日提交（和公司一樣）
- 課堂知識點
<!DOCTYPE html><!--宣告為HTML5檔案--> <html><!--元素是 HTML 頁面的根元素--> <!--頭部元素--> <head> <!--utf-8是一種編碼方式，防止亂碼--> <meta charset="utf-8" /> <title></title> </head> <!--可見的頁面內容--> <body> </body> </html>HTML語言不區分大小寫
表單：
<form></form>文本框：
<input type="text">密碼框：
<input type="password">單選按鈕：
<input type="radio">? 注意：單選時name必須相同，不然起不到單選的作用，會出現bug
下拉選擇：
<select><option>這里寫文字</option></select>復選框：
<input type="checkbox">文本域：
<textarea rows="這里寫行數" cols="這里寫列數">檔案上傳：
<input type="file">提交按鈕：
<input type="submit" value="注冊">重置按鈕：
<input type="reset" value="清空重填">跳轉網頁：
<form action=""></form>換行：
<br>
7.13–lesson2
HTML：表格
- input標簽中加入checked，可被默認選中
- select的option中加入selected，可被默認選中
表格標記：<table>這里寫內容</table>
表格行：<tr>這里寫內容</tr>
表格列：<td>這里寫內容</td>
<!--在table里放tr，在tr里放td-->
合并單元格：<tr colspan="這里寫合并幾個單元格"></tr>
HTML：超鏈接
- 鏈接可以到自己的網頁，也可以是外部網站
<a href=""></a>
HTML：圖片
-
語法
<img width="" height="" src=""> -
圖片帶鏈接
<a href=""><img src=""></a>
HTML：串列
- 有序串列：
<ul></ul> - 無序串列：
<ol></ol> - 串列項：
<li></li>
HTML：標題
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<hr>分隔符
<p>這里是p段落</p>
<div>這里是一個div塊</div>
<nobr>這里使用nobr nobr不自動換行</nobr>
<span>這里使用span</span>
<span>span不會自動換行</span>
<label>標簽label不會換行</label>
<ul><!--無序串列-->
<li>中北大學</li>
<li>太原理工大學</li>
<li>太原科技大學</li>
</ul>
<ol><!--有序串列-->
<li>軟體工程專業</li>
<li>電子資訊工程</li>
<li>自動化專業</li>
</ol>
HTML：顏色
顏色表示兩種：用顏色名；顏色的值（主要用它），是十六進制 由三種色調配而成
HTML：字符物體
HTML是w3c的標準，但不是強制標準，每個瀏覽器對他的支持程度都不相同，語法比較寬松
面試題：HTML空格表示
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-KlO6jHQO-1626606387119)(D:\Desktop\QQ圖片20210713104947.png)]
HTML：iframe框架
-
iframe 用于在網頁內顯示網頁，
-
添加 iframe 的語法：
<iframe src="URL"></iframe>，URL 指向隔離頁面的位置，
面試常問：get post區別
-
傳參方式
get：通過地址欄傳輸，不安全
post：通過報文傳輸，安全
-
資料量大小
get：當發送資料時，GET 方法向 URL 添加資料；URL 的長度是受限制的（URL 的最大長度是 2048 個字符），
post：大小不限制
12306用戶注冊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12306用戶注冊</title>
<style>
span{color: orange;}
label{color: #FF0000;}
h1{color: #4781C9;}
a{color: #4781C9;}
div{height: 29px;coor: white;font-size:25px}
</style>
</head>
<body>
<h1>中國鐵路12306</h1><hr>
<form action="checkuser.html" method="get">
<table align="center" >
<tr bgcolor="#4781C9">
<td colspan="3"><div> 賬戶資訊</div></td>
</tr>
<tr>
<td align="right"><label>*</label>用戶名：</td>
<td>
<input type="text" name="uname" placeholder="用戶名設定成功后不可修改"/>
</td>
<td><span>6-30位字母、數字或“_”,字母開頭</span></td>
</tr>
<tr>
<td><label>*</label>登陸密碼：</td>
<td>
<input type="password" name="upsw" placeholder="6-20位數字、字母或符號"/>
</td>
<td></td>
</tr>
<tr>
<td><label>*</label>確認密碼：</td>
<td>
<input type="text" name="aupsw" placeholder="請再次輸入您的密碼"/>
</td>
<td></td>
</tr>
<tr>
<td><label>*</label>證件型別：</td>
<td>
<select>
<option>中國居民身份證</option>
<option>港澳居民來往內地通行證</option>
<option>臺灣居民來往大陸通行證</option>
<option>護照</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input checked type="radio" name="w">中國居民身份證
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="radio" name="w">外國人永久居留身份證
</td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input type="radio" name="w">港澳臺居民居住證
</td>
</tr>
<tr>
<td align="right"><label>*</label>姓名：</td>
<td>
<input type="text" name="name" placeholder="請輸入姓名"/>
</td>
<td><span>姓名填寫規則 （用于身份核驗，請正確填寫）</span></td>
</tr>
<tr>
<td><label>*</label>證件號碼：</td>
<td>
<input type="text" name="num" placeholder="請輸入您的證件號碼"/>
</td>
<td><span>（用于身份核驗，請正確填寫）</span></td>
</tr>
<tr>
<td align="right">郵箱：</td>
<td>
<input type="text" name="address" placeholder="請正確填寫郵箱地址"/>
</td>
<td></td>
</tr>
<tr>
<td><label>*</label>手機號碼：</td>
<td>
<input type="text" name="pnum" placeholder="請輸入您的手機號碼"/>
</td>
<td><span>請正確填寫手機號碼，稍后將向該手機號碼發送短信驗證碼</span></td>
</tr>
<tr>
<td><label>*</label>旅客型別：</td>
<td colspan="2">
<select>
<option>成人</option>
<option>兒童</option>
<option>學生</option>
<option>殘疾軍人、傷殘人民警察</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="checkbox"> 我已閱讀并同意
<a href="https://kyfw.12306.cn/otn/gonggao/privacyPolicy_web.html;jsessionid=FA7DFF5D07412AD11310E23B8D928D87">隱私權政策</a>
</td>
</tr>
<tr>
<td></td>
<td align="center" height="100px">
<input type="submit" value="下一步">
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
7.14–lesson3
CSS：簡介
- 層疊式樣式表，簡稱為樣式（(Cascading Style Sheets)）
- 作用：美化網頁（HTML不具備美化網頁的功能）
- CSS是由瀏覽器執行
- 由W3C組織制定的標準，最新版CSS
CSS：選擇器
- 標記選擇器
- id選擇器：
# - class選擇器：
.
CSS：代碼放的位置
- 頁內樣式：放在head之間，用style標記
- 行內樣式：放在標記的style屬性里，優先級最高
- 外部樣式：放在單獨的css檔案中，在網頁上用link標記引入
CSS：開發常用樣式
-
背景顏色：
background-color -
文本樣式：
下劃線：text-decoration:underline; 取消下劃線：text-decoration:none; 洗掉線：text-decoration:line-through; -
字體樣式：
font-family:"" -
網頁上的文字默認是16px；在工程上，網頁上的文字一般是12px或14px
-
超鏈接樣式
- 滑鼠移過時的樣式：
a:hover - 用戶已訪問過的鏈接：
a:visited - 鏈接被點擊的那一刻：
a:active - 正常，未訪問過的鏈接：
a:link
- 滑鼠移過時的樣式：
-
表格樣式：
細線表格border-collapse：collapse -
邊框樣式：
邊框變紅 border:1px solid red -
盒子樣式
- 與網頁布局密切相關
- 美工必須精通
- 開發工程師理解并會用
- 重要：外邊距margin、內邊距padding；邊距一共有四個方向
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的，
- Border(邊框) - 圍繞在內邊距和內容外的邊框，
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的，
- Content(內容) - 盒子的內容，顯示文本和影像，
-
登錄網頁
- 用到了盒子模型（內部外部邊距等）
- HTML表單元素（用戶名，密碼，登錄按鈕）
7.15–lesson4
CSS：顯示
- display:none：隱藏元素，不占用空間
- visibility:hidden：隱藏元素，占用空間
CSS：浮動
-
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列，
Float（浮動），往往是用于影像，但它在布局時一樣非常有用，
-
CSS+DIV做網頁布局離不開浮動
-
主要用于網頁布局
bootstrap
-
簡介：Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，來自 Twitter，是目前最受歡迎的前端框架，Bootstrap 是一個用于快速開發 Web 應用程式和網站的前端框架，在學習bootstrap之前必須具備 HTML 、 CSS 和 JavaScript 的基礎知識，
-
回應式設計：Bootstrap 的回應式 CSS 能夠自適應于臺式機、平板電腦和手機，
-
使用
- 從官網下載檔案，復制到專案里
- 直接使用CDN（內容分發網路，放在公網上的檔案），電腦必須連網，否則效果會丟失
- 使用后CSS樣式不用自己寫，直接用即可
-
原理：網格系統，把螢屏分成十二列，進行自由組合
Bootstrap 包含了一個回應式的、移動設備優先的、不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列，它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語意布局的功能強大的混合類，
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wdh8ofam-1626606387124)(D:\Desktop\QQ圖片20210716105548.png)]
7.16–lesson5
bootstrap表格
-
在使用bootstrap之前，現在
<head>標簽里附上下面一段代碼，之后既可直接使用bootstrap<!-- 新 Bootstrap 核心 CSS 檔案 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery檔案，務必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 檔案 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
斑馬線形式的條紋：
table-striped為所有表格的單元格添加邊框：
table-bordered居中：
text-center
7.17–lesson6
學習心得
這節課最后留了一個問題，利息還需要考慮年份，那應該怎樣操作呢
我首先想到用if陳述句，有種思路簡單但操作麻煩的方法：if value = 對應的值，這種方法顯然很麻煩，如果選項過多的話，代碼就會變得很長；然后我就想給對應的下拉的選項各賦一個id=1/ 2······，在函式里添加一段獲取id并且將id轉為數字的代碼，但經過測驗這個方法不可行
然后沒有然后了，想不到更好的辦法
上網程序
-
B/S結構：Browser/Server，瀏覽器/服務器結構，如：教務系統
-
C/S結構：Client/Server，客戶機/服務器結構，如：QQ
-
單機軟體：如Word，在自己電腦上安裝，只能自己用
-
上網程序，以12306為例
- 輸入網址，敲下回車：瀏覽器向12306的服務器發送請求
- 回應：服務器收到瀏覽器請求后，服務器會把保存在服務器上的網頁原始碼發回給瀏覽器
- 瀏覽器在收到原始碼后，對原始碼執行，產生最終的顯示效果
JavaScript學習重點
- 簡介
- JS是弱型別語言（沒有型別）
- JS變數定義可以用var也可不用
- JS語言大小寫敏感（嚴格區分大小寫）
- 重點學習
- 語法：if、for、運算子······
- 函式：不能嵌套，函式沒有回傳型別，因為js是弱型別語言
- 事件
- 正則運算式與表單驗證
- DOM
JavaScript函式
function+自定義名稱(){}
- JS彈窗：
alert- 在控制臺輸出：
console.log- 字串轉成數字的函式：
parseInt()- 當滑鼠點擊時開始執行：
onclick=""- 取得資料：
document.getElementById("").value
7.19–lesson7
JavaScript正則運算式
-
正則運算式（英語：Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個字串來描述、匹配一系列符合某個句法規則的字串搜索模式，
-
正則運算式的使用，可以通過簡單的辦法來實作強大的功能，下面先給出一個簡單的示例：
- ^ 為匹配輸入字串的開始位置，
- [0-9]+匹配多個數字， [0-9] 匹配單個數字，+ 匹配一個或者多個，
- abc 匹 配 字 母 a b c 并 以 a b c 結 尾 ， 匹配字母 abc 并以 abc 結尾， 匹配字母abc并以abc結尾， 為匹配輸入字串的結束位置，
-
語法：
/正則運算式主體/修飾符(可選)eg：
/runoob/i 是一個正則運算式，
runoob 是一個正則運算式主體 (用于檢索)，
i 是一個修飾符 (搜索不區分大小寫)，
-
在 JavaScript 中，正則運算式通常用于兩個字串方法 : search() 和 replace()，
search() 方法 用于檢索字串中指定的子字串，或檢索與正則運算式相匹配的子字串，并回傳子串的起始位置，
replace() 方法 用于在字串中用一些字符替換另一些字符，或替換一個與正則運算式匹配的子串，
? replace（）方法可用于序列化字串逃逸
-
修飾符 可以在全域搜索中不區分大小寫:
修飾符 描述 i 執行對大小寫不敏感的匹配， g 執行全域匹配（查找所有匹配而非在找到第一個匹配后停止）， m 執行多行匹配， -
方括號用于查找某個范圍內的字符：
運算式 描述 [abc] 查找方括號之間的任何字符， [0-9] 查找任何從 0 至 9 的數字， (x|y) 查找任何以 | 分隔的選項， -
test() 方法是一個正則運算式方法，
test() 方法用于檢測一個字串是否匹配某個模式，如果字串中含有匹配的文本，則回傳 true，否則回傳 false，
JavaScript事件
-
onfocus事件
onfocus 事件在物件獲得焦點時發生，
Onfocus 通常用于
<input>,<select>, 和<a>.提示： onfocus 事件的相反事件為onblur事件，
-
下面是一些常見的HTML事件的串列:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改變 |
| onclick | 用戶點擊 HTML 元素 |
| onmouseover | 用戶在一個HTML元素上移動滑鼠 |
| onmouseout | 用戶從一個HTML元素上移開滑鼠 |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已完成頁面的加載 |
JavaScript表單驗證
在公司開發中要使用正則運算式，JS函式，DOM
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289313.html
標籤：其他
上一篇：JavaScript網頁特效
下一篇：JavaScript面向物件思想