发表于： 2017-02-19 20:46:12
3 1145
好好学习，天天向上
今天完成的事情：着重学习了css的页面呈现和DOM。
用html+css完成大概的布局：
html 部分：
<body>
<div id="mydiv"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<input class="buttn" value="开始闪" onclick="flash(1)" type="button">
<input class="buttn" value="结束闪" onclick="flash(0)" type="button"></div>
css 部分：
* {
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
}
#mydiv div{
float: left;
background-color: orange;
padding: 15%;
border-radius: 0.4em;
margin: 2px;
}
#mydiv{
width: 30%;
height: 100%;
clear: both;
}
.buttn{
float: left;
border: solid 1px orange;
border-radius: 0.2em;
text-align: center;
color: orange;
font: small-caps 12px/1.5em "宋体",sans-serif;
height: 25px;
margin-left: 1px;
margin-top: 5px;
width: 93%;
}
使用js大致完成随机获取颜色：
function startf(){
for(var i=0;i<num.length;i++){
num[i].style.backgroundColor="orange";
}
arry[0] = Math.floor(Math.random()*9);
do{
arry[1] = Math.floor(Math.random()*9);
}while (arry[0] == arry[1]);
do {
arry[2] = Math.floor(Math.random()*9);
}while (arry[2] == arry[0] || arry[2] == arry[1]);
for(var i=0;i<arry.length;i++) {
num[arry[i]].style.backgroundColor = getRandomColor();
}
mtag=setTimeout("startf()",1000);
}
function getRandomColor()
{
return '#'+(function(color){
return(color+='0123456789abcdef'[Math.floor(Math.random()*16)])&&
(color.length == 6)? color : arguments.callee(color);})("")
}
明天计划的事情：
1.解决遇到的浏览器兼容问题并记录下来。
2.完成任务一的按钮部分，自己的代码很小白，得看师兄的日报代码加以改进。
3.学习闭包调用
遇到的问题：
1.给div设置%高度无效。解决：在外层的父级元素设置分比高度样式。
2.去除buttn样式
3.不同浏览器对空白节点处理不同。
收获：
很多html+css的基础
js的一些基本操作
以往都是边看边做，其实真正完全自己写，很多都变成了熟悉的陌生人。
返回列表
评论