发表于: 2017-03-29 22:54:02
1 1218
任务二
今天完成的事情
- 1.学习input type=range标签,并自定义样式,完成psd中的效果
- 2.学习input的value属性,并对该属性进行读写。
- 3.判断用户输入的值并使用alert进行弹窗。
- 4.js学习笔记整理-温故而知新。
明天计划的事情
- 1.完成身份分配功能。
- 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
}
}
其中,滑块,滑动条元素都是以伪元素的形式存在与input标签中,滑动条是
::-webkit-slider-runnable-track
滑动按钮是
::-webkit-slider-thumb
解决这些后,还有一个问题是效果图上的效果是按钮左侧颜色不变,右侧颜色变淡,这个怎么实现用百度找了半天找不到,结果google第一页就有。看来还是google好,大致方法是利用滑块的before和after这两个伪元素实现。给滑块一个相对定位,before和after绝对定位,宽度给一个特别长的宽度,然后再给父级设置over-flow:hidden。
具体代码如下:
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.学会了input type=range这一标签。
- 2.学会了自定义滑动条。
- 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的值可能是空。
评论