求一个js日期代码,需要在网页上输出的是图片,就是0-9的数字,替换成设计好的图片在网页上显示

JavaScript012

求一个js日期代码,需要在网页上输出的是图片,就是0-9的数字,替换成设计好的图片在网页上显示,第1张

按照以下步骤来:

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代码会添加一些元素到页面上,会生成如图所示的结构:

看下页面显示效果:

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

这样子就实现一个比较简单的日期显示功能。希望可以帮到您。

写了一段。应该满足你要求了吧? 测试过了有效。 再多图片也可以 class名称带上就可以了

<div class="DivImg"><p>图片1</p></div>

<p class="img"><img src="" /></p>

<div class="DivImg"><p>图片2</p></div>

<p class="img"><img src="" /></p>

<div class="DivImg"><p>图片3</p></div>

<p class="img"><img src="" /></p>

$(function () {

$(".DivImg").click(function (obj) {

$(".img").each(function () {

$(this).children().hide()

})

$(this).next().children().show()

})

})

不是打击你,看了你的代码,觉得你在JS方面还比较薄弱,代码风格也比较乱,建议你先利用jQuery来写,容易些。

实现思路方面,要明白图片显示的部分肯定是由CSS控制的,而定时切换是由JS控制的,做好逻辑方面的分工。示例代码:

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#list {font-size:30px}

#list > li {display:none line-height:120px text-align:center color:#fff}

#list > .current {display:block}

/* 背景色,用以示例区分不同li */

.bg-cyn {background-color:cyan}

.bg-tom {background-color:tomato}

.bg-blu {background-color:lightBlue}

.bg-mar {background-color:maroon}

</style>

</head>

<body>

<ul id="list">

<li class="bg-cyn current">我是第1个</li>

<li class="bg-tom">我是第2个</li>

<li class="bg-blu">我是第3个</li>

<li class="bg-mar">我是第4个</li>

</ul>

<script>

var slider_lis = document.getElementById('list')

 .getElementsByTagName('li'),

li_idx = 0

var slider_timer = setInterval(function() {

for (var i = 0 i < slider_lis.length i++) {

slider_lis[i].className = slider_lis[i].className.replace(' current', '')

}

slider_lis[li_idx].className = slider_lis[li_idx].className + ' current'

if (li_idx >= slider_lis.length - 1) {

li_idx = 0

} else {

li_idx++

}

}, 1000)  // 切换时间1s

</script>

</body>

</html>