图片自己找几个替换下就OK了!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
img{padding:0 ;margin:0;}
</style>
<script type="text/javascript">
window.onload = function() {
var num = null ;
var aImg = document.getElementsByTagName("img");
function toDouble(num){
return num < 10 ? "0" + num : ""+num ;
}
function fnTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var time = toDouble(year) + toDouble(month) + toDouble(day) + toDouble(hours) + toDouble(minutes) + toDouble(seconds);
for(var i = 0 ,length = time.length; i < length; i++){
aImg[i].src = "images/"+ time.charAt(i)+".gif";
}
}
setInterval( fnTime , 1000);
fnTime();
}
</script>
</head>
<body>
<div id="time">
<img src=images/0.gif /><img src=images/0.gif /><img src=images/0.gif /><img src=images/0.gif />年
<img src=images/0.gif /><img src=images/0.gif />月
<img src=images/0.gif /><img src=images/0.gif />日
<img src=images/0.gif /><img src=images/0.gif />时
<img src=images/0.gif /><img src=images/0.gif />分
<img src=images/0.gif /><img src=images/0.gif />秒
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
img{padding:0 ;margin:0;}
</style>
<script type="text/javascript">
window.onload = function() {
var num = null ;
var pic = "";
var oSpan = document.getElementsByTagName("span")[0];
for(var i = 0 ; i < 4; i++){
num = Math.floor(Math.random()*10) ;
pic += "<img src=images/"+num+".gif />";
}
oSpan.innerHTML = pic; //alert(oSpan.innerHTML);
function toDouble(num){
return num < 10 ? "0" + num : ""+num ;
}
function fnTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var arrTime = [toDouble(year) ,"年",toDouble(month) ,"月", toDouble(day) ,"日",
toDouble(hours) ,"时", toDouble(minutes) ,"分", toDouble(seconds),"秒"];
pic = "";
var index = null;
for(var i = 0 ; i < arrTime.length; i++){
index = arrTime[i];
if(isNaN(index)){
pic += index;
} else {
for(var n = 0 ; n < index.length; n++){
pic += "<img src=images/"+ index.charAt(n)+".gif />" ;
}
}
}
var oSpan = document.getElementById("time");
oSpan.innerHTML = pic;
}
setInterval( fnTime , 1000);
fnTime();
}
</script>
</head>
<body>
<input type="text" value="" /> <span></span><br /><span id="time"></span>
</body>
</html>
分享到：
相关推荐
JavaScript可以通过控制定时器改变图片显示，实现自动切换，并添加手动切换、箭头导航等功能。例如，可以使用swiper.js这样的库来快速构建响应式的轮播组件。 3. **下拉菜单**：在导航栏中，下拉菜单能让用户更方便...
其次，JavaScript还可以控制广告的计时显示，比如设置广告每隔一段时间自动更换，或者在用户停留一段时间后显示。这是通过设置定时器（setTimeout或setInterval）来完成的。例如，可以创建一个轮播广告，每几秒钟...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责处理客户端的交互和动态效果。在网页中，JavaScript可以实现许多...同时，这也是对JavaScript定时器、事件监听和window对象方法的一种实际应用。
在描述中提到的"刚学JavaScript时自己写的一些简单特效"，这可能是指开发者在学习初期通过编写代码来实践JavaScript的基本语法和特性，例如DOM操作、事件处理、定时器函数setTimeout或setInterval、CSS样式修改等。...
首先设置文字的模糊度，然后通过JavaScript定时器逐渐减少模糊程度，达到逐渐清晰的效果。 5. **文字颜色变化** 使用JavaScript可以改变文本的颜色，创建闪烁、渐变或随时间变化的颜色效果。这可以通过修改`style....
5. **AJAX异步数据交换**：JavaScript还可以用来实现无刷新页面更新，通过AJAX（Asynchronous JavaScript and XML）技术，后台获取新数据并动态插入到页面中，常见于新闻滚动、实时聊天等应用。 6. **响应式设计**...
JavaScript特效代码大全是一份集合了各种JavaScript编程技巧和效果实现的资源库，涵盖了网页动态效果、用户交互、动画以及数据可视化等多个方面。这份大全旨在帮助开发者提升网站的用户体验，通过运用JavaScript的...
JavaScript是Web开发中不可或缺的一部分，尤其对于网页特效的实现，它的作用至关重要。作为一个程序员，熟练掌握JavaScript特效的制作技巧能够极大地提升网页的交互性和用户体验。本文将深入探讨一些程序员常用的...
【烟花动画的实现】动画效果是通过定时器（如setInterval）来实现的，每隔一定时间，就会发射一颗新的烟花，并更新已存在的烟花状态。每颗烟花的位置、速度、颜色等属性都是随机生成的，以增加视觉效果的多样性。...
4. **AJAX异步数据交换**：AJAX允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，这常用于实现无刷新加载、实时更新数据等特效。 5. **动画库和框架**：jQuery、React、Vue等库和框架提供了...
实现时，需要用到JavaScript的定时器（setTimeout或setInterval）来控制广告的显示时间，以及random函数来决定广告出现的位置。 6. CSS将图片自动变为圆角：CSS3提供了border-radius属性，可以方便地将图片或其他...
在"javascript实现的特效"这个主题中，我们将探讨日历、省市级联、图片切换和打字功能这几种常见的JavaScript特效及其实现方法。 1. 日历特效： 日历特效是网页中常见的一种交互元素，常用于日期选择。JavaScript...
总的来说，JavaScript是实现网页特效的强大工具，它能够创建出各种动态效果，提高用户对网页的互动性和吸引力。不过，要注意的是，尽管特效能提升视觉体验，但也应适度，避免过度的特效影响网页性能，确保网页在不同...
四、JavaScript特效实现 1. 使用CSS3动画：JavaScript与CSS3结合，可以让浏览器硬件加速渲染，提高性能。例如，可以使用CSS3的transition和keyframes属性，然后用JavaScript触发动画。 2. 自定义事件：通过监听...
这可以通过设置定时器（setTimeout或setInterval）来实现，每隔一定时间（如1秒）更新页面上的时间显示： ```javascript function updateTime() { let time = new Date(); let hours = time.getHours(); let ...
5. **计时器与定时器**：JavaScript的setTimeout和setInterval函数可用于创建倒计时、定时更新内容等效果。 6. **表单验证**：通过JavaScript对用户输入的数据进行实时检查，提高用户体验，防止无效数据提交。 7. **...
JavaScript可以设置定时器（如`setInterval`），每隔一定时间替换广告图片，形成连续的视觉效果。 3. **自动切换广告**：广告在设定的时间间隔内自动切换到下一个内容。这可以通过计时器配合数组存储广告内容，每次...
4. **自动播放**：为了实现自动轮播，可以设置一个定时器，定期调用上述的`nextSlide`函数。在用户交互时，如鼠标悬停，可以暂停定时器，离开时再恢复。 5. **导航更新**：每次切换图片后，更新当前选中的导航指示...
JavaScript可以通过定时器（setTimeout或setInterval）来控制内容的自动切换，同时结合CSS实现平滑过渡，增加用户体验。 2. **变换背景（Background Transitions）**：利用JavaScript可以改变元素的背景颜色、图像...