前端学习日记

Day 01—

实现开关功能用布尔值通过 if 语句判断。

var onOff=true;
if(onOff==true){
document.getElementById('a').style.display=‘ block';
onOff=false;
}else{
document.getElementById('a').style.display=‘ none';
onOff=true;
}

对于一组标签的单个属性设置，前面加 this.

Day 02—

做5个选项卡。点击效果：

for（var i=0; i<aLi.length;i++）{
      aLi[i].onclick=function(){
              for(var i=0; i<aLi.length;i++){
                   aLi[i].className=‘’}
                        this.className=‘action’;
                };
};

预览图：

图片发自简书App

HTML：

<input id="oBt1" type="text" value="请输入你的名字">
<input id="oBt2" type="button" value="提交">
<div id="oDiv"></div>

js：

var oBtn1 = document.getElementById("oBt1");
var oBtn2 = document.getElementById("oBt2");
var oDiv = document.getElementById("oDiv");

oBtn2.onclick=function(){
alert(oBtn1.value);

oDiv.innerHTML=oBtn1.value+'圣诞节快乐'；
};

Day 3—

做点选显示时，给<li>自定义索引属性，for循环控制单个显示，清空显示样式。

例：

HTML:

<ul id=oUl>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
</ul>

<div id=oDiv1><img src=""></div>
<div id=oDiv2><img src=""></div>
<div id=oDiv3><img src=""></div>
<div id=oDiv4><img src=""></div>
<div id=oDiv5><img src=""></div>

CSS:

div{
      display:none;}

Js:

var oDiv n = document.getElementById('oDivn');
var oUl = document.getElementById('oUl');
var aLi = document.getElementsByTagName('li');
var aImg = document.getElementsByTagName('img');
//获取元素

var arr=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];


for(var i=0; i<aLi.length; i++){
      aLi[i].index=i;

      for(var i=0; i<aLi.length; i++){
           oDivn.style.display='none';
}
    aLi[i].onclick=function(){
       aImg.src=arr[i];
       oDiv[this.index].style.dispaly='block'；
};
｝

Day 4—

利用 [i] 选择具体 div

var oDiv = document.getElementByTagName('div')[0];

innerHTML获取的类型都是 string

Day 5 –

NaN: not a number(运算或数据转换出错)。

函数传参：

<script>
         fn1(100);

         function fn1(a){
                 alert(a);
}

</script>

轮播图：

<div id=“box1”>
      <img src=“img/d1.jpg”>
      <a href=“#”> < </a>
      <a href=“#”> > </a>
      <ul>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
     </ul>
</div>

Day 6

利用splice（）函数对数组函数内容进行增加或删除。
1.替换：

var arr = ["前端","圣诞","热情","开心"];
arr.splice(1,2,"春节");
console.log(arr);

输出： ["前端","春节","热情","开心"];

2.添加：

var arr = ["前端","圣诞","热情","开心"];
arr.splice(1,0,"春节");
console.log(arr);

输出： ["前端","春节","圣诞","热情","开心"];

3.删除：

var arr = ["前端","圣诞","热情","开心"];
for (var i=0; i<arr.length; i++){
  var str = arr [i];
  if (str=="圣诞"){
    arr.splice(i,1);
    i--;
  }
console.log(arr);
}

输出： ["前端","热情","开心"];

4.字符串、数组的拼接：

var arr1=["前端","圣诞","热情","开心"];
var arr2=["后端","春节","冷漠","失落"];

var arr = arr1.concat(arr2);
console.log(arr);

输出：["前端","圣诞","热情","开心","后端","春节","冷漠","失落"];

5.将数组函数转换成字符串函数：

var arr = ["大家","春节","快乐"];
var str = arr.join("");
console.log(str);

输出：大家春节快乐

注：join函数里写间隔符（默认以 ， 间隔），不写则无间隔符。

6.数组排序：
(1)数字排序：

var arr = [1,5,88,6];
arr.sort(function (a,b){
  return a-b;
});
console.log(arr);

(2)字符串排序：

var arr = ["a","ab","ac","dd"];
arr.sort();
console.log(arr);

重要！！冒泡排序（将最大值一次放在数组最后）：

var arr = [23,4,72,67];
for (var j=0; j<arr.length-1; j++){
    for (var i=0; i<arr.length-j-1; i++){
          if (arr[i]>arr[i+1]){
          var temp = arr[i];
          arr[i] = arr[i+1];
          arr[i+1] = temp;
      }
    }
}
    console.log(arr);

Day 7

日期函数:
(1) 获取系统当前时间(根据格林尼治时间划分)

var date = new Date();

(2)
// 月份:0-11

var date = new Date(2018,1,13);

var year = date.getFullYear();
console.log(year);
//输出年

var month = date.getMonth();
console.log(month);
//输出月-1;

var adate = date.getDate();
console.log(adate);
//输出日

var day = date.getDay();
console.log(day);
//输出星期

var time = date.getTime();
//时间戳.

2.计时器

var timer = window.setInterval(function(){
    console.log(i);
},1000)

setInterval() 函数可重复执行
setTimeout() 函数只执行一次
注:创建计时器,时间间隔1秒.

例:倒计时

HTML:

<div id="time">60</div>

CSS:

#time{
          width:200px;
          height:100px;
          margin:0 auto;
}

JS:

var date = document.getElementById("time");
var value = time.innerHTML;
var timer = setInterval(function(){
      value - = 1;
      time.innerHTML = value;
      if(value<=0){
            clearInterval(timer);
      }
},1000);

Day 8

获取计算后样式(可获得行间 内联样式):

var style = getComputedStyle(标签名);
var xxx = style.xxx;  //属性

另(IE):

var abc = 标签名.currentStyle.属性名;

获得计算后样式函数例子:

function getCss(obj,name){
    if(wrap.currentStyle){
      return obj.currentStyle[name];
  }else{
      return getComputedStyle(obj)[name];
  }
}


var value = getCss(wrap,"left");

计时器的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大图滚动</title>
    <style>
        #wrap{
            width:500px;
            height: 200px;
            border:1px solid red;
            overflow: hidden;
            margin:0 auto;
            position: relative;
        }
        ul{
            width:2500px;
            position: absolute;

        }
        ul::after{
            content: '';
            display: block;
            clear: both;
        }
        li{
            width: 500px;
            height: 200px;
            float: left;
            background-color: red;
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul>
            <li>第一张</li>
            <li>第二张</li>
            <li>第三张</li>
            <li>第四张</li>
            <li>第五张</li>
        </ul>
    </div>
</body>
<script src="getCss.js"></script>
<script>
    var ul = document.getElementsByTagName("ul")[0];
    var wrap = document.getElementById("wrap");
    move();
    function move(){
        var left = getCss(ul,"left");
        left = left.replace("px","");
        var timer = setInterval(function (){
            left --;
            ul.style.left = left + "px";
            },10);
    }

</script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342