按照以下步骤来:
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>