12
返回列表 發帖
3ldk

Rank: 2Rank: 2
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2015-3-4 16:40 | 只看該作者

HTML5加左<!DOCTYPE HTML>反而有問題

本帖最後由 3ldk 於 2015-3-4 18:35 編輯

這是一個非常簡單, 上網copy的example
如果成功, 會見到一個div跟著個畫面走
以下依個example, 係會不成功的
成功與不成功, 差別只在於有無<!DOCTYPE HTML>
即係話, 如果delete左<!DOCTYPE HTML>, 所有野都會work
有<!DOCTYPE HTML>果陣, 打開console, debugger, 睇唔到有任何javascript既error, 亦無警告話有任何驗證問題

何解有<!DOCTYPE HTML>反而有問題? 問題出在哪?
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <body>

  8. <div id="iRFloating" style="position:absolute;top:100;left:1000;">
  9. content
  10. </div>

  12. ppppppppp<br/>
  13. ppppppppp<br/>
  14. ppppppppp<br/>
  15. ppppppppp<br/>
  16. ppppppppp<br/>
  17. ppppppppp<br/>
  18. ppppppppp<br/>
  19. ppppppppp<br/>
  20. ppppppppp<br/>
  21. ppppppppp<br/>
  22. ppppppppp<br/>
  23. ppppppppp<br/>
  24. ppppppppp<br/>
  25. ppppppppp<br/>
  26. ppppppppp<br/>
  27. ppppppppp<br/>
  28. ppppppppp<br/>
  29. ppppppppp<br/>
  30. ppppppppp<br/>
  31. ppppppppp<br/>
  32. ppppppppp<br/>
  33. ppppppppp<br/>
  34. ppppppppp<br/>
  35. ppppppppp<br/>
  36. ppppppppp<br/>
  37. ppppppppp<br/>
  38. ppppppppp<br/>
  39. ppppppppp<br/>
  40. ppppppppp<br/>
  41. ppppppppp<br/>
  42. ppppppppp<br/>
  43. ppppppppp<br/>
  44. ppppppppp<br/>
  45. ppppppppp<br/>
  46. ppppppppp<br/>
  47. ppppppppp<br/>
  48. ppppppppp<br/>
  49. ppppppppp<br/>
  50. ppppppppp<br/>
  51. ppppppppp<br/>
  52. ppppppppp<br/>
  53. ppppppppp<br/>
  54. ppppppppp<br/>
  55. ppppppppp<br/>
  56. ppppppppp<br/>
  57. ppppppppp<br/>
  58. ppppppppp<br/>
  59. ppppppppp<br/>
  60. ppppppppp<br/>
  61. ppppppppp<br/>
  62. ppppppppp<br/>
  63. ppppppppp<br/>
  64. ppppppppp<br/>
  65. ppppppppp<br/>
  66. ppppppppp<br/>
  67. ppppppppp<br/>
  68. ppppppppp<br/>
  69. ppppppppp<br/>
  70. ppppppppp<br/>
  71. ppppppppp<br/>
  72. ppppppppp<br/>
  73. ppppppppp<br/>
  74. ppppppppp<br/>



  78. <script>
  79.   var adWidth = 160;
  80.   var nowX = 1000;
  81.   var nowY = 100;
  82.   fad_style = document.getElementById('iRFloating').style;
  83.   function fadIni()
  84.   {
  85.       innerWidth = document.body.clientWidth;
  86.       innerHeight = document.body.clientHeight;

  88.       edge = (innerWidth-1000)/2;

  90.       if( edge > adWidth )
  91.       {
  92.           posX = edge + 1000;
  93.       }
  94.       else
  95.       {
  96.           posX = innerWidth-adWidth;
  97.       }

  99.       posY = 100;

  101.   }
  102.   function fadRefresh()
  103.   {
  104.       offsetX = posX + document.body.scrollLeft - nowX;
  105.       offsetY = posY + document.body.scrollTop - nowY;
  106.       nowX += offsetX / 5;
  107.       nowY += offsetY / 5;
  108.       fad_style.left = nowX;
  109.       fad_style.top = nowY;

  111.       floatID = setTimeout('fadRefresh()', 20 );
  112.   }

  114.   function fadStart()
  115.   {
  116.       fadIni();
  117.       window.onresize=fadIni;
  118.       fadRefresh();
  119.   }

  121.   fadStart();
  122. </script>
  123. </body>
  124. </html>
複製代碼
收藏 分享

0

chi251155

Rank: 2Rank: 2
2#
發表於 2015-3-4 16:58 | 只看該作者
落左doctype要係head入面第一句加番meta charset, 因為你有中文, 好大機會parse錯

TOP

KinChungE

Rank: 4Rank: 4Rank: 4Rank: 4
3#
發表於 2015-3-4 16:59 | 只看該作者
top:100;left:1000;

where is the unit?

TOP

神秘二代

Rank: 2Rank: 2
4#
發表於 2015-3-4 17:08 | 只看該作者
本帖最後由 神秘二代 於 2015-3-4 17:14 編輯

d script放在html tag外面...笑了...正常是放在head中的.....如真的不能才放在body之後, 但絕不是放在html外面= =....
variable define沒用var....看來你是新手吧...傳送門給你
http://www.w3schools.com/html/
http://www.w3schools.com/js/

另外你這個不算是html5...因為沒有用到html5的feature......

TOP

justiceice

Rank: 3Rank: 3Rank: 3
5#
發表於 2015-3-4 17:24 | 只看該作者
Quirks mode 與 Strict mode 分別

TOP

justiceice

Rank: 3Rank: 3Rank: 3
6#
發表於 2015-3-4 17:28 | 只看該作者
另外你要做嘅野根本可以完全用 CSS 做, 一個 position: fixed 已經搞掂, 唔駛 Javascript
http://caniuse.com/#feat=css-fixed

未打好基礎就唔好亂炒 code, 網上有太多過時資訊, 只適合二十世紀使用

TOP

3ldk

Rank: 2Rank: 2
7#
發表於 2015-3-4 18:44 | 只看該作者
其實我試過放係body入面, 不過都係唔得, 所以我先直接跟example放係html出面

js沒有var理應沒問題, 就算真係有問題, 照理應該會有symbol not found之類既error

js入面沒有px這類unit, 而且該attribute又真係一個int, 所以唯有比數字佢

不過, 我都照左建議, 改返晒, 加左meta, cut晒中文, 加埋var, 放入body, 但一樣係唔work, 可見並非以上所講的問題


另外我做緊既野其實用css做唔到, 所以一定要用js做

TOP

minazuki

Rank: 3Rank: 3Rank: 3
8#
發表於 2015-3-4 19:04 | 只看該作者
  1. fad_style.left = nowX+"px";
  2. fad_style.top = nowY+"px";
複製代碼

TOP

chi251155

Rank: 2Rank: 2
9#
發表於 2015-3-4 22:34 | 只看該作者
本帖最後由 chi251155 於 2015-3-4 22:39 編輯

回覆 4# 神秘二代

放係head會拖慢個page loading, 其實最好放body最後
w3schools累死人, 上mdn啦

TOP

chi251155

Rank: 2Rank: 2
10#
發表於 2015-3-4 22:35 | 只看該作者
回覆 8# minazuki


    正解，以前都犯過呢個錯

TOP

12
返回列表