成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

<del id="oc0eu"></del>

<cite id="oc0eu"></cite>

<strike id="oc0eu"></strike>

<strike id="oc0eu"></strike>

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

立即前往

首頁(yè)/文章專欄/html+css+javascript學(xué)習(xí)記錄1

html+css+javascript學(xué)習(xí)記錄1

xbynet 發(fā)布于2019-08-23 10:41 / 2313人閱讀

摘要：最近在學(xué)一部分前端，知識(shí)點(diǎn)很多，卻沒(méi)怎么系統(tǒng)地應(yīng)用過(guò)，因而理解可能不夠深吧。

最近在學(xué)一部分前端，知識(shí)點(diǎn)很多，卻沒(méi)怎么系統(tǒng)地應(yīng)用過(guò)，因而理解可能不夠深吧。所以我想做點(diǎn)片段似的東西，不懂的再在網(wǎng)上搜一搜，這樣可能會(huì)更有意思點(diǎn)，所以做了這個(gè)記錄，希望自己堅(jiān)持下去！

Mytodolist

html code:





MyTodolist





        My todolist


    
        未完成
        
    
    
        已完成

css code:

@CHARSET "UTF-8";
/*
    two colors to use:
    rgba(100,147,235,1.0)
    rgba(222,184,134,1.0)
*/
html,body,div,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /*font-size: 100%; /*字體默認(rèn)大小*/
    font-size:18px;
    vertical-align: transparent;
    background: transparent;
    font-family:Arial;
}
body{line-height: 1;}
ol,ul{list-style: none;}
blockquote,q{quotes: none;}
blockquote:before,blockquote:after,q:before,q:after{content: "";content: none;}
a{text-decoration: none;}
#title{
    background-color:rgba(100,147,235,1.0);
    text-align:center;
    height:50px;
}
#content{
    background-color:rgba(220,220,220,1.0);
    min-height:700px;
}
span{
    display:inline-block;
    width:150px;
    height:50px;
    line-height:50px;
    text-align:left;    
}
.blank{
    width:350px;
    height:20px;
    color:gray;
    border:0px;
}
.do{
    width:500px;
    min-height:100px;
    position:relative;
    left:425px;
}
p{
    height:50px;
    line-height:50px;
    font-family:微軟雅黑;
    font-weight:bold;
}
li{
    background-color:rgba(222,184,134,1.0);
    height:25px;
    line-height:25px;
    margin-left:25px;
    margin-bottom:10px;
    border-radius:5px;/*設(shè)置成圓角 */
    border-bottom:1px solid black;
}
label{
    font-family:微軟雅黑;
    font-size:14px;
}
.clear{
    width:50px;
    height:30px;
    font-family:微軟雅黑;
    font-size:14px;
    font-weight:bold;
    border-radius:5px;
    border-bottom:1px solid black;
    background-color:lightblue;
}
.btnarea{
    text-align:right;
}
b{
    font-size:8px;
    display:inline-block;
    float:right;
    color:blue;
}
.circle{
    width:20px;
    height:20px;
    border-radius:20px;
    border:1px solid lightgray;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    position:relative;
    left:425px;
    background-color:rgb(232,232,241);
    font-family:Arial;
}

js code:

function clearText() {
    var nodes = document.getElementsByName("thing");
    var inputNode = nodes[0];
    inputNode.value = "";
}
function addThing() {
    var nodes = document.getElementsByName("thing");
    var inputNode = nodes[0];
    var text = inputNode.value
    if (text != "") {
        var undoUl = document.getElementsByName("undo")[0];
        undoUl.innerHTML += ""
                + text
                + "done";
        var circleNode = document.getElementsByName("usum")[0];
        circleNode.value = parseInt(circleNode.value) + 1;
    }
    inputNode.value = "add a thing here";
}
function clearAll() {
    var nodes = document.getElementsByName("item");
    var len = nodes.length;
    var circleNode1 = document.getElementsByName("usum")[0];
    var circleNode2 = document.getElementsByName("dsum")[0];
    for (var i = 0; i < len; i++) {
        if (nodes[i].checked) {
            var liNode = nodes[i].parentNode;
            var ulNode = liNode.parentNode;
            ulNode.removeChild(liNode);
            i--;
            len--;
            var name = ulNode.attributes[0].value;
            if (name == "undo")
                circleNode1.value--;
            else
                circleNode2.value--;
        }
    }
}
function selectAll() {
    var nodes = window.document.getElementsByName("item");
    for (var i = 0; i < nodes.length; i++) {
        nodes[i].checked = true;
    }
}
function oppositeAll() {
    var nodes = document.getElementsByName("item");
    for (var i = 0; i < nodes.length; i++) {
        var before = nodes[i].checked;
        nodes[i].checked = !before;
    }
}
function todone(param) {
    var liNode = param.parentNode.parentNode;
    param.parentNode.innerHTML = "undo";
    var ulNode = document.getElementsByName("done")[0];
    ulNode.appendChild(liNode);
    var circleNode = document.getElementsByName("usum")[0];
    var sum = parseInt(circleNode.value)
    if (sum > 0) {
        circleNode.value = sum - 1;
    }
    circleNode = document.getElementsByName("dsum")[0];
    circleNode.value = parseInt(circleNode.value) + 1;
}
function toundo(param) {
    var liNode = param.parentNode.parentNode;
    param.parentNode.innerHTML = "done";
    var ulNode = document.getElementsByName("undo")[0];
    ulNode.appendChild(liNode);
    var circleNode = document.getElementsByName("dsum")[0];
    var sum = parseInt(circleNode.value)
    if (sum > 0) {
        circleNode.value = sum - 1;
    }
    circleNode = document.getElementsByName("usum")[0];
    circleNode.value = parseInt(circleNode.value) + 1;
}

仿導(dǎo)航條效果
(1) 鼠標(biāo)懸停時(shí)切換展示內(nèi)容
(2) 自動(dòng)輪播展示內(nèi)容
(3) 清除自動(dòng)展示

html code:





導(dǎo)航條效果


    
        
            
        
        
            
                為你推薦
                電子
                輕音樂(lè)
                經(jīng)典
                熱門游戲
                情歌
            
        
        
            
                
                    
                    
                        每日新歌:鄭容和寫給你的情書
                    
                    
                        播放量: 14.1萬(wàn)
                    
                
                
                    
                    
                        [知味滄桑]  歷經(jīng)歲月才能體會(huì)
                    
                    
                        播放量: 9.0萬(wàn)
                    
                
            
            
                
                    
                    
                        催眠系Chillout  星空遐想氛圍
                    
                    
                        播放量: 2.2萬(wàn)
                    
                
                
                    
                    
                        歷史老師推薦盛世民俗必聽(tīng)古風(fēng)
                    
                    
                        播放量: 16.9萬(wàn)
                    
                
            
            
                
                    
                    
                        令人心跳加速的的甜蜜日漫片尾曲
                    
                    
                        播放量: 69.0萬(wàn)
                    
                
                
                    
                    
                        歷史老師推薦盛世民俗必聽(tīng)古風(fēng)
                    
                    
                        播放量: 16.9萬(wàn)
                    
                
            
            
                
                    
                    
                        令人心跳加速的的甜蜜日漫片尾曲
                    
                    
                        播放量: 69.0萬(wàn)
                    
                
                
                    
                    
                        歷史老師推薦盛世民俗必聽(tīng)古風(fēng)
                    
                    
                        播放量: 16.9萬(wàn)
                    
                
            
            
                
                    
                    
                        令人心跳加速的的甜蜜日漫片尾曲
                    
                    
                        播放量: 69.0萬(wàn)
                    
                
                
                    
                    
                        歷史老師推薦盛世民俗必聽(tīng)古風(fēng)
                    
                    
                        播放量: 16.9萬(wàn)
                    
                
            
            
                
                    
                    
                        令人心跳加速的的甜蜜日漫片尾曲
                    
                    
                        播放量: 69.0萬(wàn)
                    
                
                
                    
                    
                        歷史老師推薦盛世民俗必聽(tīng)古風(fēng)
                    
                    
                        播放量: 16.9萬(wàn)