博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
html+css+javascript学习记录1
阅读量：6593 次
发布时间：2019-06-24

本文共 8424 字，大约阅读时间需要 28 分钟。

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

  1. 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 += "
    • 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. 仿导航条效果
        (1) 鼠标悬停时切换展示内容
        (2) 自动轮播展示内容
        (3) 清除自动展示
        图片描述

      html code:

          导航条效果

      css code:

      js code:

      转载地址：http://amcio.baihongyu.com/

      你可能感兴趣的文章
      前端05.js入门之BOM对象与DOM对象。
      查看>>
      keepalived双机热备原理及实例部署LVS+keepalived
      查看>>
      曲线学习PyQt5方案一
      查看>>
      OpenCV学习】矩阵运算和操作2
      查看>>
      nginx+ffmpeg搭建rtmp转播rtsp流的flash服务器
      查看>>
      关于在arm裸板编程时使用printf问题的解决方法
      查看>>
      2015 上半年 JavaScript 使用统计数据
      查看>>
      《Python算法教程》——1.6 如果您感兴趣
      查看>>
      深度解析Java8 – AbstractQueuedSynchronizer的实现分析（下）
      查看>>
      SSH原理与运用（一）：远程登录
      查看>>
      React组件: 提取图片颜色
      查看>>
      3D应用开发中的欧拉角和旋转矩阵
      查看>>
      RxJava2.0的初学者必备教程(九)
      查看>>
      记一次omi的项目之旅
      查看>>
      Android API级别、代号、发布时间及平台亮点整理
      查看>>
      LLDP(链路层发现协议)
      查看>>
      Ubuntu14 添加程序启动
      查看>>
      我的友情链接
      查看>>
      windows网络安全以及常见网络***方式
      查看>>
      警告 初始化默认驱动器时出错“找不到运行 Active Directory Web 服务的默认服务器。”...
      查看>>
      喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
      当前时间: 2025-01-23 17:52:56   当前IP: 18.225.209.76   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
      强烈建议你试试无所不能的CHAT-GPT，快点击我
      强烈建议你试试无所不能的CHAT-GPT，快点击我