JavaScript中怎么输出图片？

JavaScript011

JavaScript中怎么输出图片？,第1张

你要输出吗?

<img src="url">

根据程序不同.图片可以动态生成.

<img src="<%...%>">通过脚本

还有就是可以先把图片加上.人然后直接把他隐藏diplay:none, 然后根据你的需要把它的display:block就可以了

不知道你到底怎么生成.以上两条供参考

<script type="text/javascript">

<!--

function Title( String ) {

document.getElementById('box2').innerHTML = String

}

//-->

</script>

<div class="box" id="box">

<a href="#" class="pic1"><img src="1.jpg" title="这是图片title的值" onMouseOver="Title(this.title)" /></a>

<a href="#" class="pic2"><img src="2.jpg" title="这是图片title的值2" onMouseOver="Title(this.title)" /></a>

<a href="#" class="pic3"><img src="3.jpg" title="这是图片title的值3" onMouseOver="Title(this.title)" /></a>

<a href="#" class="pic4"><img src="4.jpg" title="这是图片title的值4" onMouseOver="Title(this.title)" /></a>

</div>

<div class="box2" id="box2"></div>

按照以下步骤来：

1、获取当前日期

2、生成日期字符串

3、显示

准备好一张数字的图片：

【代码】

<style type="text/css">

/* css */

.num_0, .num_1, .num_2, .num_3, .num_4, .num_5, .num_6, .num_7, .num_8, .num_9 { background:url(numbers.gif) no-repeat 0 0 display:inline-block width:40px height:40px }

.num_1 { background-position:-40px 0 }

.num_2 { background-position:-80px 0 }

.num_3 { background-position:-120px 0 }

.num_4 { background-position:-160px 0 }

.num_5 { background-position:-200px 0 }

.num_6 { background-position:-240px 0 }

.num_7 { background-position:-280px 0 }

.num_8 { background-position:-320px 0 }

.num_9 { background-position:-360px 0 }

</style>

<div id="dis"></div>

<script>

var date=new Date(),

    str=''+date.getFullYear()+(date.getMonth()+1)+date.getDate(),

    i=0,

    len=str.length,

    html=[]

for( i<len i++)

  html.push('<span class="num_'+str[i]+'">&nbsp</span>')

document.getElementById('dis').innerHTML=html.join('')

</script>

【运行】

运行后，js代码会添加一些元素到页面上，会生成如图所示的结构：

看下页面显示效果：

显示是通过样式表完成的。