第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定

為什么我的沒有效果呢 不知道哪里錯了 求大神指導

HTML

<!DOCTYPE?html><html?lang="en"><head>
????<meta?charset="UTF-8">
????<title>canvas倒計時效果</title></head><body?style="height:?100%"><canvas?id="canvas"?style="height:?100%">
????當前瀏覽器不支持Canvas，請更換瀏覽器后再試</canvas><script?src="digit.js"></script><script?src="canvas%20daojishi.js"></script></body></html>



/////////js代碼///////////

var?canvas_width=1024;
var?canvas_height=768;
var?radius=8;
var?margin_top=60;
var?margin_left=30;

//const修飾的數據類型是指常類型，常類型的變量或對象的值是不能被更新的??//endtime?截至時間
//?const?endTime=new?Date(2016,10,7,0,0,0);?//new?date()?不能超過距離現在的99小時?因為小時設定只有兩位數?只能99小時?4天?月份0——11
//自動更新時間
var?endTime=new?Date();??//得到當前的時間
endTime.setTime(endTime.getTime()+3600*1000);??//設置當前時間（得到當前時間（毫秒）+1h（3600）s*1000轉換為毫秒）
var?curShowTimeSeconds=0;?//當前時間秒數為0

var?balls?=?[];??//小球數組
const?colors?=?["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

window.onload=function?()?{
????var?canvas=document.getElementById("canvas");
????//?canvas.width=canvas_width;
????//?canvas.height=canvas_height;
????var?context=canvas.getContext("2d");

????//屏幕自適應
????canvas_width=document.body.clientWidth;
????canvas_height=document.body.clientHeight;

????margin_left=Math.round(canvas_width/10);
????margin_top=Math.round(canvas_height/5);

????radius=Math.round((canvas_width*4/5)/108)-1;
????//render這個函數里面有個renderDigit()
????//依次繪制時分秒的每個數字，秒的個位數到區(qū)域左邊的距離是?93*(R+1)，
????//?并且本身一個數的寬度是15*(R+1)，
????//?所以得到了區(qū)域總寬為93*(R+1)+15*(R+1)=108*(R+1)，
????//?也就是window_width*4/5?=?108?*(R+1)；

????curShowTimeSeconds=getCurrentShowTimeSeconds();

????//?render(context);??//渲染?具體繪制??//替換為setInterval()
????//動畫效果的實現
????setInterval(
????????function?()?{
????????????render(context);??//在畫布上描述?//下面已完成
????????????update();??//數據的變化

????????},50
????)
};

//得到當前時間
function?getCurrentShowTimeSeconds()?{
????var?curTime=new?Date();?//取得當前的時間
????var?retTime=endTime.getTime()-curTime.getTime();?//倒計時=結束時間-當前時間???//getTime()??得到毫秒數
????retTime=Math.round(retTime/1000);??//round()?方法可把一個數字舍入為最接近的整數。//??ret/1000?把毫秒轉換為秒
????return?retTime>=0??retTime:0;??//判斷reTime是否>=0?如果是?則返回?ret?否則返回0
}

//數據變化
function?update()?{

????//1.時間變化
????var?nextShowTimeSeconds=getCurrentShowTimeSeconds();??//得到下一個時間
????//下一個時間分解??parseInt()解析一個字符串，并返回一個整數
????var?nextHours=parseInt(nextShowTimeSeconds/3600);
????var?nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);
????var?nextSeconds=nextShowTimeSeconds%60;
????//當前時間分解
????var?curHours=parseInt(curShowTimeSeconds/3600);
????var?curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
????var?curSeconds=curShowTimeSeconds%60;

????//2.添加小球位置的變化
?????if?(nextSeconds?!=?curSeconds)?{?//判斷下一個時間是否等于當前的時間//當不等于的時候

????????????//時間變化時，添加小球
????????????//小時
????????????if?(parseInt(curHours?/?10)?!=?parseInt(nextHours?/?10))?{
????????????????addBalls(margin_left,?margin_top,?parseInt(curHours?/?10));?//位置?X?Y?以及?相應的數字
????????????}
????????????if?(parseInt(curHours?%?10)?!=?parseInt(nextHours?%?10))?{
????????????????addBalls(margin_left?+?15?*?(radius?+?1),?margin_top,?parseInt(curHours?%?10))
????????????}

????????????//分鐘
????????????if?(parseInt(curMinutes?/?10)?!=?parseInt(nextMinutes?/?10))?{
????????????????addBalls(margin_left?+?39?*?(radius?+?1),?margin_top,?parseInt(curMinutes?/?10));
????????????}
????????????if?(parseInt(curMinutes?%?10)?!=?parseInt(nextMinutes?%?10))?{
????????????????addBalls(margin_left?+?54?*?(radius?+?1),?margin_top,?parseInt(curMinutes?%?10));
????????????}

????????????//秒鐘
????????????if?(parseInt(curSeconds?/?10)?!=?parseInt(nextSeconds?/?10))?{
????????????????addBalls(margin_left?+?78?*?(radius?+?1),?margin_top,?parseInt(curSeconds?/?10));
????????????}
????????????if?(parseInt(curSeconds?%?10)?!=?parseInt(nextSeconds?%?10))?{
????????????????addBalls(margin_left?+?93?*?(radius?+?1),?margin_top,?parseInt(curSeconds?%?10));
????????????}


????????????curShowTimeSeconds?=?nextShowTimeSeconds;??//當前的時間就是==下一個時間
????????}

????????updateBalls();??//更新所有的小球
????????console.log(balls.length);??//在控制臺打印balls的長度??//不停加長??//解決性能優(yōu)化
????}
???????
????????
function?updateBalls()?{
????//1.（1）小球運動值的變化
????for?(var?i=0;i<balls.length;i++){
????????balls[i].x+=balls[i].vx;
????????balls[i].y+=balls[i].vy;
????????balls[i].vy+=balls[i].g;
????????//（2）.碰撞檢測
????????if?(balls[i].y>=canvas_height-radius)?{
???????????balls[i].y?=?canvas_height?-?radius;
???????????balls[i].vy?=?-balls[i].vy?*?0.7;??//0.75摩擦系數?越大越遠
???????}
???????
????}
????//2.性能優(yōu)化?刪除小球
????var?cnt=0;??//小球數量
????for?(var?i=0;i<balls.length;i++)
????????//右邊緣>0?和?左邊緣<canvas.width?說明在畫布內?然后放在數組里
????????if(balls[i].x+radius>0?&&?balls[i].x-radius<canvas_width)
????????????balls[cnt++]?=?balls[i];

????while?(balls.length>Math.min(200,cnt)){??//保留200到cnt之間的最小值
????????balls.pop();??//pop()用于刪除并返回數組的最后一個元素

????}
}

function?addBalls(x,y,num)?{???//運動的彩色小球
????for?(var?i=0;i<digit[num].length;i++)??//記得沒有；
???????for?(var?j=0;j<digit[num][i].length;j++)??//記得沒有；
??????????if?(digit[num][i][j]==1){
??????????????//定義一個小球變化的數值
??????????????var?aBall={
??????????????????x:x+j*2*(radius+1)+(radius+1),
??????????????????y:y+i*2*(radius+1)+(radius+1),
??????????????????g:1.5+Math.random(),??//加速度?1.5-2.5?//?不同

??????????????????//pow()?方法可返回?x?的?y?次冪的值。在這里是?-1的N次冪??//?Math.ceil向上取整
??????????????????//?在X軸上的加速度?//Math.round()?四舍五入取整??//random()?0?~?1?之間?隨機數。
??????????????????//1-1000//取整?//取-1?或+1?//*4//-4至+4
??????????????????vx:?Math.pow(-1,?Math.ceil(Math.random()?*?1000))?*?4,

??????????????????vy:?-5,??//向上拋一點點

??????????????????//math.floor(x)對浮點數向下取整??//
??????????????????color:?colors[Math.floor(Math.random()?*?colors.length)]?//顏色數組
??????????????};
??????????????balls.push(aBall);??//把小球添加進小球數組里
??????????}
}

//在畫布上描述
function?render(cxt)?{

????//clearRect()?方法清空給定矩形內的指定像素??//畫布更新??//時間變化不重復
????cxt.clearRect(0,0,canvas_width,canvas_height);


????//當前的時間
????var?hours=parseInt(curShowTimeSeconds/3600);
????var?minutes=parseInt((curShowTimeSeconds-hours*3600)/60);??//（現在秒-當前秒?）/60??=分鐘
????var?seconds=curShowTimeSeconds%60;??//倒計時具體時間??//%60取余

????//定義時間的在畫布上的顯示位置
????renderDigit(margin_left,margin_top,parseInt(hours/10),cxt)?;??//小時?//十位數??//?第一位?//起始位置?x?y
????renderDigit(margin_left+15*(radius+1),margin_top,parseInt(hours%10),cxt);?//小時//個位數//第二位//
????
????renderDigit(margin_left+30*(radius+1),margin_top,10,cxt);??//冒號
????
????renderDigit(margin_left+39*(radius+1),margin_top,parseInt(minutes/10),cxt);?//分鐘//第三位
????renderDigit(margin_left+54*(radius+1),margin_top,parseInt(minutes%10),cxt);?//分鐘//第四位

????renderDigit(margin_left+69*(radius+1),margin_top,10,cxt);??//冒號

????renderDigit(margin_left+78*(radius+1),margin_top,parseInt(seconds/10),cxt);??//秒鐘//第五位
????renderDigit(margin_left+93*(radius+1),margin_top,parseInt(seconds%10),cxt);??//秒鐘//第六位

????//繪制小球
????for?(var?i=0;i<balls.length;i++){
????????cxt.fillStyle=balls[i].color;

????????cxt.beginPath();
????????cxt.arc(balls[i].x,balls[i].y,radius,0,2*Math.PI,true);
????????cxt.closePath();

????????cxt.fill();
????}
}

//具體的循環(huán)//規(guī)定何處填充顏色
function?renderDigit(x,y,num,cxt)?{??//傳入4個參數??X?Y?num?cxt
????cxt.fillStyle="#00ff00";??//定義好顏色
????for?(var?i=0;i<digit[num].length;i++)???//不能有；
?????????for?(var?j=0;j<digit[num][i].length;j++)?????//不能有；
????if?(digit[num][i][j]==1){?????//畫圓
????????cxt.beginPath();
????????cxt.arc(x+j*2*(radius+1)+(radius+1),y+i*2*(radius+1),radius,0,2*Math.PI);
????????cxt.closePath();
????????cxt.fill();
????}
}


正在回答

4 回答

你把11改成10就OK啦

0 回復 有任何疑惑可以回復我~

這個demo只能是四天之內的倒計時（小時為兩位數，因為digit為三維數組），new Date()時，月份是從0開始的，即1代表2月。你看看是不是這個問題，我就是這個問題，然后就解決啦

0 回復 有任何疑惑可以回復我~
#1

慕數據9493197 提問者

嗯嗯 是那里出的問題 已經解決了 不過 現在又出現了新的問題 內容不能自動撐開 不能自適應 你能幫我看看怎么回事嗎
2016-11-09 回復 有任何疑惑可以回復我~
#2

星空下的小孩 回復 慕數據9493197 提問者

WINDOW_WIDTH=document.documentElement.clientWidth || document.body.clientWidth; WINDOW_HEIGHT=document.documentElement.clientHeight || document.body.clientHeight; 這是兼容瀏覽器。 每次擴大或縮小屏幕后，刷新瀏覽器，你再看一下
2016-11-11 回復 有任何疑惑可以回復我~

編程不好，放棄了。。。我找了一上午才找到的問題，找到問題我已經很開心了，建議你吧那個日期如何調出來，能減出來一個正確的時間就好啦！

0 回復 有任何疑惑可以回復我~
#1

慕數據9493197 提問者

嗯嗯 我昨天發(fā)現問題了 可是沒來得及回復你 問題就是那個 const endTime = new Date(2016,10,6,0,0,0); 這里的日期不能超過距離現在日期的4天 不然就不能顯示了
2016-11-05 回復 有任何疑惑可以回復我~
#2

VicAura 回復 慕數據9493197 提問者

但是我也不會計算??！我alert(curTime);這個出來則是Sun Nov 06 2016 20：23：56 GMT+0880，我不知道var ret=endTime.getTime()-curTime.getTime();這段代碼返回的ret到底是什么東西了。所以就不會了！
2016-11-06 回復 有任何疑惑可以回復我~
#3

慕數據9493197 提問者 回復 VicAura

這是是截止的時間減去當前的時間 就等于倒計時的時間 截止時間那里因為設置的是兩位數 所以 不能超過離現在此時時間的4天 4*24=96小時 不然就會返回 00：00：00 就是設置的那個 ret
2016-11-07 回復 有任何疑惑可以回復我~
#4

VicAura 回復 慕數據9493197 提問者

00，所以不知道如何解決了。而且減出來是負的好幾萬這么一個值。所以在提取當前日期的時候，提取出來的值就是和我們自己設置的截止值無法相對應。
2016-11-07 回復 有任何疑惑可以回復我~
#5

慕數據9493197 提問者 回復 VicAura

{    var curTime=new Date();//取得當前的時間    var ret=endTime.getTime()-curTime.getTime();//結束時間-當前時間=倒計時   //getTime()  得到毫秒數。    ret=Math.round(ret/1000);//round() 方法可把一個數字舍入為最接近的整數。//  ret/1000 把毫秒轉換為秒    return ret>=0 ? ret:0;   //判斷ret是否>=0 如果是 則返回 ret 否則返回0；} 你有沒有用ret/1000 把毫秒轉換為秒
2016-11-07 回復 有任何疑惑可以回復我~
#6

VicAura 回復 慕數據9493197 提問者

function getCurrentShowTimeSeconds(){ var curTime=new Date(); var ret=endTime.getTime()-curTime.getTime(); ret=Math.round(ret/1000); alert(ret); //alert(curTime); /*if(ret>=0){ return ret; }else{ return 50; }*/ //return ret>=0 ?ret:0; } 用了，這個返回Ret的值就是-142818.所以不知道該如何設置了，我已經放棄這節(jié)課了
2016-11-07 回復 有任何疑惑可以回復我~
查看3條回復

我也沒有效果，我的效果是一直就顯示0，最后alert一下ret，減成了賦值，原來const endTime=new Date(2016,10,3,18,47,52);這個代碼我用DW用不成，而且var curTime=new Date();這個值取出來也不是標準的年月日時分秒，所以ret返回的一直是0。不知道你是不是和我一樣的問題。

0 回復 有任何疑惑可以回復我~
#1

慕數據9493197 提問者

我的是完全沒有反應 不知道哪里有問題
2016-11-04 回復 有任何疑惑可以回復我~
#2

慕數據9493197 提問者

我用了IE的試了一下 全部都是0 應該和你情況一樣 引用源代碼也是這樣 你是怎么解決的呢
2016-11-04 回復 有任何疑惑可以回復我~
#3

VicAura 回復 慕數據9493197 提問者

編程不好，放棄了。。。我找了一上午才找到的問題，找到問題我已經很開心了，建議你吧那個日期如何調出來，能減出來一個正確的時間就好啦！
2016-11-04 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

為什么我的沒有效果呢 不知道哪里錯了 求大神指導

我要回答 關注問題
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號