html+css+javascript学习记录1

摘要：最近在学一部分前端，知识点很多，却没怎么系统地应用过，因而理解可能不够深吧。

最近在学一部分前端，知识点很多，却没怎么系统地应用过，因而理解可能不够深吧。所以我想做点片段似的东西，不懂的再在网上搜一搜，这样可能会更有意思点，所以做了这个记录，希望自己坚持下去！

Mytodolist

html code:

        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%; /*字体默认大小*/
    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;/*设置成圆角 */
    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;
}

仿导航条效果
(1) 鼠标悬停时切换展示内容
(2) 自动轮播展示内容
(3) 清除自动展示

html code:

    

        

            
        
        

            

                
为你推荐
                
电子
                
轻音乐
                
经典
                
热门游戏
                
情歌
            
        
        

            

                

                    
                    

                        每日新歌:郑容和写给你的情书
                    
                    

                        播放量: 14.1万
                    
                
                

                    
                    

                        [知味沧桑]  历经岁月才能体会
                    
                    

                        播放量: 9.0万
                    
                
            
            

                

                    
                    

                        催眠系Chillout  星空遐想氛围
                    
                    

                        播放量: 2.2万
                    
                
                

                    
                    

                        历史老师推荐盛世民俗必听古风
                    
                    

                        播放量: 16.9万
                    
                
            
            

                

                    
                    

                        令人心跳加速的的甜蜜日漫片尾曲
                    
                    

                        播放量: 69.0万
                    
                
                

                    
                    

                        历史老师推荐盛世民俗必听古风
                    
                    

                        播放量: 16.9万
                    
                
            
            

                

                    
                    

                        令人心跳加速的的甜蜜日漫片尾曲
                    
                    

                        播放量: 69.0万
                    
                
                

                    
                    

                        历史老师推荐盛世民俗必听古风
                    
                    

                        播放量: 16.9万
                    
                
            
            

                

                    
                    

                        令人心跳加速的的甜蜜日漫片尾曲
                    
                    

                        播放量: 69.0万
                    
                
                

                    
                    

                        历史老师推荐盛世民俗必听古风
                    
                    

                        播放量: 16.9万
                    
                
            
            

                

                    
                    

                        令人心跳加速的的甜蜜日漫片尾曲
                    
                    

                        播放量: 69.0万
                    
                
                

                    
                    

                        历史老师推荐盛世民俗必听古风
                    
                    

                        播放量: 16.9万
                    
                
            
        
    

css code:

js code: