案例一，轮播图（图片自定义）

/* js代码 */
/* 轮播图 */
function sf(cs){//调用方法的时候传参传图片名字就可以了/* 获取id */var a=document.getElementById("a");/* 赋值 *///a.src="img/"+csa.setAttribute("src","img/"+cs);/* 获取 */var b=a.getAttribute("src");console.info(b);
}
/* html代码 */
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>轮播图</title><script type="text/javascript" src="js/index.js"></script><style>a{font-size: 14px;color: #39F;height: 18px;width: 20px;border: 1px solid #39F;text-decoration: none;display: block;float: left;margin-right:5px;text-align: center;background-color: #FFF;line-height: 20px;}a:hover {font-size: 14px;font-weight: bold;color: #FFF;background-color: #39F;border: 1px solid #39F;text-decoration: none;display: block;}#apDiv1 {position:absolute;width:180px;height:25px;z-index:2;left:100px;top: 13px;}</style></head><body><table width="360" border="0" cellspacing="0" cellpadding="0"><tr><td style="height:190px;"><div id="apDiv1"><a onmouseover="sf('1.gif')" href="javascript:sf('1.gif')">1</a><a onmouseover="sf('2.gif')" href="javascript:sf('2.gif')">2</a><a onmouseover="sf('3.jpg')" href="javascript:sf('3.jpg')">3</a><a onmouseover="sf('4.jpg')" href="javascript:sf('4.jpg')">4</a><a onmouseover="sf('5.gif')" href="javascript:sf('5.gif')">5</a></div><!-- 图片 --><img src="img/1.gif" alt="图片" id="a"/></td></tr></table></body>
</html>

案例一效果图

案例二，随机数

/* js代码 */
/* 随机数 */
function sd(){/* 定义三个随机数 */var a=Math.round(Math.random()*9);var b=Math.round(Math.random()*9);var c=Math.round(Math.random()*9);/* 赋值 */document.getElementById("a").innerHTML=a;document.getElementById("b").innerHTML=b;document.getElementById("c").innerHTML=c;/* 一直赋值 */s=setTimeout("sd()",100);
}
/* 停止随机数 */
function sds(){window.clearInterval(s);
}
/* html代码 */
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>随机数</title><script type="text/javascript" src="js/index.js"></script><style>.tda{float:left;width:187px; height:115px; font-family:"微软雅黑"; background-color:#666; text-align:center; line-height:115px; font-size:80px;margin:10px; }input{width:180px; height:65px; display:block; background-color:#F60;border:0; cursor:pointer; font-family:"微软雅黑";  font-size:40px;font-size:100%;}</style></head><body><table align="center"><!-- 第一行：存放随机产生的数字 --><tr><td id="a" class="tda">X</td><td id="b" class="tda">X</td><td id="c" class="tda">X</td></tr><!-- 第二行：两个按钮 --><tr><td colspan="3" align="center"><table><tr><td><input type="button"  value="开始" onclick="sd()"/></td><td><input type="button"  value="停止" onclick="sds()"/></td></tr></table></td></tr></table></body>
</html>

案例二效果图

案例三，抽名字游戏

/* js代码 */
/* 随机名字 */
/* 定义一个数组 */
var img=["张三","李四","王二","麻子","小芳","翠花","熊大","熊二"];
function se(){/* 遍历数组 */for (var i=0;i<img.length;i++) {/* 定义一个随机数 */var a=Math.round(Math.random()*i);/* 赋值 */document.getElementById("a").innerHTML=img[a];}/* 一直赋值 */s=setTimeout("se()",100);
}
/* 停止随机名字 */
function ses(){window.clearInterval(s);
}
/* html代码 */
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>随机名字</title><script type="text/javascript" src="js/index.js"></script><style>.tda{float:left;width:400px; height:115px; font-family:"微软雅黑"; background-color:#666; text-align:center; line-height:115px; font-size:80px;margin:10px; }input{width:200px; height:65px; display:block; background-color:#F60;border:0; cursor:pointer; font-family:"微软雅黑";  font-size:40px;font-size:100%;}</style></head><body><table align="center"><!-- 第一行：存放随机产生的数字 --><tr><td id="a" class="tda">X</td></tr><!-- 第二行：两个按钮 --><tr><td colspan="3" align="center"><table><tr><td><input type="button"  value="开始" onclick="se()"/></td><td><input type="button"  value="停止" onclick="ses()"/></td></tr></table></td></tr></table></body>
</html>

案例三效果图

案例四，广告循环文字

/* js代码 */
/* 文字 */
/* 定义变量 */
var i=1;
function sc(){/* 定义文字 */var ab="珍惜当下 努力拼搏吧少年!";/* 截取 */var b=ab.substring(0,i);/* 赋值 */document.getElementById("a").innerHTML=b;/* 判断 */if(i==ab.length){/* 当i等于ab 的长度时 给i给赋值0 */i=0;}/* 递增 */i++;/* 一直循环 */setTimeout("sc()",100);
}
/* html代码 */
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文字</title><script type="text/javascript" src="js/index.js"></script></head><body onload="sc()"><div id="a"></div></body>
</html>

以上代码直接复制可用

JavaScript实现(轮播图，随机数，抽名字游戏，广告循环文字)相关推荐

html 轮播图自适应,JavaScript 自适应轮播图
JavaScript 自适应轮播图代码话不多说,先上代码,方便复制粘贴.演示轮播图 *{ margin: 0; padding: 0; } ul{ list-style: none; } img ...
HTML+CSS+JavaScript实现轮播图效果
前言先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果百度网盘:百度网盘请输入提取码提取码:slbt 没有添加动画效果,添加了自动切换 ...
JavaScript模拟轮播图效果
轮播图相信小伙伴们应该不会陌生吧~ 就是网站中间的那个会定时切换的商品图今天咱们就来模拟一个轮播图~当然效果不是那么美观小伙伴们不要嫌弃哈~ 那么咱们开动了,额~先准备好几章轮播图片(直接在网上 ...
JavaScript图片轮播图
轮播图四张图片每隔2秒换下一张四张图片每隔2秒换下一张 <!DOCTYPE html> <html lang="en"> <head>< ...
教你用JavaScript制作轮播图
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个轮播图.图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时 ...
JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）
一.轮播图要实现的效果: 实现点击小圆点.图片滑动.小圆点样式改变二.轮播图实现效果步骤: 1.利用html+css完成轮播图片,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切 ...
JavaScript之轮播图制作
目录 1.轮播布局 2.JS动态效果 (1)根据图片个数得到图片列表区域的宽度 (2)根据图片个数创建相应的圆点并为每个圆点绑定自定义属性 (3)通过事件委托给圆点切换区域绑定点击事件,根据圆点的自定 ...
纯HTML与JavaScript实现轮播图
一.效果轮播图代码实现 1.HTML部分 <div class="box" id="box"><div class="inner ...
前端：HTML+CSS+JavaScript实现轮播图
1. 最简单的轮播图效果如下: 这个实现非常简单,就是使用相对定位和绝对定位,将这三张图片压在一块.然后搞一个定时器,当到下一张图片的时候,把当前这张图片相应的标签上设置它的属性display,把它 ...
JavaScript实现轮播图
功能: 1.图片会自动播放,鼠标放上面会暂停播放 2.点击左右出现的箭头可以切换到上一张/下一张图片 3.点击序号会跳转到对应图片 <!DOCTYPE html> <html lan ...

JavaScript实现(轮播图，随机数，抽名字游戏，广告循环文字)

案例一，轮播图（图片自定义）

案例二，随机数

案例三，抽名字游戏

案例四，广告循环文字

JavaScript实现(轮播图，随机数，抽名字游戏，广告循环文字)相关推荐

最新文章

热门文章

JavaScript实现(轮播图，随机数，抽名字游戏，广告循环文字)

案例一，轮播图（图片自定义）

案例二， 随机数

案例三，抽名字游戏

案例四， 广告循环文字

JavaScript实现(轮播图，随机数，抽名字游戏，广告循环文字)相关推荐

最新文章

热门文章

案例二，随机数

案例四，广告循环文字