这次给大家分享一个通过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. 大数据--Hive的安装以及三种交互方式
			
    1.3 Hive的安装(前提是:mysql和hadoop必须已经成功启动了) 在之前博客中我有记录安装JDK和Hadoop和Mysql的过程,如果还没有安装,请先进行安装配置好,对应的随笔我也提供了百 ...
    
			
    2. 
						
  2. Trie树模板1字符串统计
			
    Trie树模板1字符串统计 我们首先来了解一下字典树,首先看一下一张字典树的图片 字典树就是一个可以高效存储.查找字符串的树,比如上面这个字典树就是存储abc,acb,bac的字典树. 1.插入操作( ...
    
			
    3. 
						
  3. AtCoder Beginner Contest 261 F // 树状数组
			
    题目链接:F - Sorting Color Balls (atcoder.jp) 题意: 有n个球,球有颜色和数字.对相邻的两球进行交换时,若颜色不同,需要花费1的代价.求将球排成数字不降的顺序,所 ...
    
			
    4. 
						
  4. linux学习之selinux安全处理
			
    linux在默认情况下会开启selinux,如果软件开放的端口不是selinux默认的协议端口会导致防火墙端口开放后还是无法访问.以下是解决办法. [root@localhost ~]# semana ...
    
			
    5. 
						
  5. HTTP 协议概述
			
    什么是 HTTP 协议 什么是协议? 协议是指双方,或多方,相互约定好,大家都需要遵守的规则,叫协议. 所谓 HTTP 协议,就是指,客户端和服务器之间通信时,发送的数据,需要遵守的规则,叫 HTTP ...
    
			
    6. 
						
  6. MySQL内存管理机制浅析
			
    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. 目录 一.placement new的定义 二.pl ...
    
			
    7. 
						
  7. 认识Vue扩展插件
			
    众所周知,在 Vue 开发中,实现一个功能可以有很多种方式可以选择,这依赖于 Vue 强大的功能(指令.混合.过滤.插件等),本文介绍一下插件的开发使用. Vue 插件 插件通常用来为 Vue 添加全 ...
    
			
    8. 
						
  8. 利用 Word 表格对文字、图文进行排版
			
    在以前,Web 前端工程师利用 <table /> 元素对网页布局进行排版,但是如今却不推荐此元素排版了,而是改用 <div /> 元素和 CSS 弹性布局(或网格布局)对网页 ...
    
			
    9. 
						
  9. html弹出二选一窗口,然后根据点击执行对应的js方法
			
    html弹出二选一窗口,然后根据点击执行对应的js方法 layer.confirm("我是弹出来的字", {btn:['确认','取消']}, function(){ ...方法1 ...
    
			
    10. 
						
  10. 第四十六篇:工程化概念以及什么是webpack
			
    好家伙,这波是概念补充 1.什么是工程化概念? 我的开发: 开个项目,想怎么改怎么改,拉个东西过来就用 实际的前端开发: (1) 模块化(js的模块化,css的模块化,资源的模块化) (2) 组件化( ...
    
			
    11.