这次给大家分享一个通过js向HTML添加便签，实现随机代码生成的案例，代码已经放在下方，
这里我在下面准备了50张图片，但是没有放在博文中，如果读者想要练习，可以自己下载一些图片，建议下载的多一些。




<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>随机生成图片</title>

    <style>

    //设置css样式

        a,div{

            margin:0;

            padding:0;

            box-sizing: border-box;

        }

        .d1{

            width: 700px;

            height: 700px;

        }

        img{

            display: block;

            width: 150px;

            height: 150px;

            float:left;

            margin:5px;

        }

    </style>

</head>

<body>

    <!-- 友情提示：开发步骤 结构 样式 js

        先创建足够的img标签，用来将样式设置好，然后注释掉，通过js生成img

     -->

    <button id="btn">点击生成随机图片</button>

    <div id="div1" class="d1">

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

        <!-- <img src="" alt=""> -->

    </div>

</body>

<script>

    //获取元素

    var div1 = document.getElementById('div1')

    var btn = document.getElementById('btn');

    //生成一个临时容器

    var frag = document.createDocumentFragment();

    oImg(16)

        function oImg(numb){

            //通过for循环向HTML中添加图片标签

            for(var i=0;i<numb;i++){

            let num=Math.round((Math.random()+0.01)*50);//我准备了50张图片，所以乘50

            //生成img标签

            let aImg=document.createElement("img");

            //生成a标签，可以添加图片点击查看原图的效果,也可以不添加，个人随意

            let a=document.createElement("a");

            //使用拼接的方法给生成的img标签插入图片

            aImg.src = "./images/" + num +".jpg";

            //将生成的标签插入到它们的父元素中

            a.appendChild(aImg);

            frag.appendChild(a);

            a.href = aImg.src;

        }

        // frag.setAttribute('width','700px')

        div1.appendChild(frag);

        }

        //给按钮添加刷新功能，可以随机生成新的图片

        btn.onclick = function(){

            window.location.reload()

    }

</script>

</html>

　　图片随机显示主要还是for循环和图片地址的拼接，其中我还加入了a标签，添加了一个小小的查看原图的功能。
这次只是一个简单的案例，如果大家有更好的方式方法欢迎在下方留言，大家互相借鉴学习！！


												


											
通过js实现随机生成图片的更多相关文章
	

    
								
  1. Django登录(含随机生成图片验证码)注册实例
		
    登录,生成随机图片验证码 一.登录 - 随机生成图片验证码 1.随机生成验证码 Python随机生成图片验证码,需要使用PIL模块,安装方式如下: pip3 install pillow 1)创建图片 ...
    
		
    2. 
						
  2. js 生成随机炫彩背景
		
    在浏览 https://ghost.org/xxxx/ 时. 可以使用 background-size: cover; 加上很小的像素图,放大后实现炫彩背景效果. 使用 js canvas 随机生成小 ...
    
		
    3. 
						
  3. js生成随机固定长度字符串的简便方法
		
    概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...
    
		
    4. 
						
  4. python 全栈开发，Day85(Git补充,随机生成图片验证码)
		
    昨日内容回顾 第一部分:django相关 1.django请求生命周期 1. 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端 请求头和请求体中会包含浏览器的动作(action),这 ...
    
		
    5. 
						
  5. JS生成随机字符串的多种方法
		
    这篇文章主要介绍了JS生成随机字符串的方法,需要的朋友可以参考下 下面的一段代码,整理电脑时,记录备查. <script language="javascript">  ...
    
		
    6. 
						
  6. js实现随机选取[10,100)中的10个整数，存入一个数组，并排序。    另考虑(10,100]和[10,100]两种情况。
		
    1.js实现随机选取[10,100)中的10个整数,存入一个数组,并排序. <!DOCTYPE html> <html lang="en"> <hea ...
    
		
    7. 
						
  7. JS实现随机颜色的3种方法与颜色格式的转化
		
    JS实现随机颜色的3种方法与颜色格式的转化   随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...
    
		
    8. 
						
  8. js图片随机切换
		
    使用js做到随机切换图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
    
		
    9. 
						
  9. Django---登录（含随机生成图片验证码）、注册示例讲解
		
    登录(验证码).注册功能具体代码 # urls.py from django.contrib import admin from django.urls import path from app01  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 参数化设计（多次调用同一子模块，critical warning，引脚constraint sources）
			
    1.设计定义:4个led灯以不同的频率各自闪烁. 2.设计输入:时钟信号,复位信号,led多位输出. 思路:没有要求流水的效果,所以不需要叠加counter达到某一特定值来位移.只需要让每个灯的闪烁周 ...
    
			
    2. 
						
  2. LCA——树上倍增
			
    首先,什么是LCA? LCA:最近公共祖先 祖先:从当前点到根节点所经过的点,包括他自己,都是这个点的祖先 A和B的公共祖先:同时是A,B两点的祖先的点 A和B的最近公共祖先:深度最大的A和B的公共祖 ...
    
			
    3. 
						
  3. 零基础学Java（12）静态字段与静态方法
			
    静态字段与静态方法   之前我们都定义的main方法都被标记了static修饰符,那到底是什么意思?下面我们来看看 静态字段   如果将一个字段定义为static,每个类只有一个这样的字段.而对于非静 ...
    
			
    4. 
						
  4. Gauss 消元法
			
    目录 1. 线性方程组 2. 球形空间产生器sphere 3. 臭气弹 4. 开关问题 错乱瞎写 1. 线性方程组 省流:初等行变换化为一个上三角,然后瞬间出解 inline bool z(const ...
    
			
    5. 
						
  5. 汽车锂电池行业为啥会选择钡铼BL200系列Profinet分布式IO
			
    近年来,全球新能源汽车的蓬勃发展促进了锂电池行业的发展.随着锂电池标准化程度的提高,电池和模块规格的标准化是未来的发展趋势,也促进了自动化模块生产线的发展. 锂电池模块生产线通过涂胶-电池堆叠-组装- ...
    
			
    6. 
						
  6. PHP几个常见不常用的方法
			
    method_exists判断方法是否存在 <?php class F{ public function __construct(){ if(method_exists($this, 'son_ ...
    
			
    7. 
						
  7. 把酒言欢话聊天，基于Vue3.0+Tornado6.1+Redis发布订阅(pubsub)模式打造异步非阻塞(aioredis)实时(websocket)通信聊天系统
			
    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_202 "表达欲"是人类成长史上的强大"源动力",恩格斯早就直截了当地指出,处在蒙昧时代即低 ...
    
			
    8. 
						
  8. 一文详解 implementation api embed
			
    最近使用 Android Studio 从事项目开发时,发现对 implementation.api.embed 的用法了解的不是很清楚,这里准备一篇文章对其使用场景或者说是使用方式进行一个总结. d ...
    
			
    9. 
						
  9. Luogu2290 [HNOI2004]树的计数 （组合计数，prufer编码）
			
    这不prufer编码吗,防爆long long就行了啊 #include <iostream> #include <cstdio> #include <cstring&g ...
    
			
    10. 
						
  10. mybatis 14: 多对一关联查询
			
    业务背景 根据订单id查询订单的信息,以及该订单所属的客户的基本信息(不包括该客户自己的订单信息) 两张数据表 客户表 订单表 实体类 客户实体类:Customer private Integer i ...
    
			
    11.