html+css+javascript学习记录1

lauren_liuling 发布于2019-08-29 16:15 / 2187人阅读

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

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

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%; /*字体默认大小*/
    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:

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113628.html

前端开发学习-网址记录

摘要：不是一下子能看完综合使用编程是一番怎样的体验学习笔记网站前端开发基础算法题如何优雅地使用如何优雅地使用零度博客码农网伯乐在线什么是页面渲染国外先更到这，还有太多网址，先归类一下再补充。最近在复习JavaScript知识时遇到以前就不懂的闭包、上下文，虽然比以前理解深了一点，但还是懵，想缓一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

CatalpaFlat 2019-08-29 11:31 评论0 收藏0
前端开发学习-网址记录

摘要：不是一下子能看完综合使用编程是一番怎样的体验学习笔记网站前端开发基础算法题如何优雅地使用如何优雅地使用零度博客码农网伯乐在线什么是页面渲染国外先更到这，还有太多网址，先归类一下再补充。最近在复习JavaScript知识时遇到以前就不懂的闭包、上下文，虽然比以前理解深了一点，但还是懵，想缓一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

anonymoussf 2019-08-20 12:06 评论0 收藏0
前端开发学习-网址记录

摘要：不是一下子能看完综合使用编程是一番怎样的体验学习笔记网站前端开发基础算法题如何优雅地使用如何优雅地使用零度博客码农网伯乐在线什么是页面渲染国外先更到这，还有太多网址，先归类一下再补充。最近在复习JavaScript知识时遇到以前就不懂的闭包、上下文，虽然比以前理解深了一点，但还是懵，想缓一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

zhigoo 2019-08-01 15:54 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

LiangJ 2019-08-30 12:58 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

codercao 2019-08-19 18:10 评论0 收藏0