发表于： 2017-03-30 17:04:56
1 1336
任务二
今天完成的事情
- 1.使用jq的mousedown事件完成滑动条颜色改变。
- 2.研究洗牌算法的不同实现方式，并选择其中较好的一种实现。
- 3.根据用户输入的数量生成相应的身份人数。
明天计划的事情
- 1.打乱身份的分配。
- 2.给身份分配页面添加样式。
- 3.开始任务三。
遇到的问题
1.问题导航栏颜色变换，昨天的思路是使用befor和after伪元素来实现，但是尝试后发现没有效果，在stackoverflow上搜索后得知input不支持before和after伪元素。所以只能换一种思路，利用jquery和css3来实现。
首先我们需要了解背景渐变这个属性
background-image:-webkit-linear-gradient(left ,@yellow 0%,@yellow 0%,#fff 0%, #fff 100%);
使用这个属性，可以控制背景色种不同颜色所占的比例。上面这行代码执行的效果是一半黄色，一半白色。
如图所示，黑色边框是加上去方便观看整体长度的，这个时候我们再添加一个box-shadow，高度要和input高度一样。
加完效果后如图：
实现了这个基本的样式后，再用js动态控制样式里的left值就可以。具体思路简单说一下，input里面有一个value，min，max值，计算length=max-min,然后用value/length*100得到一个百分比，再将这个百分比赋值给css的left属性。
完整代码：
input[type="range"]{
width:200px;
height:3px;
background-image:-webkit-linear-gradient(left ,#f22 0%,#f22 50%,#fff 50%, #fff 100%);
box-shadow:inset #ebb 0 0 5px}
$(function(){
var r = $('input');
r.on('mouseenter',function(){
var p = r.val();
r.on('click',function(){
p = r.val();
bg(p);
});
r.on('mousemove',function(){
p = r.val();
bg(p);
});
});
function bg(n){
r.css({
'background-image':'-webkit-linear-gradient(left ,#f22 0%,#f22 '+n+'%,#fff '+n+'%, #fff 100%)'
});
}
)收获
- 1.学会了鼠标的mouse相关事件，并利用这些事件实现滑动改变颜色的效果。
- 2.学会了jquery的事件绑定和事件解除。
- 3.学会jquery动态生成节点并添加节点。
js学习笔记（主要摘录自 阮一峰-js标准参考教程）
对象（二）
查看所有属性
查看一个对象的所有属性，可以使用keys方法。
delete
用来删除属性，即使删除一个不存在的属性也会返回true。
delete命令只能删除对象本身的属性，无法删除继承的属性
in运算符
in运算符用于检查对象是否包含某个属性，但是对于继承的属性它也会返回true。
for in循环遍历
for in循环用来遍历一个对象的全部属性。但是缺点是继承的属性也会遍历到。
obj.name="hello";
obj.year=5;
for(var i in obj){
console.log(obj[i]);
}
在这里，如果使用的是console.log(obj.i)会访问不到属性。因为使用”.“运算符来存取一个对象的属性时，属性名是用标识符表示的。而在JavaScript程序中，标识符必须被逐字地输入，它们不是一种数据类型，因此程序不能对其操作。 而使用数组[]表示法来存取一个对象的属性时，属性名是用字符串表示的。字符串是JavaScript的一种数据类型，因此可以在程序运行中操作并创建它们。
function Person(name) {
this.name=name;
}
Person.prototype.describe=function () {
return "Name: "+this.name;
}
var wang=new Person("王");
for(var key in wang){
console.log(wang[key]);
}
执行结束后会返回name和function这2个属性。如果只想遍历对象本身的属性，可以使用hasOwnProperty方法，在循环内部判断一下是不是自身的属性。
for(var key in wang){
if(wang.hasOwnProperty(key))
{
console.log(wang[key]);
}
}
执行结束后只返回王，其实tostring()等方法也是wang的继承属性，但是不会被遍历到，因为这个方法默认是不可遍历的。其实可以使用keys方法列出所有可枚举的属性保存在数组中，然后再遍历数组。
var arr=Object.keys(wang);
console.log(arr);
返回列表
评论