通过js实现随机生成图片


这次给大家分享一个通过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="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
        <!-- <img src="" > -->
    </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标签,添加了一个小小的查看原图的功能。这次只是一个简单的案例,如果大家有更好的方式方法欢迎在下方留言,大家互相借鉴学习!!

原文地址:https://www.cnblogs.com/changx/p/10930040.html

时间: 2024-10-16 02:25:31

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

js实现随机选取[10,100)中的10个整数,存入一个数组,并排序。 另考虑(10,100]和[10,100]两种情况。

1.js实现随机选取[10,100)中的10个整数,存入一个数组,并排序. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <script type="text/java

Android 自定义View之随机生成图片验证码

本篇文章讲的是Android自定义View之随机生成图片验证码,开发中我们会经常需要随机生成图片验证码,但是这个是其次,主要还是想总结一些自定义View的开发过程以及一些需要注意的地方. 按照惯例先看看效果图: 一.先总结下自定义View的步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 3.重写onMesure 4.重写onDraw 其中onMesure方法不一定要重写,但大部分情况下还是需要重写的 二.View 的几个构造函数 1.public CustomV

servletResponse 随机生成图片验证码

/***********************************servlet页面************************************/ package response; import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.io.IOE

js生成随机固定长度字符串的简便方法

概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 js生成随机字符串有一个奇妙的写法: //输出随机字符串 const randStr = () => Math.random().toString(36).substr(2); 浏览器开发者工具输入5次,输出如下: "4cc9gd4sbwd" "ox9r8g6g7h&qu

外贸建站JS控制随机显示内容代码分享

外贸建站JS控制随机显示内容代码分享 <script> $(function(){ $('li[id^=p_]').each(function(){ var this_id = $(this).attr("id"); var id_arr = this_id.split('_'); if(id_arr[1]>9){ $(this).hide(); } }) }) function tryLuck(){ var num=30; var p_list=new Array(

JS更随机的随机数

一.问题背景 一个二维平面上有一群NPC,每一回合可以随机向上/下/左/右任一方向走1步,有单位碰撞体积(NPC位置不能重合) 规则就这么简单,初始情况下这群NPC是被人工均匀分布在二维平面上的,运行N个回合后发现所有NPC都集中在了左下角..怎么会这样,说好的随机呢? 二.分析 现有的实现是这样的: 根据NPC的当前位置判断得到可以去的位置,把结果存放在一维数组arr里 P.S.上/下/左/右最多4个点(周围空荡荡的),最少0个点(被围起来了) 生成[0, arr.length – 1]内的一

js里面随机抽取n个随机数

function getImageRandomPosition(){ do { var n = Math.floor(Math.random() * 12);//n为随机出现的0-11之内的数值 for (var i = 0; i < posArray.length; i++) { if (n == posArray[i]) { /*若n和数组里面的数值有重复,立即跳出函数*/ break; } } /*若n和数组里的数组无重复,那么i和数组的长度是相同的,这样可以避免出现重复的数字*/ if

【js】随机色的2种实现方式

随机颜色的二种写法 写法一:var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "A", "

JS生成随机的由字母数字组合的字符串

前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法 1 Math.random().toString(36).substr(2); 输出结果 解释 很有意思,研究了一下,基本上toString后的参数规定可以是2-36之间的任意整数,不写的话默认是10(也就是十进制),此时返回的值就是那个随机数. 若是偶数,返回的数值字符串都是短的,若是奇数,则返回的将是一个很大长度的表示值. 若<10 则都是数字组成,>10 才会包含字