首页 > 其他分享 >JS 随机图片效果

JS 随机图片效果

时间:2023-06-26 22:01:22浏览次数:63  
标签:src useRand JS var 随机 images new png 图片


<html>
<head>
<title>JS 随机图片效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
img {  border: #999999; border-style: dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>
</head>
<SCRIPT LANGUAGE="JavaScript">

var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1].src = "demo1.png";
images[2] = new Image();
images[2].src = "demo2.png";
images[3] = new Image();
images[3].src = "demo3.png";
images[4] = new Image();
images[4].src = "demo4.png";

function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}

</script>
<body bgcolor="#FFFFFF" text="#000000" onl oad="swapPic()">
<img name="randimg" src="demo1.png">
</body>
</html>

 

效果图:

JS 随机图片效果_ViewUI


 

 

标签:src,useRand,JS,var,随机,images,new,png,图片
From: https://blog.51cto.com/u_16171388/6558231

相关文章

  • JS——网课
    看:https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=17&spm_id_from=pageDriver&vd_source=b16c9d62fc80d4f0761a959bb9fdb870P17 ......
  • Python随机数据生成——Faker的使用
    安装Fakerpipinstallfaker导入模块及基本配置#导入FakerfromfakerimportFaker#初始化,设置locale为中文;默认是英文fake=Faker(locale='zh_CN')随机日期生成print('随机年月日:',fake.date(pattern='%Y-%m-%d'))print('随机年:',fake.year())print(......
  • JS 判断手机端跳转
    第一种方法:functionis_mobile(){varregex_match=/(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian......
  • JS 跳转对应的手机页面
    location.pathname(location对象的pathname属性)用于设置或取得当前URL的路径部分<scripttype="text/javascript"> varpath=location.pathname; alert(path);</script>效果图: 前提是手机和PC站都同一个数据库,更新的路径都是相同的,只是域名的不同。一个是www,另一个是m......
  • JS 函数的三种声明方式
    <!DOCTYPEhtml><metacharset="UTF-8"><script>//----函数的三种声明方式----//1、自定义函数:functionf1(){ console.log("f1f1f1f1");}//调用方式:函数名f1();//特点://(1)函数声明的函数在JS预解析的时候,会提升到作用域的最前面//(2)函数声明中的函数,可以在声明之前调......
  • JS 短路运算
    Boolean强制转换:除了NaN、null、""、undefined、0、function这几个为false外,其他皆为true。短路运算的符号:   ||  && ! 或与非。短路运算的原理:当有多个表达式时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。短路运算的规则:&&找假,先看第一个表达式的......
  • JS 特殊数据类型的 == 和 === 比较
    在javascript的世界里,无论是函数,还是数组,还是对象,亦或是字符串,数字,布尔类型,在这些数据类型中,总有这么几个特立独行,然后造成一些可有可无的讨厌bug。而这些讨厌bug出现的原因就是由于比较时产生的错误,而且最不易查出错误。在这里我们整理了这几个特殊数据类型的比较。直接上代码。上......
  • JS for...in 遍历语句
    for...in语句用于对数组或者对象的属性进行循环操作。for(变量in对象){   在此执行代码}这里的“变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。 举个例子:<!DOCTYPEhtml><metacharset="UTF-8"><script>varx;varzoon=newArray();zoon[0]="......
  • JS canvas 标签制作色相球
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>JScanvas标签制作色相球</title></head><body><canvas></canvas><scripttype="text/javascript">varcanvas,ctx,ma......
  • 图片预览
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><......