html+css+javascript学习记录1

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

Mytodolist

html code:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>MyTodolist</title>

<link href="./css/todolist.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/todolist.js"></script>

</head>

<body>

<div id="title">

        <span>My todolist</span><input name="thing" class="blank" type="text" value="add a thing here" onclick="clearText()" onblur="addThing()"/>

</div>

<div id="content">

    <div class="do">

        <p>未完成<input name="usum" class="circle" type="text" value="0"/></p>

        <ul name="undo"></ul>

    </div>

    <div class="do">

        <p>已完成<input name="dsum" class="circle" type="text" value="0"/></p>

        <ul name="done"></ul>

    </div>

    <div class="do btnarea">

        <input class="clear" type="button" value="全选" onclick="selectAll()"/>

        <input class="clear" type="button" value="反选" onclick="oppositeAll()"/>

        <input class="clear" type="button" value="清除" onclick="clearAll()"/>

    </div>

</div>

</body>

</html>

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 += "<li><input name='item' type='checkbox'/><label>"

                + text

                + "</label><b>done<input type='radio' onclick='todone(this)'/></b></li>";

        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<input type='radio' onclick='toundo(this)'/>";

    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<input type='radio' onclick='todone(this)'/>";

    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:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>导航条效果</title>

</head>

<body>

    <div id="nav">

        <div id="stop">

            <input type="button" value="停止轮播" onclick="notAuto()" />

        </div>

        <div id="title">

            <ul>

                <li class="over" onmouseover="moveTo('c1')"><label>为你推荐</label></li>

                <li onmouseover="moveTo('c2')"><label>电子</label></li>

                <li onmouseover="moveTo('c3')"><label>轻音乐</label></li>

                <li onmouseover="moveTo('c4')"><label>经典</label></li>

                <li onmouseover="moveTo('c5')"><label>热门游戏</label></li>

                <li onmouseover="moveTo('c6')"><label class="noborder">情歌</label></li>

            </ul>

        </div>

        <div id="content">

            <div id="c1">

                <div class="inner">

                    <img src="img/1.png" />

                    <p>

                        <a href="">每日新歌:郑容和写给你的情书</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 14.1万</a>

                    </p>

                </div>

                <div class="inner">

                    <img src="img/2.png" />

                    <p>

                        <a href="">[知味沧桑]&nbsp;&nbsp;历经岁月才能体会</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 9.0万</a>

                    </p>

                </div>

            </div>

            <div id="c2" style="display: none">

                <div class="inner">

                    <img src="img/3.png" />

                    <p>

                        <a href="">催眠系Chillout&nbsp;&nbsp;星空遐想氛围</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 2.2万</a>

                    </p>

                </div>

                <div class="inner">

                    <img src="img/4.png" />

                    <p>

                        <a href="">历史老师推荐盛世民俗必听古风</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 16.9万</a>

                    </p>

                </div>

            </div>

            <div id="c3" style="display: none">

                <div class="inner">

                    <img src="img/5.png" />

                    <p>

                        <a href="">令人心跳加速的的甜蜜日漫片尾曲</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 69.0万</a>

                    </p>

                </div>

                <div class="inner">

                    <img src="img/6.png" />

                    <p>

                        <a href="">历史老师推荐盛世民俗必听古风</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 16.9万</a>

                    </p>

                </div>

            </div>

            <div id="c4" style="display: none">

                <div class="inner">

                    <img src="img/7.png" />

                    <p>

                        <a href="">令人心跳加速的的甜蜜日漫片尾曲</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 69.0万</a>

                    </p>

                </div>

                <div class="inner">

                    <img src="img/8.png" />

                    <p>

                        <a href="">历史老师推荐盛世民俗必听古风</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 16.9万</a>

                    </p>

                </div>

            </div>

            <div id="c5" style="display: none">

                <div class="inner">

                    <img src="img/9.png" />

                    <p>

                        <a href="">令人心跳加速的的甜蜜日漫片尾曲</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 69.0万</a>

                    </p>

                </div>

                <div class="inner">

                    <img src="img/10.png" />

                    <p>

                        <a href="">历史老师推荐盛世民俗必听古风</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 16.9万</a>

                    </p>

                </div>

            </div>

            <div id="c6" style="display: none">

                <div class="inner">

                    <img src="img/11.png" />

                    <p>

                        <a href="">令人心跳加速的的甜蜜日漫片尾曲</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 69.0万</a>

                    </p>

                </div>

                <div class="inner">

                    <img src="img/12.png" />

                    <p>

                        <a href="">历史老师推荐盛世民俗必听古风</a>

                    </p>

                    <p>

                        <a href="" class="below">播放量: 16.9万</a>

                    </p>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

css code:

<style type="text/css">

* {

    margin: 0;

    padding: 0;

    list-style-type: none;

    font: 14px Arial, Helvetica, sans-serif, "新宋体", "微软雅黑";

}

#title {

    width: 720px;

    height: 50px;

    margin: 0px auto 0 auto;

}

#title li {

    float: left;

    width: 120px;

    height: 50px;

    background: lightgreen;

}

#title li label {

    display: block;

    margin: 15px auto;

    text-align: center;

    border-right: 1px solid gray;

}

#title li label.noborder {

    border: none;

}

#content {

    width: 720px;

    height: 370px;

    margin: 15px auto;

    background: lightyellow;

    border: 1px dashed black;

    border-radius: 20px;

}

#content div {

    width: 100%;

    height: 100%;

}

#title li.over {

    background: green;

    color: white;

}

#stop {

    width: 720px;

    height: 80px;

    margin: 50px auto 0 auto;

    position: relative;

}

#stop input {

    width: 80px;

    height: 30px;

    background: lightyellow; border-bottom : 1px solid black;

    border-radius: 10px;

    position: absolute;

    right: 0;

    bottom: 30px;

    cursor: pointer;

    border-bottom: 1px solid black;

}

#content .inner {

    width: 360px;

    height: 370px;

    float: left;

}

img {

    display: block;

    margin: 20px auto;

}

p {

    width: 268px;

    margin: 10px auto;

}

a {

    text-decoration: none;

    color: black;

}

a.below {

    color: darkgray;

}

a:hover {

    color: green;

}

</style>

js code:

<script type="text/javascript">

    var scrollTime = 2000;

    var intervalId;

    var count = 0;

    window.onload = function() {

        var args = [ 'c1', 'c2', 'c3', 'c4', 'c5', 'c6' ];

        intervalId = setInterval(func, scrollTime);

        function func() {

            moveTo(args[count]);

        }

    }

    function notAuto() {

        clearInterval(intervalId);

    }

    function moveTo(param) {

        //first

        var liNodes = document.getElementsByTagName("li");

        for (var i = 0; i < liNodes.length; i++) {

            liNodes[i].className = "";

            if (i < liNodes.length - 1)

                liNodes[i].childNodes[0].className = "";

        }

        var index = parseInt(param.charAt(1)) - 1;

        var liNode = liNodes[index];

        liNode.className = "over";

        liNode.childNodes[0].className = "noborder";

        if (index > 0) {

            liNodes[index - 1].childNodes[0].className = "noborder";

        }

        //second

        for (var i = 1; i <= 6; i++) {

            var all = 'c' + i;

            var div = document.getElementById(all);

            div.style.display = "none";

        }

        var divNode = document.getElementById(param);

        divNode.style.display = "block";

        count = (index + 1) % 6;

    }

</script>

html+css+javascript学习记录1的更多相关文章

JavaScript学习记录四
title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记要多查阅M ...
JavaScript学习记录三
title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记要多查阅M ...
JavaScript学习记录二
title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记要多查阅M ...
JavaScript学习记录一
title: JavaScript学习记录一 toc: true date: 2018-09-11 18:26:52 --<JavaScript高级程序设计(第2版)>学习笔记要多查阅M ...
Javascript学习记录——原生JS实现旋转木马特效
昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...
JavaScript学习记录总结（七）——dom对象应用之用户简单管理
<!DOCTYPE html><html><head><title>users.html</title> <meta name=&qu ...
HTML/CSS/JavaScript学习总结(转)
HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...
诶西，JavaScript学习记录。。。。。。
由于大学课程缘故,老师巨爱叫人问问题,还记分呢,随便记录一下Js的学习情况,以后复习什么的也比较方便吧...... 开始咯,就按照C语言学习那样的方法来吧! ===================== ...
JavaScript学习记录总结（九）——移动添加效果
<!DOCTYPE html><html><head><title>moveOption.html</title> <meta nam ...

随机推荐

基于vue模块化开发后台系统——构建项目
文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制前言在熟悉上一篇说到准备工具之后, ...
JavaScript method overload
https://stackoverflow.com/questions/2187666/help-with-js-and-functions-parameters JavaScript doesn' ...
【adb真机查Log】Android Studio 3.X 找不到Android Device Monitor
参考来源:https://blog.csdn.net/yuanxiang01/article/details/80494842 以下信息来源于Android Developers官网 Android设 ...
十五、jenkins环境配置
1. jenkins包下载,下载地址:https://jenkins.io/download/ 版本:Jenkins 2.134,下载war包 2. JDK下载:下载地址:http://www.ora ...
Maven的一些常用命令
将本项目的源码部署到本地仓库 mvn clean source:jar install 将本地jar包部署到本地仓库,首先将jar包放在当前目录下,然后执行,这样做比直接把jar包copy到本地仓库更 ...
Jmeter之CSV Data Set Config
在很多情况下,需要针对测试数据做参数化操作,Jmeter提供了很好用的CSV Data Set Config插件. 一.界面显示二.界面说明 1.名称:标识,建议设置为该组件是提供什么功能 2.注释 ...
element-ui走马灯如何实现图片自适应长度和高度自适应屏幕大小
最近写用vue2.0写一个项目,用到了走马灯效果,由于项目赶时间,想偷下懒,第一次引用了element组件(纯JS也可以写的出来,赶时间嘛,懂得....),结果用了发现一个问题,element的组件( ...
struts2 基础2 类型转换器
struts2常用常量的定义与意义每一次请求都会创建一个新的action,所以struts2的action是线程安全的拆分struts 为应用指定多个struts配置文件 src 下为各应用配置的 ...
python 正则表达式 re.split
内置函数split与re库中的split,有很多相似处 #!use/bin/python #coding:utf-8 import re str= "https://i.cnb1logs.c ...
浅谈数学上的矩阵——矩阵的乘法运算的概念及C++上的实现模板
首先让我们来谈一谈数学意义上的矩阵(在座各位也可以简单地将它理解为一个二维数组) 这样可以帮助我们理解矩阵加速及其运用的原理(矩阵加速是一个及其玄学的东西,所以请重点理解矩阵乘法) 这里给出一段严格 ...

html+css+javascript学习记录1

html+css+javascript学习记录1的更多相关文章

随机推荐

热门专题