综合影院入口日韩欧美,综合天堂av久久久久久久

首頁免費課用JS實現(xiàn)購物車特效筆記

用JS實現(xiàn)購物車特效

                
                阿安
            JS工程師

                    查看講師更多課程 
                    阿安講師的其他課程
                
人人網(wǎng)評論功能
初級·27694
免費課程
                                
焦點圖輪播特效
初級·65327
免費課程
                                
                難度初級
            
                時長 1小時39分
            
                學(xué)習(xí)人數(shù)
            
綜合評分9.80
                            83人評價
                        查看評價
                                10.0
                                內(nèi)容實用
                            
                                9.7
                                簡潔易懂
                            
                                9.7
                                邏輯清晰

最熱最新

qiug 03:04

.rows
表格元素特有的屬性，存放節(jié)點所有tr元素

查看全部

0 采集收起來源：解決IE兼容性問題
2020-04-13
weixin_慕瓜6242559

<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title></title>
?<style type="text/css">
??table {
???border-collapse: collapse;
??}
??td {
???border: 1px solid #333333;
??}
?</style>
?<script type="text/javascript">
??window.onload = function () {
???// 獲取元素
???var table = document.getElementById('table');
???var tr = table.getElementsByTagName('tr');
???var del = document.getElementById('del');
???//事件函數(shù)
???del.onclick = function(){
????for(var i = 0; i<tr.length; i++){
?????var seItem = tr[i].getElementsByTagName('input')[0];
?????if (seItem.checked){
??????tr[i].parentNode.removeChild(tr[i]);
??????i--;
?????}
????}
???}
??}
?</script>
</head>
<body>
?<table id="table">
??<tr>
???<td><input type="checkbox"/></td>
???<td>1</td>
??</tr>
??<tr>
???<td><input type="checkbox"/></td>
???<td>2</td>
??</tr>
??<tr>
???<td><input type="checkbox"/></td>
???<td>3</td>
??</tr>
??<tr>
???<td><input type="checkbox"/></td>
???<td>4</td>
??</tr>
?</table>
?<button id='del'>刪除</button>
</script>
</body>
</html>

查看全部

0 采集收起來源：編程練習(xí)
2019-09-28
weixin_慕瓜6242559

<!DOCTYPE html>
<html>
<head>
??????????????? <meta charset="UTF-8">
??????????????? <title></title>
??????????????? <style type="text/css">
??????????????????????????????? input { width: 60px; }
??????????????????????????????? div { margin: 10px 0 }
??????????????? </style>
</head>
<body>
??????????????? <input id="num1" type="text"/>
??????????????? <input id="num2" type="text"/>
??????????????? <div>結(jié)果：<span id="ret"></span></div>
??????????????? <button>+</button>
??????????????? <button>-</button>
??????????????? <button>*</button>
??????????????? <button>/</button>
??????????????? <script type="text/javascript">
??????????????????????????????? window.onload = function () {
??????????????????????????????????????????????? // 獲取元素
?????????????????????????????????????????????? var num1 = document.getElementById('num1');
??????????????????????????????????????????????? var num2 = document.getElementById('num2');
??????????????????????????????????????????????? var ret = document.getElementById('ret');
??????????????????????????????????????????????? var btns = document.getElementsByTagName('button');
??????????????????????????????????????????????? var p = parseInt;
??????????????????????????????????????????????? //為按鈕添加點擊事件，計算結(jié)果
??????????????????????????????????????????????? for (var i=0; i<btns.length; i++){
??????????????????????????????????????????????????????????????? btns[i].onclick = function(){
??????????????????????????????????????????????????????????????????????????????? switch(this.innerText){
??????????????????????????????????????????????????????????????????????????????????????????????? case? "+" :
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? ret.innerHTML =?? p(num1.value) + p(num2.value);
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? break;
??????????????????????????????????????????????????????????????????????????????????????????????? case? "-"? :
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? ret.innerHTML =?? p(num1.value) - p(num2.value);
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? break;
?????????????????????????????????????????????????????????????????????????????????????????????? case?? "*" :?
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? ret.innerHTML =?? p(num1.value) * p(num2.value);
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? break;
??????????????????????????????????????????????????????????????????????????????????????????????? case? "/"? :
?????????????????????????????????????????????????????????????????????????????????????????????????????????????? var? result =? p(num1.value) / p(num2.value);
?????????????????????????????????????????????????????????????????????????????????????????????????????????????? ret.innerHTML = result.toFixed(3);
?????????????????????????????????????????????????????????????????????????????????????????????????????????????? break;
??????????????????????????????????????????????????????????????????????????????? }
?????????????????????????????????????????????????????????????? }
?????????????????????????????????????????????? }
???????????????????????????????? }
??????????????? </script>
</body>
</html>

查看全部

1 采集收起來源：編程練習(xí)
2019-09-28
weixin_慕瓜6242559

<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title></title>
?<style type="text/css">
??*{
???margin: 0;
???padding: 0;
???list-style: none;
??}
??body {
???padding: 20px;
??}
??li {
???float: left;
???margin: 20px;
??}
??#total {
???clear: both;
??}
?</style>
?<script type="text/javascript">
??window.onload = function () {
???// 獲取元素
???var all = document.getElementById('all');
???var list = document.getElementById('list');
???var inputs = list.getElementsByTagName('input');
???var total = document.getElementById('total');
???// 計算已選項的總數(shù)
???function selSum() {
????var ret = 0;
????var len = inputs.length;
????for (var i = 0; i<len; i++){
?????if (inputs[i].checked) {
??????ret++;
??????
?????}
????}
????total.innerHTML = '已選：' + ret + ' 項';
???}
???// 全選事件
???all.onchange = function () {
????var len = inputs.length;
????for (var j = 0; j < len; j++){
?????inputs[j].checked = all.checked;
????}
????selSum();
???}
???// 每個選項的事件
???for (var k = 0, len = inputs.length; k< len; k++) {
????inputs[k].onchange = function () {
?????selSum();
?????if (inputs[k].checked == false) {
??????all.checked = false;
?????}
????}
???}
??}
?</script>
</head>
<body>
<div><label><input id="all" type="checkbox"/>全選</label></div>
<ul id="list">
?<li><label><input type="checkbox"/>選項1</label></li>
?<li><label><input type="checkbox"/>選項2</label></li>
?<li><label><input type="checkbox"/>選項3</label></li>
?<li><label><input type="checkbox"/>選項4</label></li>
?<li><label><input type="checkbox"/>選項5</label></li>
?<li><label><input type="checkbox"/>選項6</label></li>
</ul>
<div id="total">已選：0 項</div>
</body>
</html>

查看全部

0 采集收起來源：編程練習(xí)
2019-09-27
weixin_慕瓜6242559

<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title></title>
?<script type="text/javascript">
??window.onload = function () {
???// h獲取元素
???var list = document.getElementById('list');
???var inputs = list.getElementsByTagName('input');
???var ok = document.getElementById('ok');
???var ret = document.getElementById('ret');
???// 添加按鈕點擊事件
???ok.onclick = function () {
????var i = 0, len = inputs.length, checked = 0;
????// 遍歷所有的勾選框，計算出已選總數(shù),存放在變量checked
????while(i < len) {
???? ?if (inputs[i].checked){
???? ??checked += 1;
???? ?}
?????i++;
????}
????//根據(jù)checked值更新結(jié)果
????if (checked >0){
?????ret.style.display = "block";
?????ret.innerHTML = "已選："+checked;
????}
????else{
?????ret.style.display = "none";
?????ret.innerHTML = "";
????}
???}
??}
?</script>
</head>
<body>
?<ul id="list">
??<li><label><input type="checkbox"/>1</label></li>
??<li><label><input type="checkbox"/>2</label></li>
??<li><label><input type="checkbox"/>3</label></li>
??<li><label><input type="checkbox"/>4</label></li>
??<li><label><input type="checkbox"/>5</label></li>
?</ul>
?<button id="ok">確定</button>
?<p id="ret" ></p>
</body>
</html>

查看全部

0 采集收起來源：編程練習(xí)
2019-09-26
weixin_慕瓜6242559

<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? #btn {
? ? ? ? ? ? display: none;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.onload = function () {
? ? ? ? ? ? // 獲取元素
? ? ? ? ? ? var inp = document.getElementById('inp');
? ? ? ? ? ? var btn = document.getElementById('btn');
? ? ? ? ? ??
? ? ? ? ? ? inp.onchange = function () {
? ? ? ? ? ? ? ? var checked = this.checked;
? ? ? ? ? ? ? ? // 根據(jù)checked 值來顯示隱藏按鈕
? ? ? ? ? ? ? ? if(checked){
? ? ? ? ? ? ? ? ? ? btn.style.display = 'block';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</head>
<body>
<div>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
</div>
<label><input id="inp" type="checkbox"/> 同意條款</label>
<p><button id="btn">下一步</button></p>
</body>
</html>

查看全部

0 采集收起來源：編程練習(xí)
2019-09-26
weixin_慕瓜6242559

<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title>表格</title>
?<style type="text/css">
??????? table {
??????????? border-collapse: collapse;
??????????? background-color: #CCC;
??????? }
??????? td {
??????????? border: 1px solid black;
??????????? width: 100px;
??????????? text-align: center;;
??????? }
??? </style>
</head>
<body>

?<table>
??<tr>
???<td>html</td>
???<td>css</td>
???<td>JS</td>
??</tr>
??<tr>
???<td colspan="2">JQ</td>
???
???<td>php</td>
??</tr>
??<tr>
???<td>Android</td>
???<td>Swift</td>
???<td>ios</td>
??</tr>
?</table>
</body>
</html>

查看全部

0 采集收起來源：編程練習(xí)
2019-09-26
小殤學(xué)生

<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? #btn {
? ? ? ? ? ? display: none;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.onload = function () {

? ? ? ? ? ? // 獲取元素
? ? ? ? ? ? var inp = document.getElementById('inp');
? ? ? ? ? ? var btn = document.getElementById('btn');

? ? ? ? ? ? inp.onchange = function () {
? ? ? ? ? ? ? ? var checked = this.checked;
? ? ? ? ? ?if(checked){
? ? ? ? ? ? ? ? ?btn.style.display="block";
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ?btn.style.display="none";
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</head>
<body>
<div>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
</div>
<label><input id="inp" type="checkbox"/> 同意條款</label>
<p><button id="btn">下一步</button></p>
</body>
</html>

查看全部

0 采集收起來源：編程練習(xí)
2019-07-12
小殤學(xué)生

rows:表格元素特有的屬性，存放節(jié)點所有tr元素

查看全部

0 采集收起來源：解決IE兼容性問題
2019-07-11
慕仰0196443 06:30

.rows 表格里面所有tr

查看全部

0 采集收起來源：解決IE兼容性問題
2019-06-19
空洞的靈魂
//計算已選項的總數(shù)
1. 說明一個變量ret，初始值為0；
2. 遍歷所有列表項，如果此項已選，ret加1；
3. 把ret的最終值寫入顯示結(jié)果的元素的html里；（id名.inner HTML的意思是把class=id名里的代碼內(nèi)容更換。ps：innertext的意思是把內(nèi)容里的文本內(nèi)容更換。）
function showToatal(){
var ret=0,i=0;len=inputs.length;
while(i<len){
if(inputs[i].checked){
ret++;}
i++;}
total.innerHTML='已選：'+ret+'項'
}
//全選事件
all.onchange=function(){ //all.onchange說明全選框已被點擊激活
var i=0;len=inputs.length;
while(i<len){
inputs[i].checked=all.checked; //通過遍歷把全選的激活狀態(tài)賦值給每一個選項
i++;}
showToatal();//調(diào)用showToatal函數(shù)進行innerHTML代碼更新。
}
//每個選項的事件
1.遍歷所有項，為每一項添加onchange觸發(fā)事件，調(diào)用showToatal計算已選項個數(shù)。
for(var i=0,len=inputs.length;i<len;i++){
inputs[i].onchange=function(){
showToatal();
if(!this.checked){
all.checked=false;
}
};
}
小結(jié)：第一步需要考慮的是通過遍歷判斷該項是否被觸發(fā)，并計算已選項；因為后面每一步都要用到這個函數(shù)
第二步：判斷大范圍的全選事件，也是在全選框被激活后通過遍歷，把全選框的checked值賦給每一項，并調(diào)用函數(shù)showToatal進行計算已選項。
第三步：考慮小范圍的單選事件，通過遍歷inputs[i].onchange觸發(fā)，調(diào)用showToatal函數(shù)計算已選項，在判斷是否全選！this.checked的意思是這個選項未選，this.checked的意思是這個選項已選。通過這個判斷就可以使全選的值變?yōu)閒alse。
查看全部

0 采集收起來源：編程練習(xí)
2019-06-13

首頁上一頁1 2 3 4 5 6 7 下一頁尾頁

舉報

0/150

提交

取消

開始學(xué)習(xí)

課程須知: 您需要掌握HTML語法，CSS布局基礎(chǔ)，基本的JavaScript語法知識。

老師告訴你能學(xué)到什么？: 1. 實現(xiàn)兼容低版本IE的getElementsByClassName()方法 2. JS表格操作 3. 通過parseInt()，parseFloat()把字符串轉(zhuǎn)換成數(shù)字 4. 通過toFixed()把數(shù)字格式化成指定位數(shù)的小數(shù) 5. 事件代理的運用

微信掃碼，參與3人拼團

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

用JS實現(xiàn)購物車特效