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

  1. Mytodolist

html code:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>MyTodolist</title>
  6. <link href="./css/todolist.css" rel="stylesheet" type="text/css"/>
  7. <script type="text/javascript" src="js/todolist.js"></script>
  8. </head>
  9. <body>
  10. <div id="title">
  11.         <span>My todolist</span><input name="thing" class="blank" type="text" value="add a thing here" onclick="clearText()" onblur="addThing()"/>
  12. </div>
  13. <div id="content">
  14.     <div class="do">
  15.         <p>未完成<input name="usum" class="circle" type="text" value="0"/></p>
  16.         <ul name="undo"></ul>
  17.     </div>
  18.     <div class="do">
  19.         <p>已完成<input name="dsum" class="circle" type="text" value="0"/></p>
  20.         <ul name="done"></ul>
  21.     </div>
  22.     <div class="do btnarea">
  23.         <input class="clear" type="button" value="全选" onclick="selectAll()"/>
  24.         <input class="clear" type="button" value="反选" onclick="oppositeAll()"/>
  25.         <input class="clear" type="button" value="清除" onclick="clearAll()"/>
  26.     </div>
  27. </div>
  28. </body>
  29. </html>

css code:

  1. @CHARSET "UTF-8";
  2. /*
  3.     two colors to use:
  4.     rgba(100,147,235,1.0)
  5.     rgba(222,184,134,1.0)
  6. */
  7. html,body,div,applet,object,iframe,
  8. h1,h2,h3,h4,h5,h6,p,blockquote,pre,
  9. a,abbr,acronym,address,big,cite,code,
  10. del,dfn,em,font,img,ins,kbd,q,s,samp,
  11. small,strike,strong,sub,sup,tt,var,
  12. b,u,i,center,
  13. dl,dt,dd,ol,ul,li,
  14. fieldset,form,label,legend,
  15. table,caption,tbody,tfoot,thead,tr,th,td {
  16.     margin: 0;
  17.     padding: 0;
  18.     border: 0;
  19.     outline: 0;
  20.     /*font-size: 100%; /*字体默认大小*/
  21.     font-size:18px;
  22.     vertical-align: transparent;
  23.     background: transparent;
  24.     font-family:Arial;
  25. }
  26. body{line-height: 1;}
  27. ol,ul{list-style: none;}
  28. blockquote,q{quotes: none;}
  29. blockquote:before,blockquote:after,q:before,q:after{content: '';content: none;}
  30. a{text-decoration: none;}
  31. #title{
  32.     background-color:rgba(100,147,235,1.0);
  33.     text-align:center;
  34.     height:50px;
  35. }
  36. #content{
  37.     background-color:rgba(220,220,220,1.0);
  38.     min-height:700px;
  39. }
  40. span{
  41.     display:inline-block;
  42.     width:150px;
  43.     height:50px;
  44.     line-height:50px;
  45.     text-align:left;
  46. }
  47. .blank{
  48.     width:350px;
  49.     height:20px;
  50.     color:gray;
  51.     border:0px;
  52. }
  53. .do{
  54.     width:500px;
  55.     min-height:100px;
  56.     position:relative;
  57.     left:425px;
  58. }
  59. p{
  60.     height:50px;
  61.     line-height:50px;
  62.     font-family:微软雅黑;
  63.     font-weight:bold;
  64. }
  65. li{
  66.     background-color:rgba(222,184,134,1.0);
  67.     height:25px;
  68.     line-height:25px;
  69.     margin-left:25px;
  70.     margin-bottom:10px;
  71.     border-radius:5px;/*设置成圆角 */
  72.     border-bottom:1px solid black;
  73. }
  74. label{
  75.     font-family:微软雅黑;
  76.     font-size:14px;
  77. }
  78. .clear{
  79.     width:50px;
  80.     height:30px;
  81.     font-family:微软雅黑;
  82.     font-size:14px;
  83.     font-weight:bold;
  84.     border-radius:5px;
  85.     border-bottom:1px solid black;
  86.     background-color:lightblue;
  87. }
  88. .btnarea{
  89.     text-align:right;
  90. }
  91. b{
  92.     font-size:8px;
  93.     display:inline-block;
  94.     float:right;
  95.     color:blue;
  96. }
  97. .circle{
  98.     width:20px;
  99.     height:20px;
  100.     border-radius:20px;
  101.     border:1px solid lightgray;
  102.     text-align:center;
  103.     font-size:15px;
  104.     font-weight:bold;
  105.     position:relative;
  106.     left:425px;
  107.     background-color:rgb(232,232,241);
  108.     font-family:Arial;
  109. }

js code:

  1. function clearText() {
  2.     var nodes = document.getElementsByName("thing");
  3.     var inputNode = nodes[0];
  4.     inputNode.value = "";
  5. }
  6. function addThing() {
  7.     var nodes = document.getElementsByName("thing");
  8.     var inputNode = nodes[0];
  9.     var text = inputNode.value
  10.     if (text != "") {
  11.         var undoUl = document.getElementsByName("undo")[0];
  12.         undoUl.innerHTML += "<li><input name='item' type='checkbox'/><label>"
  13.                 + text
  14.                 + "</label><b>done<input type='radio' onclick='todone(this)'/></b></li>";
  15.         var circleNode = document.getElementsByName("usum")[0];
  16.         circleNode.value = parseInt(circleNode.value) + 1;
  17.     }
  18.     inputNode.value = "add a thing here";
  19. }
  20. function clearAll() {
  21.     var nodes = document.getElementsByName("item");
  22.     var len = nodes.length;
  23.     var circleNode1 = document.getElementsByName("usum")[0];
  24.     var circleNode2 = document.getElementsByName("dsum")[0];
  25.     for (var i = 0; i < len; i++) {
  26.         if (nodes[i].checked) {
  27.             var liNode = nodes[i].parentNode;
  28.             var ulNode = liNode.parentNode;
  29.             ulNode.removeChild(liNode);
  30.             i--;
  31.             len--;
  32.             var name = ulNode.attributes[0].value;
  33.             if (name == "undo")
  34.                 circleNode1.value--;
  35.             else
  36.                 circleNode2.value--;
  37.         }
  38.     }
  39. }
  40. function selectAll() {
  41.     var nodes = window.document.getElementsByName("item");
  42.     for (var i = 0; i < nodes.length; i++) {
  43.         nodes[i].checked = true;
  44.     }
  45. }
  46. function oppositeAll() {
  47.     var nodes = document.getElementsByName("item");
  48.     for (var i = 0; i < nodes.length; i++) {
  49.         var before = nodes[i].checked;
  50.         nodes[i].checked = !before;
  51.     }
  52. }
  53. function todone(param) {
  54.     var liNode = param.parentNode.parentNode;
  55.     param.parentNode.innerHTML = "undo<input type='radio' onclick='toundo(this)'/>";
  56.     var ulNode = document.getElementsByName("done")[0];
  57.     ulNode.appendChild(liNode);
  58.     var circleNode = document.getElementsByName("usum")[0];
  59.     var sum = parseInt(circleNode.value)
  60.     if (sum > 0) {
  61.         circleNode.value = sum - 1;
  62.     }
  63.     circleNode = document.getElementsByName("dsum")[0];
  64.     circleNode.value = parseInt(circleNode.value) + 1;
  65. }
  66. function toundo(param) {
  67.     var liNode = param.parentNode.parentNode;
  68.     param.parentNode.innerHTML = "done<input type='radio' onclick='todone(this)'/>";
  69.     var ulNode = document.getElementsByName("undo")[0];
  70.     ulNode.appendChild(liNode);
  71.     var circleNode = document.getElementsByName("dsum")[0];
  72.     var sum = parseInt(circleNode.value)
  73.     if (sum > 0) {
  74.         circleNode.value = sum - 1;
  75.     }
  76.     circleNode = document.getElementsByName("usum")[0];
  77.     circleNode.value = parseInt(circleNode.value) + 1;
  78. }
  1. 仿导航条效果
    (1) 鼠标悬停时切换展示内容
    (2) 自动轮播展示内容
    (3) 清除自动展示

html code:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>导航条效果</title>
  6. </head>
  7. <body>
  8.     <div id="nav">
  9.         <div id="stop">
  10.             <input type="button" value="停止轮播" onclick="notAuto()" />
  11.         </div>
  12.         <div id="title">
  13.             <ul>
  14.                 <li class="over" onmouseover="moveTo('c1')"><label>为你推荐</label></li>
  15.                 <li onmouseover="moveTo('c2')"><label>电子</label></li>
  16.                 <li onmouseover="moveTo('c3')"><label>轻音乐</label></li>
  17.                 <li onmouseover="moveTo('c4')"><label>经典</label></li>
  18.                 <li onmouseover="moveTo('c5')"><label>热门游戏</label></li>
  19.                 <li onmouseover="moveTo('c6')"><label class="noborder">情歌</label></li>
  20.             </ul>
  21.         </div>
  22.         <div id="content">
  23.             <div id="c1">
  24.                 <div class="inner">
  25.                     <img src="img/1.png" />
  26.                     <p>
  27.                         <a href="">每日新歌:郑容和写给你的情书</a>
  28.                     </p>
  29.                     <p>
  30.                         <a href="" class="below">播放量: 14.1万</a>
  31.                     </p>
  32.                 </div>
  33.                 <div class="inner">
  34.                     <img src="img/2.png" />
  35.                     <p>
  36.                         <a href="">[知味沧桑]&nbsp;&nbsp;历经岁月才能体会</a>
  37.                     </p>
  38.                     <p>
  39.                         <a href="" class="below">播放量: 9.0万</a>
  40.                     </p>
  41.                 </div>
  42.             </div>
  43.             <div id="c2" style="display: none">
  44.                 <div class="inner">
  45.                     <img src="img/3.png" />
  46.                     <p>
  47.                         <a href="">催眠系Chillout&nbsp;&nbsp;星空遐想氛围</a>
  48.                     </p>
  49.                     <p>
  50.                         <a href="" class="below">播放量: 2.2万</a>
  51.                     </p>
  52.                 </div>
  53.                 <div class="inner">
  54.                     <img src="img/4.png" />
  55.                     <p>
  56.                         <a href="">历史老师推荐盛世民俗必听古风</a>
  57.                     </p>
  58.                     <p>
  59.                         <a href="" class="below">播放量: 16.9万</a>
  60.                     </p>
  61.                 </div>
  62.             </div>
  63.             <div id="c3" style="display: none">
  64.                 <div class="inner">
  65.                     <img src="img/5.png" />
  66.                     <p>
  67.                         <a href="">令人心跳加速的的甜蜜日漫片尾曲</a>
  68.                     </p>
  69.                     <p>
  70.                         <a href="" class="below">播放量: 69.0万</a>
  71.                     </p>
  72.                 </div>
  73.                 <div class="inner">
  74.                     <img src="img/6.png" />
  75.                     <p>
  76.                         <a href="">历史老师推荐盛世民俗必听古风</a>
  77.                     </p>
  78.                     <p>
  79.                         <a href="" class="below">播放量: 16.9万</a>
  80.                     </p>
  81.                 </div>
  82.             </div>
  83.             <div id="c4" style="display: none">
  84.                 <div class="inner">
  85.                     <img src="img/7.png" />
  86.                     <p>
  87.                         <a href="">令人心跳加速的的甜蜜日漫片尾曲</a>
  88.                     </p>
  89.                     <p>
  90.                         <a href="" class="below">播放量: 69.0万</a>
  91.                     </p>
  92.                 </div>
  93.                 <div class="inner">
  94.                     <img src="img/8.png" />
  95.                     <p>
  96.                         <a href="">历史老师推荐盛世民俗必听古风</a>
  97.                     </p>
  98.                     <p>
  99.                         <a href="" class="below">播放量: 16.9万</a>
  100.                     </p>
  101.                 </div>
  102.             </div>
  103.             <div id="c5" style="display: none">
  104.                 <div class="inner">
  105.                     <img src="img/9.png" />
  106.                     <p>
  107.                         <a href="">令人心跳加速的的甜蜜日漫片尾曲</a>
  108.                     </p>
  109.                     <p>
  110.                         <a href="" class="below">播放量: 69.0万</a>
  111.                     </p>
  112.                 </div>
  113.                 <div class="inner">
  114.                     <img src="img/10.png" />
  115.                     <p>
  116.                         <a href="">历史老师推荐盛世民俗必听古风</a>
  117.                     </p>
  118.                     <p>
  119.                         <a href="" class="below">播放量: 16.9万</a>
  120.                     </p>
  121.                 </div>
  122.             </div>
  123.             <div id="c6" style="display: none">
  124.                 <div class="inner">
  125.                     <img src="img/11.png" />
  126.                     <p>
  127.                         <a href="">令人心跳加速的的甜蜜日漫片尾曲</a>
  128.                     </p>
  129.                     <p>
  130.                         <a href="" class="below">播放量: 69.0万</a>
  131.                     </p>
  132.                 </div>
  133.                 <div class="inner">
  134.                     <img src="img/12.png" />
  135.                     <p>
  136.                         <a href="">历史老师推荐盛世民俗必听古风</a>
  137.                     </p>
  138.                     <p>
  139.                         <a href="" class="below">播放量: 16.9万</a>
  140.                     </p>
  141.                 </div>
  142.             </div>
  143.         </div>
  144.     </div>
  145. </body>
  146. </html>

css code:

  1. <style type="text/css">
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     list-style-type: none;
  6.     font: 14px Arial, Helvetica, sans-serif, "新宋体", "微软雅黑";
  7. }
  9. #title {
  10.     width: 720px;
  11.     height: 50px;
  12.     margin: 0px auto 0 auto;
  13. }
  15. #title li {
  16.     float: left;
  17.     width: 120px;
  18.     height: 50px;
  19.     background: lightgreen;
  20. }
  22. #title li label {
  23.     display: block;
  24.     margin: 15px auto;
  25.     text-align: center;
  26.     border-right: 1px solid gray;
  27. }
  29. #title li label.noborder {
  30.     border: none;
  31. }
  33. #content {
  34.     width: 720px;
  35.     height: 370px;
  36.     margin: 15px auto;
  37.     background: lightyellow;
  38.     border: 1px dashed black;
  39.     border-radius: 20px;
  40. }
  42. #content div {
  43.     width: 100%;
  44.     height: 100%;
  45. }
  47. #title li.over {
  48.     background: green;
  49.     color: white;
  50. }
  52. #stop {
  53.     width: 720px;
  54.     height: 80px;
  55.     margin: 50px auto 0 auto;
  56.     position: relative;
  57. }
  59. #stop input {
  60.     width: 80px;
  61.     height: 30px;
  62.     background: lightyellow; border-bottom : 1px solid black;
  63.     border-radius: 10px;
  64.     position: absolute;
  65.     right: 0;
  66.     bottom: 30px;
  67.     cursor: pointer;
  68.     border-bottom: 1px solid black;
  69. }
  71. #content .inner {
  72.     width: 360px;
  73.     height: 370px;
  74.     float: left;
  75. }
  77. img {
  78.     display: block;
  79.     margin: 20px auto;
  80. }
  82. p {
  83.     width: 268px;
  84.     margin: 10px auto;
  85. }
  87. a {
  88.     text-decoration: none;
  89.     color: black;
  90. }
  92. a.below {
  93.     color: darkgray;
  94. }
  96. a:hover {
  97.     color: green;
  98. }
  99. </style>

js code:

  1. <script type="text/javascript">
  2.     var scrollTime = 2000;
  3.     var intervalId;
  4.     var count = 0;
  5.     window.onload = function() {
  6.         var args = [ 'c1', 'c2', 'c3', 'c4', 'c5', 'c6' ];
  7.         intervalId = setInterval(func, scrollTime);
  8.         function func() {
  9.             moveTo(args[count]);
  10.         }
  11.     }
  12.     function notAuto() {
  13.         clearInterval(intervalId);
  14.     }
  15.     function moveTo(param) {
  16.         //first
  17.         var liNodes = document.getElementsByTagName("li");
  18.         for (var i = 0; i < liNodes.length; i++) {
  19.             liNodes[i].className = "";
  20.             if (i < liNodes.length - 1)
  21.                 liNodes[i].childNodes[0].className = "";
  22.         }
  23.         var index = parseInt(param.charAt(1)) - 1;
  24.         var liNode = liNodes[index];
  25.         liNode.className = "over";
  26.         liNode.childNodes[0].className = "noborder";
  27.         if (index > 0) {
  28.             liNodes[index - 1].childNodes[0].className = "noborder";
  29.         }
  30.         //second
  31.         for (var i = 1; i <= 6; i++) {
  32.             var all = 'c' + i;
  33.             var div = document.getElementById(all);
  34.             div.style.display = "none";
  35.         }
  36.         var divNode = document.getElementById(param);
  37.         divNode.style.display = "block";
  38.         count = (index + 1) % 6;
  39.     }
  40. </script>

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

  1. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  2. JavaScript学习记录三

    title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  3. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  4. JavaScript学习记录一

    title: JavaScript学习记录一 toc: true date: 2018-09-11 18:26:52 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  5. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  6. JavaScript学习记录总结（七）——dom对象应用之用户简单管理

    <!DOCTYPE html><html><head><title>users.html</title> <meta name=&qu ...

  7. HTML/CSS/JavaScript学习总结(转)

    HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...

  8. 诶西，JavaScript学习记录。。。。。。

    由于大学课程缘故,老师巨爱叫人问问题,还记分呢,随便记录一下Js的学习情况,以后复习什么的也比较方便吧...... 开始咯,就按照C语言学习那样的方法来吧! ===================== ...

  9. JavaScript学习记录总结（九）——移动添加效果

    <!DOCTYPE html><html><head><title>moveOption.html</title> <meta nam ...

随机推荐

  1. python大佬养成计划----HTML DOM

    什么是DOM? DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口.HTML DOM 定义了访问和操作 HTML 文档的标准方法.DOM ...

  2. Netflow elasticflow

    http://itfish.net/article/27660.html https://github.com/robcowart/elastiflow/tree/master

  3. gsensor方向调试【转】

    本文转载自:http://blog.csdn.net/guoguo295/article/details/19545089 版权声明:本文为博主原创文章,未经博主允许不得转载. 以下说明主要是针对gs ...

  4. WeekMap WeakSet的用途

    1. WeekMap WeakSet有一个特性,就是加入其中的元素不会算入引用计数,所以当其他地方没有对对象的引用之后,就可以删除了,不会造成内存泄漏. WeekMap的一个用途是保存Dom节点引用, ...

  5. python值的引用传递和go语言的值传递

    一:值传递 实参a 原本指向地址 1638212,代表1638212这个地址的值是3.在swap函数中,实参a将值拷贝给形参a,形参a此时也在内存中拥有地址,地址= xxxx,值为3,在所有的函数体内 ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_02 递归_4_练习_递归打印多级目录

    递归所有的文件夹,并把文件都输出出来. 在最上面打印目录的名称

  7. 正则表达式——POSIX字符组

    前面介绍了常用的字符组,但是在某些文档中,你可能会发现类似[:digit:].[:lower:]之类的字符组,看起来不难理解(digit就是"数字",lower就是"小写 ...

  8. Java ——if条件语句 switch语句

    本节重点思维导图  if条件语句 //如果条件表达式成立,执行语句块 if(条件表达式){ //…语句块 } 如果语句块只有一条语句,大括号可以省略,否则不能省略. 建议,不管有几条语句,都不要省略大 ...

  9. 2019春第十一周作业Compile Summarize

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 这里 我在这个课程的目标是 能按自己的想法解出题目 这个作业在那个具体方面帮助我实现目标 能朝着软件工程师方向发展 参考文献与网址 C语言 ...

  10. SpringBoot 使用logback

    1.添加pom引用 <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback ...