内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

开发“todolist”项目及其自己的感悟

2018-08-29 18:38 出处:清屏网 人气: 评论(0

一,项目题目: 实现“todolist项目”

该项目主要可以练习js操控dom事件,事件触发之间的逻辑关系,以及如何写入缓存,获取缓存 固定。

二,todolist简介

ToDoList是一款非常优秀的任务管理软件,用户可以用它方便地组织和安排计划。该软件短小精悍,仅有一个 数百 KB 的可执行文件就能完成所有功能,并且界面设计优秀,初级用户也能够快速上手。

todolist具体功能

ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图。

最明显的好处是强迫自己整理出任务的每个部分,理顺后按部就班的完成,提高效率。

当然了习惯是需要慢慢养成了,开始使用 ToDoList 这样的软件会觉得很费劲,但坚持下来你就能体会到管理软件带来的便捷了。所以需要坚持。

三,项目需求:

本项目参考了http://www.todolist.cn/ 点击打开链接 ,对代码进行了一些精简,并添加了一些功能。在实现项目的过程中,首先是实现最基本的功能,然后不断地添加增强功能和美化。

参考链接http://www.todolist.cn/

1.将用户输入添加至待办项

2.可以对todolist进行分类(待办项和已完成组),用户勾选既将待办项分入已完成组

3.todolist的每一项可删除和编辑

4.下方有clear按钮,并清空所有todolist项

四,小编所做的静态页面

最终成型的结果:丑是丑了点,将就着看呗

五,基础HTML和CSS准备

5.1:input元素标签的用法

一个简单的HTML表单,包含两个文本输入框,一个提交按钮。

总结Input的标签:(input标签用于搜集用户信息)

Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等。

1,type=text

输入类型是text,这是我们见的最多也是使用最多的,
比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等。
当然这也是Input的默认类型。

参数name:同样是表示的该文本输入框名称。

参数size:输入框的长度大小。

参数maxlength:输入框中允许输入字符的最大数。

参数value:输入框中的默认值

特殊参数readonly:表示该框中只能显示,不能添加修改。

代码格式:

<form>
  your name:
  <input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20"><br>
  <input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改">
</form>

测试代码:

<!doctype html>
<html lang="zh-CN">
  <head>
     <meta charset="utf-8">
     <meta name="description" content="all kinds of input">
     <meta name="keywords" content="input,html">

      <title>各种input的测试</title>

  </head>
    
  <body>
          <form action="">
            姓名1:<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20"><br>
            姓名2:<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"><br>
          </form>
  </body>
</html>

2,type=password

此密码输入框,就是输入的信息是保密字符。

3, input中的placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password

期间又提及到一个表单标签form,下面继续介绍表单标签。

5.2,表单标签<form>

表单用于向服务器传输数据。

表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

其中上面又提到了提交按钮,我学一下。

5.3,button标签的用法

就是下面代码标记了一个按钮

<button type="button">Click Me!</button>

 

定义和用法

<button> 标签定义一个按钮。

在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

5.4,id属性

定义和用法

id 属性规定 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。

5.5,Span标签

<span> 在CSS定义中属于一个行内元素,在行内定义一个区域,也就是一行内可以被 <span> 划分成好几个区域,从而实现某种特定效果。

使用<Span>元素对文本的一部门进行着色。也就是说被<span>元素包含的文本,既可以使用css对其定义样式,或者使用JavaScript对其进行操作。

<span> 本身没有任何属性。 <div> 在CSS定义中属于一个块级元素 <div> 可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类,如章节、摘要或备注。在页面效果上,使用 <div> 会 自动换行 ,使用 <span> 就会保持同行。

5.6,label标签

<label>标签为input元素定义标注。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

for功能:表示这个lable是为哪个控件服务的,lable标签要绑定for指定HTML元素的ID或name属性,你点击的时候,所绑定的元素将获取焦点。

用法:<lable for="inputBox">姓名</lable><input id="inputbox' type="text">

accesskay:(一般很少用)

功能:定义访问这个控件的热键。 

用法:<label for="InputBox" accesskey="N">姓名</label><input id="InputBox" type="text"> 

局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。 

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

5.7,textarea 标签

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。

提示:可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式

5.8,input新增的三个属性autocomplete   autocapitalize  autocorrect

autocomplete

默认为on,其含义代表是否让浏览器自动记录自谦输入的值。

很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到。可以在input中加入autocomplete = "off"来关闭记录,系统需要保密的情况下可以使用此参数。

autocapitalize

自动大小写

autocorrect

纠错

5.9,section标签

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

section的真正应用只是很少,主要是article里面的标签,例如<h1><p></p></h1> => <section><h1><p></p></h1></section> 这样语义化才有效,如果无缘无故把 div 改为section,反而是误导了搜索引擎。当然,这要看情况而定,但<section>到底还是代表章节,至于什么才属于‘章节’就有自己去判断了。

section和div的异同

1、section和div都可以对内容进行分块,但是section是进行有意义的分块,无意义的分块应该由div来做,例如用作设置样式的页面容器。

2、section内部必须有标题,标题也代表了section的意义所在。

六:代码

项目结果:

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,user-scalable=no" />
        <title>ToDoList-最简单的待办事项列表</title>
        <meta name="description" content="ToDoList无须注册即可使用,数据存储在用户浏览器的html5本地数据库里,是最简单最安全的待办事项列表应用!" />
        <link type="text/css" rel="stylesheet" href="css/index.css" >
</head>
<body>
        <div class="wrap">
            <!--上面的时间内容-->
            <div class="time">
                <h3 id="concrete_time"></h3>
            </div>
            <!--顶栏的内容-->
            <div class="header">
               <form id="form" action="javascript:postAction()" >
                <label for="title">ToDoList</label>
                <input id="title" name="'title" placeholder="添加ToDo" required="required"
                 autocapitalize="off" type="text">
             </form>
            </div>

            <!--中间的内容-->
            <div class="section">
                <h2>
                    正在进行的计划
                    <span id="todocount">0</span>
                </h2>
                <ul id="todolist"></ul>
                    <h2>
                        已经完成的计划
                        <span id="donecount">0</span>
                    </h2>
                <ul id="donelist"></ul>
            </div>

            <!-- 清除键内容-->
            <div class="clear">
                <div class='clear-logo'  id="btn"></div>
                <div class="clear_write">
                    <a href="javascript:clear();">清空所有计划</a>
                 </div>

            </div>

            <!--底部内容-->
            <div class="footer">
                    Copyright © 2014 todolist.cn
                </div>
            </div>


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

    </script>
</html>

 

CSS代码:

*{
    padding:0;
    margin:0;
}
ul>li{
    list-style: none;
    overflow: hidden;
}
.wrap{
    width:100%;
    background-color:#cdcdcd;
    overflow: hidden;
}

.header{
    background-color: black;
    height: 50px;
}

.time{
    background: #cdcdcd;
    height: 60px;
    margin: 0 auto;
    line-height: 50px;
    font-family: "楷体","楷体_GB2312";
    color: red;
}
h1{
    position: relative;
    margin: 15px 20px;
}

#form{
    width: 600px;
    margin:0 auto;
    overflow: hidden;
}

label{
    color: #ddd;
    line-height: 50px;
    font-size: 24px;
    float: left;
    width: 100px;
    cursor: pointer;
}

.header input{
    float: right;
    width:60%;
    height: 24px;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    border: none;
}

.section{
    width: 600px;
    margin:20px auto;
}

h2{
    position: relative;
    margin: 15px 10px;
    font-family: "楷体","楷体_GB2312";
}

h2 span{
    position: absolute;
    right: 5px;
    top: 2px;
    padding: 0 15px;
    display: inline-block;
    background: #e6e6fa;
    font-size: 14px;
    color: red;
    text-align: center;
    height: 20px;
    line-height: 22px;
    border-radius: 20px;
}

ul li{
    overflow: hidden;
    height: 32px;
    line-height: 32px;
    background-color: #fff;
    border-radius: 3px;
    border: 2px solid red;
    padding:0 10px;
    margin-bottom: 10px;
}

/*给复选框中进行美化,*/
ul li input[type='checkbox']{
    float: left;
    width: 22px;
    height: 22px;
    margin:6px 5px 0 0;
    background-color: silver;
}
/*给计划的内容进行美化*/
ul li input[type='text']{
    float: left;
    width: 70%;
    text-indent: 5px;
    height: 26px;
    line-height: 27px;
    margin: 2px 0;
    margin-left: 20px;
    outline: none;
    border: none;
    font-family: "楷体","楷体_GB2312";
}

/*给移除的内容进行美化*/
ul li a{
    float: right;
    width:60px;
    background-color: #e6e6fa;
    color:red;
    border: 6px solid #fff;
    margin-top: 3px;
    border-radius: 14px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    line-height: 14px;
}

#donelist li{
    border-left: 5px solid #fff;
}
#donelist li input[type='text']{
    background-color:#fff;
}

/*清除所有内容的设置*/
.clear {
    font-size: 18px;
    padding: 10px;
    margin-top: 12px;
    outline: none;
}
.clear .clear-logo{
    background: url(../img/clear.png) no-repeat center;
    background-size:50px ;
    height: 50px;
}
.clear .clear_write{
    text-align: center;
    margin: 10px auto;
    font-family: "楷体","楷体_GB2312";
}

.clear a:hover{
    color: red;
    cursor: pointer;
}

.footer{
    width: 600px;
    margin: 30px  auto;
    color: #666;
    font-size: 14px;
    text-align: center;
}

 

JS代码:

// 设置时间
var h1 = document.getElementById("concrete_time");

setInterval(function () {
    var myDate = new Date();

    var y = myDate.getFullYear();
    var m = myDate.getMonth();
    var d = myDate.getDate();
    var h = myDate.getHours();
    var min = myDate.getMinutes();
    var s = myDate.getSeconds();


 h1.innerHTML = y+"年"+(m+1)+ "月"+ d + "日"+h+"时"+min+"分" +num(s)
},1000);

function num(n) {
    if (n<10){
        return '0'+n;
    }
    return n
}

var todolist = document.getElementById('todolist');
var donelist = document.getElementById('donelist');

var todoCount = document.getElementById('todocount');
var doneCount = document.getElementById('donecount');

var todoc =0;
var donec=0;

// 添加Todo的内容
function postAction() {
    var title = document.getElementById("title");

    if(title.value ===" "){
        alert("内容不能为空!")
    }else{
        var li = document.createElement("li");
        li.innerHTML ='<input type="checkbox" onchange="update();">' +
            '<input class="title" type="text" onchange="change();" onclick="edit();">' +
            '<a href="javascript:remove();">remove</a>';
        if(todoc ===0){
            todolist.appendChild(li);
        }else{
            todolist.insertBefore(li,todolist.children[0]);
        }
        var txtTitle = document.getElementsByClassName("title")[0];
        txtTitle.value = title.value;

        loop('todolist');
        todoc++;
        todoCount.innerText = todoc;

        title.value = "";
    }
}

// 循环 每次添加不同的i值
function loop(str){
    var list = null;
    str ==='todolist' ? list = todolist :list =donelist;

    childs = list.childNodes;
    for(var i=0; i<childs.length;i++){
        childs[i].children[0].setAttribute('onchange','update("'+i+'","'+str+'")');
        childs[i].children[1].setAttribute('onclick','edit("'+i+'","'+str+'")');
        childs[i].children[1].setAttribute('onchange','change("'+i+'","'+str+'","'
            +childs[i].children[1].value+'")');
        childs[i].children[2].setAttribute('href','javascript:remove("'+i+'","'+str+'")');
    }
}

// update方法
function update(n,str){
    var list = null;
    str === 'todolist' ? list = todolist : list = donelist;

    var li = null;
    childs = list.childNodes;
    for(var i=0;i<childs.length;i++){
        if(i===Number(n)){
            li = childs[i];
        }
    }
     // 删除原有的,得到li 并刷新了原有的li
    remove(n,str);

    if(str==='todolist'){
        if(donec ===0){
            donelist.appendChild(li);
        }else {
            donelist.insertBefore(li,donelist.children[0]);
        }
        loop('donelist');
        donec++;
        doneCount.innerText = donec;
    }else if(str ==='donelist'){
        todolist.appendChild(li);
        loop('todolist');
        todoc++;
        todoCount.innerText = todoc;
    }
}

// edit方法编译title
function edit(n,str) {
    var list = null;
    str ==='todolist' ? list = todolist : list = donelist;
    childs = list.childNodes;
    for(var i=0;i<childs.length;i++){
        if(i===Number(n)){
            childs[i].children[1].style.border = '1px solid red';
        }
    }
}

function change(n,str,oldValue) {
    var list = null;
    str==='todolist' ? list = todolist : list = donelist;
    childs = list.childNodes;
    for(var i=0; i<childs.length; i++){
        if(i===Number(n)){
            childs[i].children[1].style.border = 'none';
            if(childs[i].children[1].value === ""){
                alert('内容不能为空');
                childs[i].children[1].value = oldValue;
            }
        }
    }
    loop(str);
}

// 清除单个列表
function remove(n,str) {
    var list=null;
    if (str==='todolist'){
        list = todolist;
        todoc--;
        todoCount.innerText = todoc;
    } else if(str==='donelist'){
        list = donelist;
        donec--;
        doneCount.innerText = donec;
    }

    childs = list.childNodes;
    for(var i=childs.length-1;i>=0;i--){
        if(i===Number(n)){
            list.removeChild(childs[n]);
        }
    }
    loop(str);
}

// 清除所有列表
function clear(){
    childs1 = todolist.childNodes;
    for(var i=childs1.length-1;i>=0;i--){
        todolist.removeChild(childs1[i]);
    }
    childs2 = donelist.childNodes;
    for(var j=childs2.length-1;j>=0;j--){
        donelist.removeChild(childs2[j]);
    }
    todoc = 0;
    donec = 0;
    todoCount.innerText = todoc;
    doneCount.innerText = donec;
}

 

静态页面代码(未加任何动画效果)

静态页面HTML代码:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,user-scalable=no" />
		<title>ToDoList-最简单的待办事项列表</title>
		<meta name="description" content="ToDoList无须注册即可使用,数据存储在用户浏览器的html5本地数据库里,是最简单最安全的待办事项列表应用!" />
		<link type="text/css" rel="stylesheet" href="css/index.css" >
		
	</head>
	<body>
		<div class='wrap'>
			<!--#顶栏的内容-->
			<div class='topbar'>
				<div class="container1">
					<!--<form action="javascript:postaction()" id="form">
						<label for='title'>ToDoList</label>
						<input type="text" id="title" name="title" placeholder="添加ToDo"
						required="required" autocomplete="off" >
					</form>-->
					<div class='label'>ToDoList</div>
					
					<input type="text" id="title" name="title" placeholder="添加ToDo"
						required="required" autocomplete="off" >
				</div>
			</div>
			
			<!--#中间的内容-->
			<div class='section'>
				<div class="container2">
					
					<ul id='right-ul'>
						<li><div class='todolist-logo'></div><p>正在进行</p></li>
						<li><div class='donelist-logo'></div><p>已经完成</p></li>
					</ul>
					
					<!--<div class='todolist'>
						<p>正在进行</p>
					</div>
					
					<div class='donelist'>
						<p>已经完成</p>
					</div>-->
					
				</div>
			</div>
			
			<!--清除内容-->
			<div class="clear">
				<ul id='center-clear'>
					<li><div class='clear-logo'  id="btn"></div><p >一键清空</p></li>
				</ul>
				<!--<a href="#">一键清空</a>-->
			</div>
			
			<!--#下面的内容-->
			<div class='footer'>
				<div class="container3">
					<p>Copyright © 2014 todolist.cn</p>
					
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="./js/index.js">
			
			
		</script>
		
	</body>
</html>

 

静态页面CSS代码:

*{
	padding: 0;
	margin: 0;
}

.wrap{
	width: 100%;
	overflow: hidden;
	
}

ul>li{
	list-style: none;
}

a{
	text-decoration: none;
}

.topbar{
	height: 50p;
	background: #333;
	line-height: 50px;
}

.container1{
	width: 800px;
	overflow: hidden;
	margin: 0 auto;
}

.label{
	float: left;
	width: 100px;
	line-height: 50px;
	color: #DDD;
	font-size: 24px;
	cursor: pointer;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.topbar input{
	float: right;
	width: 30%;
	height: 24px;
	margin-top: 12px;
	text-indent: 10px;
	border-radius: 5px;
	/*box-shadow: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
	/*border: none;*/
}

.section{
	padding: 0 10px;
	margin: 0 auto;
	background: #cdcdcd;
}

.container2{
	width: 800px;
	overflow: hidden;
	margin: 0 auto;
}

.section ul li{
	font-size: 24px;
	padding: 10px;
	border: 1px solid #E0E0E0;
}
.section ul li:hover{
	color: blue;
	cursor: pointer;
}



.clear{
	/*position: fixed;*/
	/*padding: 10px 0;*/
	/*font-size: 18px;*/
	/*background-color: #fafafa;*/
	/*text-align: center;*/
	
}

.clear ul li{
	font-size: 18px;
	padding: 10px;
	border: 1px solid #e0e0e0;
}

.clear ul li:hover{
	color: red;
	cursor: pointer;
}

.clear ul li p{
	text-align: center;
	padding-top: 5px;
} 
.clear .clear-logo{
	background: url(../img/clear.png) no-repeat center;
	background-size:40px ;
	height: 40px;
}

.footer{
	padding: 10px 0;
	font-size: 12px;
	background-color: #fafafa;
}

.container3{
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}

.footer p{
	padding: 10px 0;
	text-align: center;
	color: #666;
	font-size: 14px;
	/*background:#fff;*/
	font-size: "楷体";
	min-width: 1226px;
}

 

七:总结

对自己在做CSS,JS中遇到的一些问题,从简单到难,想记录下来自己的不足,因为前端这块是全新的知识点,我却当做自己会的,所以遇到了很大的困难,但是克服了这些问题,我觉得有必要记录一下。

7.1  CSS中设置字体的颜色

color即可

7.2 CSS中设置字体为楷体

font-family: "楷体","楷体_GB2312";

 

7.3 如何把a标签居中?

第一种思路:a标签外层加一个DIV 然后DIV 设置 样式 text-align:center; 这样里面就居中了。

第二种思路的:就直接在你的源码上改 .

a{
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
    width:222px;
    height:100px;
    border:1px solid red;
    display:block; 
    text-align:center
}

这个就行了,因为A标签不是一个块级元素 所以 要先 display:block。

7.4 Javascript日期的部分函数

var myDate = new Date();
myDate.getYear();  //获取当前年份(2位)
myDate.getFullYear();  //获取完整的年份(4位,1970-????)
myDate.getMonth();  //获取当前月份(0-11,0代表1月)
myDate.getDate();  //获取当前日(1-31)
myDate.getDay();  //获取当前星期X(0-6,0代表星期天)
myDate.getTime();  //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();  //获取当前小时数(0-23)
myDate.getMinutes();  //获取当前分钟数(0-59)
myDate.getSeconds();  //获取当前秒数(0-59)
myDate.getMilliseconds();  //获取当前毫秒数(0-999)
myDate.toLocaleDateString();  //获取当前日期
var mytime=myDate.toLocaleTimeString();  //获取当前时间
myDate.toLocaleString( );  //获取日期与时间

 

7.5 HTML中<input>标签的type属性

语法:

<input type="value">

 

属性值:

描述
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符

7.6  自定义input[type="checkbox"]的样式

对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现。

如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用。不过,倒是可以基于复选框的勾选状态 借助组合选择符来给其他元素设置样式。

很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbox"] 一起使用。 当<label>元素与复选框关联之后,也可以起到触发开关的作用

思路:

1. 可以为<label>元素添加生成性内容(伪元素),并基于复选框的状态来为其设置样式;
2. 然后把真正的复选框隐藏起来;
3. 最后把生成内容美化一下。

 

解决方法:

1,一段简单的代码:

<input type="checkbox" id="onlyone" />
<label for="onlyone">onyone!</label>

 

2. 生成一个伪元素,作为美化版的复选框,先给伪元素添加一些样式:

input[type="checkbox"] + label::before {
    content: "\a0";  /*不换行空格*/
    display: inline-block;
    vertical-align: .2em;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background-color: silver;
    text-indent: .15em;
    line-height: .65;  /*行高不加单位,子元素将继承数字乘以自身字体尺寸而非父元素行高*/
}

 

原来的复选框仍然可见,但是我们先给复选框的勾选状态添加样式:

3. 给复选框的勾选状态添加不同的样式:

input[type="checkbox"]:checked + label::before {
    content: "\2713";
    background-color: yellowgreen;
}

4 现在把原来的复选框隐藏:

input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

隐藏原来的复选框时,如果使用 display: none; 的话,那样会把它从键盘 tab 键切换焦点的队列中完全删除。

于是可采用剪切的方式,让剪切后的尺寸为零,这样就隐藏了原来的多选框。

7.7  CSS ::before和::after用来做复选框

::before选择器在被选元素的内容前面插入内容。

:after 选择器在被选元素的内容后面插入内容。

它们都必须使用content 属性来指定要插入的内容(content : "内容,可以为空值";)。如果没有content属性来指定内容的话将无效。

基本应用:做一个复选框的效果,由于给定的复选框不好看,所以我们可以先将给定的复选框隐藏掉,然后用before做一个自己想要的复选框出来。

7.8  对JS函数的总结

JS中的函数实际上是一个对象,每个函数都是Function类型实例,而且可以与其他引用类型都一样具有属性和方法,由于函数是对象,因此函数名实际上是一个指向函数对象的指针,可以作为变量指向其他函数对象,也可以作为其他函数的返回值。

常用的函数定义方式有两种

一种是声明式定义,如下:

function sum (num1, num2) {
  return num1 + num2;
}

一种是表达式定义,如下:

var sum = function(num1, num2){
  return num1 + num2;
};

 

7.9  对js基础的总结:

通常,通过 JavaScript,您需要操作 HTML 元素。

1、通过 id 找到 HTML 元素

2、通过标签名找到 HTML 元素

3、通过类名找到 HTML 元素

提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

var x=document.getElementById("intro");
var y=document.getElementsByTagName("p");

①、改变 HTML 元素的内容 (innerHTML)

document.getElementById(id).innerHTML=new HTML

②、改变 HTML 属性

document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";

③、改变 HTML 样式

document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script>

④、添加或删除 HTML 元素

7.10 对JS中变量,常量的总结

JS中与变量常量声明相关的关键字有var,let和const。其中let和const是ES6的新特性。var和let都是用来声明变量的,不同的是var声明的变量会有一个一个作用域提升的效果,var声明的变量会被提升到当前作用域的最前面,它的作用域范围也就是当前作用域,即使它是在语句块中声明。而let声明的变量就没有作用域提升的效果,它声明的变量会绑定当前语句块(暂时性死区,temporal dead zone,简称TDZ),被声明之后才可以使用,只在声明所在的块级作用域内有效。const关键字用来声明常量,同时它声明的常量也和let一样不存在作用域提升的效果。

function foo(){
  //if中的声明语句会被提升到这里
  //var a;
  if(false) {
    var a = 1;
  }
  a = 10;
  console.log(a);//10
}

function bar(){
  {
    console.log(b); //ReferenceError: can't access lexical declaration `b' before initialization
    let b = 2;
  }
  console.log(b); //ReferenceError: b is not defined
}

function baz(){
  {
    const c = 2;
  }
  console.log(c); //ReferenceError: c is not defined
}
分享给小伙伴们:
本文标签: todolist

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.