安科网

html+css+javascript学习记录1

wangnantjobj

wangnantjobj

2019-06-28

关注 关注

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

  1. Mytodolist
    html+css+javascript学习记录1

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. 仿导航条效果
    (1) 鼠标悬停时切换展示内容
    (2) 自动轮播展示内容
    (3) 清除自动展示
    html+css+javascript学习记录1

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>

css

wangnantjobj

wangnantjobj

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

纯CSS实现密室逃脱游戏

“密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。玩家常常会被困在一间密室中，而过关的目的就是想法设法逃出这件密室。接下来，笔者要用纯CSS实现一款类似的密室逃脱类游戏。是的，你没听错，纯CSS，也就意味着完全没有J

qiupu 2020-11-04

一篇文章带你了解CSS对齐方式

将块元素水平居中对齐 , 使用 margin: auto;设置元素的宽度将阻止它伸展到容器的边缘。将元素内部的文本居中, 使用text-align: center;对齐元素的一种方法是使用 position: absolute;在我年轻而脆弱的岁月里，父亲

多读书读好书 2020-11-03

Node Sass 弃用，以 Dart Sass 代替

就在今天，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。读完本文以下问题将会得到解答。那么为什么会有这次改动呢?之后 Node Sass 还维护吗?Dart S

RedCode 2020-10-28

CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?CSS

jiedinghui 2020-10-25

CSS(Cascading Style Sheets)样式更改——过渡、动画

元素从一种样式逐渐改变为另一种的样式。cubic-bezier在cubic-bezie函数中定义自己的值，可能的值是0至1之间的数值

Ladyseven 2020-10-22

多个你不知道的 CSS 居中方案！

要使内联元素居中，使用 text-align: center 足够了。对于多个内联的项目，也可以正常工作。使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。宽度和高度已知的块元素可以通过设置mar

hellowzm 2020-10-12

540 CSS3属性对层叠上下文的影响

-- 案例二分解:opacity -->

impress 2020-10-07

如何在Shadow DOM/Web组件中覆盖CSS

Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。

zuncle 2020-09-28

超越媒体查询：使用更新的HTML和CSS功能进行响应式设计

在本文中，我们将探讨许多可用的工具，从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。事实上，媒体查询与这些功能一起使用时，更多的是成为一种补充，而不是完整的方法。让我们来看看是如何运作的。图像可能会变形到失去焦点的程度。较小

Ladyseven 2020-09-11

5个好用的 CSS 函数

CSS 包含了许多函数，而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS 函数是它所具有的最强大的特性之一，在本文中，我将介绍一些我认为有

jiedinghui 2020-09-07

使用这些不太常用的 CSS 属性，让我在前端布局效率上，又提高了一个层次！

有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么

xiaohuli 2020-09-02

16个非常有用的CSS伪选择器，你千万不要错过了！

熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。这个伪元素选择器选择换行之前文本的首行。这个伪元素选择器应用于元素中文本的首字母。应用于任何被用户选中的高亮区域。在 HTML 中，为 HTML 元素。这个规则将应

葉無聞 2020-09-01

总结一些，我在书写 CSS 的时候，经常犯的错误！

当我们非常专注写代码时候，我们往往会无意识的写出一些无效CSS代码。我把这种称为 “潜意识错误”。不过，这些错误都比较好解决，不需要花很多时间，只要纠正一下就行了。跟着本文看看，我会经常写哪些有趣的 CSS 错误。/*现这一点并不容易，你们看出错误在哪里吗

impress 2020-08-26

一个思路，如何尝试创建自己的CSS框架？

在2019年，我创建了一个CSS框架并将其命名为Rotala.css[1]。经过一些重构和修改，我终于在2020年发布了“玩具”框架。但它仍在原型设计中，因为我认为我的解决方案还不优雅。我构建此框架的原因很简单：我自己想要一个CSS框架。最初，我开始使用

ThikHome 2020-08-24

前端开发CSS清除浮动的方法有哪些？

在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素，此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现

nicepainkiller 2020-08-20

多终端同步工具browsersync安装使用

2：进入项目目录 window可以进到目标目录，shift+右键，在此处打开命令窗口 也可以cmd里面切换进入

aSuncat 2020-08-19

CSS知识点（三）

text-align:center:内容水平居中，可以让行内元素和行内块元素水平居中，不可以让块状元素居中。则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者?,这种现象被称为相邻块元素垂直外边距的合并。确定页

hellowzm 2020-08-18

css浮动

2、为什么要清除浮动？

aSuncat 2020-08-18

HTML&amp;CSS 案例

案例 1：旅游网站首页。确定使用table来完成布局。如果某一行只有一个单元格，则使用<tr><td></td></tr>

zengni 2020-08-17

css 背景图片路径问题

background-size: 宽 高 | cover 完全覆盖 | contain 宽高自动调节

zhanghaibing00 2020-08-17
wangnantjobj

wangnantjobj

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号