发表于: 2017-03-29 22:54:02

1 1216


任务二

今天完成的事情

  1. 1.学习input type=range标签,并自定义样式,完成psd中的效果
  2. 2.学习input的value属性,并对该属性进行读写。
  3. 3.判断用户输入的值并使用alert进行弹窗。
  4. 4.js学习笔记整理-温故而知新。

明天计划的事情

  1. 1.完成身份分配功能。
  2. 2.学习并实现洗牌算法。

遇到的问题

1.今天遇到的问题主要是滑动条,不知道如何实现,查阅资料后发现html5里面直接有一个这样的标签,并且里面有内置的min,max,step等很方便的属性。主要的问题提是样式太过简陋,需要重新写css样式覆盖,大致的代码如下:

input[type=range
-webkit-appearance: none;//更改默认样
overflow: hidden;
 &::-webkit-slider-runnable-track {
   height: 4px;//设置滑动条的颜色,高度,圆角等
   background: rgba(252,198,113,1);
}
&::-moz-range-progress {//兼容性写法
height: 4px;
background: rgba(252,198,113,1);
}
&::-webkit-slider-thumb {//滑块的样式
-webkit-appearance: none
height: 36px;
width: 61px
}
}
  1. 其中,滑块,滑动条元素都是以伪元素的形式存在与input标签中,滑动条是

    ::-webkit-slider-runnable-track

    滑动按钮是

    ::-webkit-slider-thumb

    解决这些后,还有一个问题是效果图上的效果是按钮左侧颜色不变,右侧颜色变淡,这个怎么实现用百度找了半天找不到,结果google第一页就有。看来还是google好,大致方法是利用滑块的before和after这两个伪元素实现。给滑块一个相对定位,before和after绝对定位,宽度给一个特别长的宽度,然后再给父级设置over-flow:hidden。

  2. 具体代码如下:

  3. input[type="range"]::-webkit-slider-thumb:before,
    input[type="range"]::-webkit-slider-thumb:after
    {
    position: absolute;
    top: 3px;
    width: 2000px; /* 外层有用over-flow:hidden */
     height: 4px;
    content:"";
    pointer-events: none; /* 让鼠标可以点击 */
     transition:.2s;
    }

    input[type="range"]::-webkit-slider-thumb:before{
    left: -1997px;
    background: #f22;
    }
    input[type="range"]::-webkit-slider-thumb:after {
    left: 10px;
    background: #edc;
    }

    收获

  1. 1.学会了input type=range这一标签。
  2. 2.学会了自定义滑动条。
  3. 3.学会使用禅道新建项目,关联需求,创建和指派任务。



js学习笔记(主要摘录自 阮一峰-js标准参考教程)

对象

生成方法

对象是一种无序的数据集合,由若干个“键值对”(key-value)构成。
生成对象有以下几种方法

var o1 = {};
var o2 = new Object();
var o3 = Object.create(Object.prototype);

一般来说,第一种采用大括号的写法比较简洁,第二种采用构造函数的写法清晰地表示了意图,第三种写法一般用在需要对象继承的场合。

键名

对象的所有键名都是字符串,所以加不加引号都可以。如果键名是数值,会被转为字符串。

表达式还是语句

{foo:123}是一个表达式还是语句?
首先你需要了解label标签。label标签的写法如下:

labeltest:
for(var i=0;i<5;i++){
console.log("i:"+i);
for(var j=0;j<3;j++)
{
console.log("j:"+j);
if(j===2){

break labeltest;
}
}
}

label一般和循环一起使用。所以对于{foo:123}这种写法,可能有两种含义。第一种可能是,这是一个表达式,表示一个包含foo属性的对象;第二种可能是,这是一个语句,表示一个代码区块,里面有一个标签foo,指向表达式123。为了避免这种歧义,JavaScript规定,如果行首是大括号,一律解释为语句(即代码块)。如果要解释为表达式(即对象),必须在大括号前加上圆括号。
所以{toString: function(){return "hehe"}}这种写法会报错。

label

主要是用来给代码块命名的,后面的是一段代码块,但是在实际应用中,可以用来跳出多重循环嵌套。

for(var i=0;i<5;i++){
console.log("i:"+i);
for(var j=0;j<3;j++)
{
console.log("j:"+j);
if(j===6){

break;
}
}
}
labeltest:
for(var i=0;i<5;i++){
console.log("i:"+i);
for(var j=0;j<3;j++)
{
console.log("j:"+j);
if(j===2){

break labeltest;
}
}
}
console.log("hello");

可以对比一下2种跳出循环的差异。

读取属性

属性的读取可以通过obj["key"]的方式读取,但是需要注意的是属性名要加""号,否则会被当作变量,如果是数字则会被转变成字符串。
数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。

检查变量是否声明

如果读取一个不存在的键,会返回undefined,而不是报错。可以利用这一点,来检查一个全局变量是否被声明。
`javascript if ('a' in window) { // 变量 a 声明过 }
注意直接使用(a)(window.a)来判断可能会出错,因为a的值可能是空。


返回列表 返回列表
评论

    分享到