Skip to content

Commit

Permalink
task2_17 完成
Browse files Browse the repository at this point in the history
  • Loading branch information
@yaowen369
yaowen369 committed Feb 12, 2017
1 parent 29f6776 commit ac8cbed
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 81 deletions.
10 changes: 3 additions & 7 deletions 2016_spring/task2_17/src/index_17.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<title>IFE task 17</title>
<link href="../../common/css/yw_css_reset.css" type="text/css" rel="stylesheet"/>
<link href="style_17.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<fieldset id="form-gra-time">
Expand All @@ -21,12 +20,7 @@

<!--总的高度是600,宽度是 1280-->
<div id="bar_wrapper" class="aqi-chart-wrap">
<!--<div id="hintId0" class="aqi-hint" style="left: 590px; bottom: 252px;"><p>2016-01-01</p><p>AQI:242</p></div>
<div class="aqi-bar" style="height: 242px; width: 1280px; background-color: #1db199; left: 0px;" onmouseover="mouseOver(0)" onmouseout="mouseOut(0)"/>-->
</div>


<!--所以这里的位置是属于 550-600之间-->
<!--所以这里的位置是属于 550-600之间-->
<!--<p id="aqi-title">黑龙江省01-03月每日空气质量报告</p>-->

<!-- bottom 的值是 aqi－bar 的height＋10，本身height为40，所以这里高度最高也就是550-->
Expand All @@ -36,8 +30,10 @@
<!--这里的高度最高是500-->
<!--<div class="aqi-bar" style="height: 100px; width: 20px; background-color: #999; left: 50px;" onmouseover="mouseOver(count)" onmouseout="mouseOut(count)"/>-->

<!--demo示例如下-->
<!--<div id="hintId0" class="aqi-hint" style="left: 0px; bottom: 390px;"><p>2016-01-01</p><p>AQI:380</p></div>-->
<!--<div class="aqi-bar" style="height: 380px; width: 86px; background-color: #847146; left: 0px;" onmouseover="mouseOver(0)" onmouseout="mouseOut(0)"/>-->
</div>

<script src="task_17.js"></script>
</body>
Expand Down
11 changes: 0 additions & 11 deletions 2016_spring/task2_17/src/style_17.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,6 @@ body{
color: #F2F2F2;
}

/*#form-gra-time .day-no-selected{
background-color: white;
color: black;
}*/

#form-gra-time label:first-of-type{
margin-left: 100px;
Expand All @@ -79,13 +75,6 @@ body{
}


.aqi-chart-wrap div{
/*width: 20px;
background-color: red;*/
/*height: 100px;*/
}


.aqi-chart-wrap{
position: relative;
width: 100%;
Expand Down
105 changes: 50 additions & 55 deletions 2016_spring/task2_17/src/task_17.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,13 @@ function length(obj){
return count;
}

var colors = ['#16324a', '#24385e', '#393f65', '#4e4a67', '#5a4563',
'#edae9e', '#c1b9c2', '#bec3cb', '#9ea7bb', '#99b4ce'];

//得到一个随机的颜色值
function randomColor(){
var color = "#"+Math.floor(Math.random()*16777215).toString(16);
return color;
// var color = "#"+Math.floor(Math.random()*16777215).toString(16);
return colors[Math.ceil(Math.random()*10)-1];
}

//以下两个函数用语随机模拟生成测试数据
Expand All @@ -68,8 +71,8 @@ function randomBuildData(seed){
var returnData = {};
var dat = new Date("2016-01-01");
var datStr = "";
// const N = 92;
const N = 1;
const N = 92;
// const N = 2;
for (let i=0; i<N; i++){
datStr = getDateStr(dat);
returnData[datStr] = Math.ceil(Math.random() * seed);
Expand Down Expand Up @@ -104,6 +107,8 @@ const barMaxHeight = 50;
//初始化我们的数据结构
function initDataStruct(){
for (var keyCity in aqiSourceData){
var cityDataLength = length(aqiSourceData[keyCity]);

//生成 "日" 的数据
var dayObject = new Object();
for (var keyDate in aqiSourceData[keyCity]){
Expand All @@ -116,40 +121,46 @@ function initDataStruct(){
var countValue = 0;
var countDay = 0;
var countWeek = 1;
var oldMonth = 0;
var oldMonth = -1;

var firstGetMonth = false;

for (var keyDate in aqiSourceData[keyCity]){
// console.log("keyCity=" + keyCity +"\t keyDate=" + keyDate);
countValue += aqiSourceData[keyCity][keyDate];
countDay++;
var dat = new Date(keyDate);
// Date dat = new Date("2016-01-03");

if (!firstGetMonth){
if (oldMonth === -1){
oldMonth = dat.getMonth();
firstGetMonth = true;
}

if (dat.getMonth() != oldMonth){ //该周还没计算完成呢，就到下一月了，那么剩余到这几天也算是单独一周
var keyStr = dat.getFullYear() + "-" + (dat.getMonth()+1) + "月第" + countWeek + "周";
weekObject[keyStr] = countValue / countDay;
var keyStr = dat.getFullYear() + "-" + (oldMonth+1) + "月第" + countWeek + "周";
weekObject[keyStr] = Math.ceil(countValue / countDay);

oldMonth = dat.getMonth();
countWeek = 1;
countValue = 0;
countDay = 0;
continue;
}
}

countValue += aqiSourceData[keyCity][keyDate];
countDay++;

if (dat.getDay() === 6){
var keyStr = dat.getFullYear() + "-" + (dat.getMonth()+1) + "月第" + countWeek + "周";
weekObject[keyStr] = countValue / countDay;
weekObject[keyStr] = Math.ceil(countValue / countDay);
countWeek++;
countValue = 0;
countDay = 0;
}

//连一周都没满的情况
if (countDay === cityDataLength){
var keyStr = dat.getFullYear() + "-" + (dat.getMonth()+1) + "月第" + countWeek + "周";
weekObject[keyStr] = Math.ceil(countValue / countDay);
}
}

//生成 "月" 的数据
Expand All @@ -166,12 +177,19 @@ function initDataStruct(){
countDay2++;
countValue2 += aqiSourceData[keyCity][keyDate];

if (dat2.getMonth() != oldMonth){
var keyStr = dat2.getFullYear() +"-" + (oldMonth+1);
monthObject[keyStr] = countValue2/countDay2;
countDay2 = 0;
countValue2 = 0;
oldMonth = dat2.getMonth();
if (dat2.getMonth() != oldMonth2){
var keyStr = dat2.getFullYear() +"-" + (oldMonth2+1);
monthObject[keyStr] = Math.ceil(countValue2/countDay2);
//我们要开始计算新的一个月的
countDay2 = 1;
countValue2 = aqiSourceData[keyCity][keyDate];
oldMonth2 = dat2.getMonth();
}

//只存在一个月的情况,此时已经循环到最后一个了
if (cityDataLength === countDay2){
var keyStr = dat2.getFullYear() +"-" + (oldMonth2+1);
monthObject[keyStr] = Math.ceil(countValue2/countDay2);
}
}

Expand Down Expand Up @@ -205,6 +223,7 @@ function initUi(){
function selectChange(value){
console.log("选中 " + value);
selectCity = value;
calacAndDrawBar();
}

function dateChange(value){
Expand Down Expand Up @@ -233,6 +252,8 @@ function dateChange(value){
break;
default:
}

calacAndDrawBar();
}

//开始柱形图的绘制和计算
Expand All @@ -243,8 +264,9 @@ function calacAndDrawBar(){
var barCount = length(sourceData);
var barWidth = barWrapperTotalWidth / (barCount * 2 - 1);
console.log("barCount=" + barCount + "\t barWidth=" + barWidth);
barWrapper.innerHTML = "";

// barWrapper.innerHTML += ("<p id=\"aqi-title\">") + getTitleText() + "</p>";
barWrapper.innerHTML += ("<p id=\"aqi-title\">") + getTitleText() + "</p>";

var count = 0;

Expand All @@ -269,16 +291,7 @@ function calacAndDrawBar(){
+ "<p>AQI:" + (sourceData[key]) + "</p>" + "</div>");

console.log(hintStr);
// barWrapper += hintStr;

// barWrapper.innerHTML += ("<div" + "id=\"" + ("hintId" + count) + "\""
// + " class=\"aqi-hint\" "
// + "style=\"left: " + hintLeftPosition + "px; "
// + "bottom: " + (sourceData[key] + 10) + "px;\">"
// + "<p>" + (key) + "</p>"
// + "<p>AQI:" + (sourceData[key]) + "</p>" + "</div>");


barWrapper.innerHTML += hintStr;

var barStr = ("<div class=\"aqi-bar\" style=\"height: "
+ sourceData[key] +"px;" + " width: " + Math.ceil(barWidth) +"px; "
Expand All @@ -290,25 +303,15 @@ function calacAndDrawBar(){
console.log(barStr);
barWrapper.innerHTML += barStr;


// barWrapper.innerHTML += ("<div class=\"aqi-bar\" style=\"height: "
// + sourceData[key] +"px;" + " width: " + Math.ceil(barWidth) +"px;"
// + "background-color: " + randomColor() + ";"
// + "left:" + barLeftPosition + "px;\"" +
// + "onmouseover=\"mouseOver(" + count + ")\""
// + "onmouseout=\"mouseOut(" + count + ")\""
// + "/>");

var logMsg = "left=" + barWidth*2*count + " count=" + count;
// console.log(logMsg);
count++;


}


// barWrapper = "<div id=\"hintId0\" class=\"aqi-hint\" style=\"left: 590px; bottom: 252px;\"><p>2016-01-01</p><p>AQI:242</p></div>"
// + "<div class=\"aqi-bar\" style=\"height: 242px; width: 1280px; background-color: #1db199; left: 0px;\" onmouseover=\"mouseOver(0)\" onmouseout=\"mouseOut(0)\"/>";

// barWrapper = "<div class=\"aqi-bar\" style=\"height: 242px; width: 1280px; background-color: #1db199; left: 0px;\" onmouseover=\"mouseOver(0)\" onmouseout=\"mouseOut(0)\"/>";
console.log("barWrapper.innerHTML = " + barWrapper.innerHTML);

}

//当鼠标移动到物体上面时
Expand All @@ -330,20 +333,12 @@ function getTitleText(){
return selectCity + "01-03月每" + selectDate + "空气质量报告";
}

function test(){
count = 1;
var idName = "hintId" + count;
console.log("test() count = " + count + "\t idName=" + idName);
document.getElementById(idName).style.visibility = "hidden"
}

//开始 整个流程
function start(){
initDataStruct();
initUi();
// calacAndDrawBar();
console.log("1111111111111");
console.log(document.getElementById("bar_wrapper").innerHTML);
initDataStruct();
initUi();
calacAndDrawBar();
}


Expand Down
32 changes: 24 additions & 8 deletions 2016_spring/test/liaoxuefeng/first_demo/first_js.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,20 +31,36 @@
//8 };


var a = {a:1,b:2,c:3,d:4};
//var a = {a:1,b:2,c:3,d:4};
//
//function length(obj){
// var count = 0;
// for (var i in obj){
// if (obj.hasOwnProperty(i)){
// console.log( i +" = " + obj[i]);
// count++;
// }
// }
// return count;
//}
//
//console.log(length(a));

function length(obj){
function test(){
var count = 0;
for (var i in obj){
if (obj.hasOwnProperty(i)){
console.log( i +" = " + obj[i]);
count++;
while(count < 10000){
var num = Math.ceil(Math.random()*10)-1;
if (num>=10 || num<0){
console.log("num = " +num);
}
count++;
}
return count;
console.log("over ");
}

console.log(length(a));
test();





0 comments on commit ac8cbed

Please sign in to comment.