html疑問

頁: [1]

skycover 發表於 2017-4-16 08:31 PM

請問附圖這樣一次要插入多張圖片到網頁上只能一行一行打嗎?
<img src="image\48.jpg" title="範例圖片" height="1000">
每多一張圖就要再打一行這樣
還是有別的比較簡單的語法或方式?

<div></div>

chevylin0802 發表於 2017-4-17 11:01 AM

如果是指純粹的HTML的語法的話
確實你只能夠一個一個去寫
但是你可以在html檔裏面內嵌javascripts語法
而javascrtipts卻可以讓你的工作簡化
因為它可以靠迴圈的寫法來幫你解決問題
即使你有1000張圖片10000張圖片
也只需要數行javascripts的程式碼

行過沒碰到 發表於 2017-4-17 01:40 PM

本帖最後由行過沒碰到於 2017-4-19 09:28 PM 編輯

<script>

var image = [
{src: "a.jpg"},
{src: "b.jpg"},
{src: "c.jpg"},
];

for(var i = 0; i < image.length; i++){
document.write("<img src='image.src' />);
}
</script>用Javascript去做就不會不停的Copy and Paste
p.s. 謝謝提點, 已修改為document.write而不是echo

skycover 發表於 2017-4-17 10:48 PM

chevylin0802 發表於 2017-4-17 11:01 AM static/image/common/back.gif
如果是指純粹的HTML的語法的話
確實你只能夠一個一個去寫
但是你可以在html檔裏面內嵌javascripts語法

感謝回應
我有試著用script寫迴圈來解
但是換了好幾種方式都失敗
能否舉一個使用javascript寫html code的例子?

謝謝...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div>

hs913132 發表於 2017-4-18 12:46 AM

本帖最後由 hs913132 於 2017-4-18 12:48 AM 編輯

function addElementImg() {
var body = document.querySelector("body");

for (var i = 1; i < 5; i++) {
      var img=document.createElement("img");
      img.src = "image/"+ i + ".jpg";
      img.title = "範例圖片";
      img.height = "1000";
      body.appendChild(img);
}
}

addElementImg();我是新手，只會這樣......是不是你要的?<br><br><br><br><br><div></div>

chevylin0802 發表於 2017-4-18 02:53 PM

本帖最後由 chevylin0802 於 2017-4-18 03:07 PM 編輯

其實使用javascripts的方式去改變HTML的顯示內容的方法很常見
不過典型的寫法不是5樓的那種
因為body本身指的是整個網頁裏所要顯示的內容
而需要改變的內容往往並非整個網頁
所以多半都會設div tag來進行版面設計
因此你可以假設
<body>
<div id="images"></div>
{其他內容}
</body>

在javascripts裏面設一個變數
var images = document.getElements("images");
然後再宣告一個函數名稱 putImages()
function putImages()
{

images.innerHTML = ""; //清空images 區的內容
for(var i = 1; i< 100; i++) //假設你有100張圖
{
images.innerHTML += '<img src="image/' + i + '.jpg" title="sample' + i + '" width = "100" height="100" >';
}
}

...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div>

skycover 發表於 2017-4-18 09:11 PM

chevylin0802 發表於 2017-4-18 02:53 PM static/image/common/back.gif
其實使用javascripts的方式去改變HTML的顯示內容的方法很常見
不過典型的寫法不是5樓的那種
因為body本身指 ...

http://i.imgur.com/h0oaIjP.png

感謝回應

我有試著用您的方法寫寫看
但是似乎出了問題並沒有執行js
可以幫我看看是不是我有那裡觀念沒搞懂嗎?...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div>

skycover 發表於 2017-4-18 09:18 PM

hs913132 發表於 2017-4-18 12:46 AM static/image/common/back.gif
我是新手，只會這樣......是不是你要的?

http://i.imgur.com/yCPhD2G.png

感謝回應
我有嘗試照著您的方法來寫
但是似乎並沒有執行

可以幫我看看是哪裡出問題嗎?

謝謝!

chevylin0802 發表於 2017-4-19 11:27 AM

本帖最後由 chevylin0802 於 2017-4-19 11:33 AM 編輯

skycover 發表於 2017-4-18 09:11 PM static/image/common/back.gif
感謝回應

我有試著用您的方法寫寫看

我只是粗淺的給你介紹如何使用
所以不是完整的程式碼

body這個標籤有一個屬性叫做onLoad
設置方式 onLoad = {javascripts function name}
例如 <body onLoad='init()'>
此時只要在javascripts裏面加一個函數
function init()
{
{想要初始化的程式碼}
}

比如你也可以
<body onLoad='putImages()'>
去完成範例所要做的工作

...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div>

hs913132 發表於 2017-4-20 07:32 PM

skycover 發表於 2017-4-18 09:11 PM static/image/common/back.gif
感謝回應

我有試著用您的方法寫寫看

如果要直接寫在.html檔裡面的話，要在body 標籤裡加入script 標籤。

看起來會像這樣<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<script>
function addElementImg() {
var body = document.querySelector("body");

for (var i = 1; i < 5; i++) {
var img=document.createElement("img");
img.src = "image/"+ i + ".jpg";
img.title = "範例圖片";
img.height = "1000";
body.appendChild(img);
}
}

addElementImg();
</script>
</body>
</html>如果把JS檔單獨寫成一個檔，可以這樣匯入<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<script src="myJS.js"></script>
</body>
</html>...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div><br><br><br><br><br><div></div>

skycover 發表於 2017-4-20 10:03 PM

hs913132 發表於 2017-4-20 07:32 PM static/image/common/back.gif
如果要直接寫在.html檔裡面的話，要在body 標籤裡加入script 標籤。

看起來會像這樣如果把JS檔單獨寫成 ...

我有嘗試著用js寫一個腳本
但是編輯器顯示了一些錯誤
想請問是不是有那裡觀念弄錯
註解裡面是原code
寫在html裡面是可以執行的
感謝!

http://i.imgur.com/RtcFAPG.jpg...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div>

頁: [1]

伊莉討論區's Archiver

html疑問