坚持#第84天~学会运用时间！

2016-11-2
完成了：
（1）你的梦想是什么？变得更优秀！
（2）今天你为你的梦想做了什么？学会运用时间！
（3）你是否离你的梦想更近了？是的！
（4）完成了考试复习一部分；
（4）弹幕的项目 开干---完成；
（5）看了30天；
（6）收获:
关键:思路是透明的盒子套在视频上,盒子里面装文字
一开始这个盒子是隐藏的，点击弹幕之后才有，这就实


现了弹幕的开关
------------------------------------------------------------------
<embed />是插入视频，显示不支持该插件怎么办？
<video autoplay="auto"></video>也是插入视频
------------------------------------------------------------------
写了<a></a>标签别忘了要去掉下划线:text-


decoration:none;
href="javascript:void(0)"
------------------------------------------------------------------
图片重复可用overflow:hidden;
------------------------------------------------------------------
定位：先写相对定位于书,小本子上写绝对定位,然后在


小本子上写bottom和right就行啦
------------------------------------------------------------------
想要点击的时候有效果,就加个:active{box-shadow}
------------------------------------------------------------------
关于透明度的知识:opacity会把字也变透明,要做弹幕


效果就要用到另外一个透明度
background:rgba(0,0,0,0.4);最后一个参数就是透明


度
------------------------------------------------------------------
$里面点击事件是click(属于Jquery),而获得ID的点击


事件是onclick(属于JS)
------------------------------------------------------------------
给盒子添加一个这个属性就能打字了


contenteditable="true",简直就是神奇,不给高度给


padding能居中
------------------------------------------------------------------
使用$("").val();针对的是input输入框,而针对div的


输入框没有效果;针对DIV的输入框用$("").html();
------------------------------------------------------------------
要在里面(就是下面的dm_show)添加一个div(把文字添


加进去)
var _label = $("<div>"+content+"</div>")；
------------------------------------------------------------------
.append();是添加,能理解吧,把要添加的东西丢到


append()里面
$(".dm_show").append();
------------------------------------------------------------------
定义方法：定义一个弹幕移动的方法,记得要调用方法(


点击.btn的时候调用)
一：function init_screent(){}
二：var RandomColor = function(){}
------------------------------------------------------------------
找到每一个弹幕都执行这个方法
$(".dm_show").find("div").each(function(){});
------------------------------------------------------------------
视频的宽度-这个div盒子的宽度=剩下的宽度
var _left = $(".dm").width()-$(this).width();
------------------------------------------------------------------
产生盒子上下之间的距离
var _top = 0;
_top += 40;
------------------------------------------------------------------
设置文字的位置，此乃“接通写法”
$(this).css({left:_left,top:_top});
------------------------------------------------------------------
文字超出来了,添加判断,大于谁?var一个_height嘛.让


它等于0
var _height = $(".dm").height();
if(_top>_height){_top=0;}
------------------------------------------------------------------
让文字滚动.animate给它加上一个动画, 可以理解吧, 


也用接通写法,将之前正数left值变为负数(每过3000ms


执行一次下面的方法)
$(this).animate({left:"-"+_left


+"px"},3000,function(){
$(this).remove();
});
------------------------------------------------------------------
文字滚动出去了？给视频添加一个overflow:hidden;
------------------------------------------------------------------
2016-8-31_3:36:00讲到引用css的animate
2016-8-31_3:44:00讲到引用css的animate多种动画效


果(随机数组下标)
------------------------------------------------------------------
定义文字的随机色(思维:利用Math.random和


rgba),rgba最大为255且为整数
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
------------------------------------------------------------------
返回rgb并跳出来
return "rgb("+r+","+g+","+b+")";
------------------------------------------------------------------
设置文字的位置, 此乃“接通写法”,调用随机色
$(this).css


({left:_left,top:_top,color:RandomColor()});
------------------------------------------------------------------