精华内容
下载资源
问答
  • js 实现 图片刷新 验证码 看不清 换一张
    万次阅读 热门讨论
    2012-11-29 22:59:08

    【需求】

    html+js实现html中一个图片刷新但是整个页面不刷新,或者是验证码刷新。

    不使用jsp,不使用ajax,不使用js框架。

    【原理】

    当一个<img>的src改变时,页面会自动刷新这个<img>

    【实现代码】

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>test</title>
        <script type="text/javascript">
        	function reImg(){
        		var img = document.getElementById("Img");
    			img.src = "Img?rnd=" + Math.random();
        	}
        </script>
      </head>
      
      <body>
    	<center>
    		<img id="Img" src="Img" alt="验证码"  />
    		<a href="#" οnclick="reImg();">看不清,换一张</a>
    	</center>
      </body>
    </html>



    更多相关内容
  • 第一种:js和html语句分离 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换二维码</title> <script type="text/javascript"> window.onload=...

    第一种:js和html语句分离

    注意:checkcode.java代码在上一篇验证码文章中

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>切换二维码</title>
    <script type="text/javascript">
    window.onload=function(){
        //获取img标签的对象
    	img=document.getElementById("exchangecode");
    	img.onclick=function(){
    		//加时间戳,避免浏览器缓存
    		var date=new Date().getTime()
    		img.src="/responseproject/checkcode?"+date;
    	}
         //获取a标签的对象
    	ec=document.getElementById("ecode");
    	ec.onclick=function(){
    		//加时间戳
    		var date=new Date().getTime()
    		 img.src="/responseproject/checkcode?"+date;
    	}
    }
    
    </script>
    </head>
    <body>
    <img id="exchangecode" src="/responseproject/checkcode">   
    <a id="ecode" href="#">看不清?换一张图片</a>
    </body>
    </html>

    第二种:第一种的省略版(不跳转页面)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>切换二维码</title>
    <script type="text/javascript">
      function jump() {
    	imge=document.getElementById("exchangecode");
    	var time=new Date().getTime();
    	imge.src="/responseproject/checkcode?"+time;
    }
    </script>
    </head>
    <body>
    <img id="exchangecode" src="/responseproject/checkcode" onclick="jump();">   
    <a id="ecode" href="#" onclick="jump();">看不清?换一张图片</a>
    </body>
    </html>

    第三种:在href上改进,其实是跳转页面

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>切换二维码</title>
    <script type="text/javascript">
      function jump() {
    	imge=document.getElementById("exchangecode");
    	var time=new Date().getTime();
    	imge.src="/responseproject/checkcode?"+time;
    }
    </script>
    </head>
    <body>
    <img id="exchangecode" src="/responseproject/checkcode" onclick="jump();">   
    <a id="ecode" href="javascript:jump();" >看不清?换一张图片</a>  
    </body>
    </html>

    展开全文
  • 验证码看不清换一张 实现代码

    万次阅读 2011-09-16 20:53:00
    ">看不清,换一张   ;" id="codeimg" onclick="this.src='validate.aspx?time=' + Math.random();" /> <script language="javascript" type="text/javascript">document.getElementById('codeimg').src = '...

    方法一:点击图片实现更换验证码

    <img src="验证码界面路径" alt="看不清楚,换一张" id="img" οnclick="img.src=验证码界面路径?'+new Date().getTime()";" />

    方法二:点超链接更换验证码、下面这个例子两个方法都用到了、点击图片也可以

    <script language="javascript">  
    function change()  
    {  
    var img =document.getElementById("codeimg");  
    img.src=img.src+"?";  
    }  
    </script>  
    <a href="javascript:change();">看不清,换一张 </a>  

    <img alt="" src="" style="cursor:pointer;" id="codeimg" οnclick="this.src='validate.aspx?time=' + Math.random();" /> <script language="javascript" type="text/javascript">document.getElementById('codeimg').src = 'validate.aspx?time=' + Math.random(); </script>  

    展开全文
  • 在用java生成一张固定尺寸的图片,会用到api是BufferedImage(int width,int height,int type); 给图片上绘制出随机的文字、字母或者数字,用到API是Graphics2D(绘制文字)和Random(生成随机数) 绘制随机的干扰线...

    现在正式开发中图片验证码好像已经很少用了,但是为了加深个人印象,做个小笔记。

    验证码实现分析

    1. 在用java生成一张固定尺寸的图片,会用到api是BufferedImage(int width,int height,int type);
    2. 给图片上绘制出随机的文字、字母或者数字,用到API是Graphics2D(绘制文字)和Random(生成随机数)
    3. 绘制随机的干扰线用到Api为graphics2d.drawLine(x1, y1, x2, y2);
    4. 将图片展示到浏览器上用到Api为 ImageIO

    生成图片的具体java代码如下

    
    /**
     * @author jiangrongtao 图片验证码
     */
    public class VerificationCodeUtils {
        private static List<Color> colors;
        static{
            colors=new ArrayList<>();
            colors.add(Color.CYAN);
            colors.add(Color.yellow);
            colors.add(Color.PINK);
            colors.add(Color.green);
        }
        /**
         * 1、绘制图片 2、给图片上随机绘制文字 3、随机绘制干扰线4、将图片绘制到浏览器
         * @param response HttpServletResponse
         * @param width  图片宽度
         * @param height 图片高度
         * @param fontNum 数字个数
         * @return 返回随机生成的验证码
         */
        public static String drawVerificationCode(HttpServletResponse response, int width, int height,int fontNum) {
    
            /**
             * 生成图片
             */
            BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_4BYTE_ABGR);
    
            // 绘制文字
            Graphics2D graphics2d = bufferedImage.createGraphics();
            graphics2d.setFont(new Font("华文行楷", Font.ITALIC | Font.BOLD, 20));// 设置字体样式
    
            String words = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            StringBuilder sb=new StringBuilder();
            // 随机取四个值
            Random random = new Random();
            for (int i = 1; i <= fontNum; i++) {
                char ch = words.charAt(random.nextInt(words.length()));
                graphics2d.setColor(getColor(random));// 设置字体颜色
                graphics2d.drawString(ch + "", (width/fontNum)*i-30, height/2+10);
                sb.append(ch);
            }
    
            //绘制干扰线
            for (int i = 0; i <5; i++) {
                graphics2d.setColor(getColor(random));
                int x1=random.nextInt(width);
                int x2=random.nextInt(width);
                int y1=random.nextInt(height);
                int y2=random.nextInt(height);
                graphics2d.drawLine(x1, y1, x2, y2);    
            }
    
            try {
                ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
            } catch (IOException e) {
                e.printStackTrace();
            }
            return sb.toString();
        }
    
            /**
         * 随机获取一种颜色
         * @param random
         * @return Color
         */
        private static Color getColor(Random random){
    
            return random==null?null:colors.get(random.nextInt(4));
        }
    }
    

    在具体用的时候直接

    @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
                String code=VerificationCodeUtils.drawVerificationCode(resp,160,40,4);
                System.out.println("code="+code);
        }

    这里我打印出了随机生成的验证码,实际开发中可以把这个存到数据库来跟客户端提交的验证码进行比对验证

    实现”看不清,换一张“

    这里可以用js或者ajax实习异步局部刷新,具体如下

    js实现如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>验证码</title>
    </head>
    <body>
         <form action="/MyWebTest/login" method="post">
               <img id="_img" alt="" src="/MyWebTest/verifyCode">
               <a href="#" onclick="changeCode();">看不清,换一张</a><br/>
         </form>
         <script type="text/javascript">
              function changeCode(){
                  var img=document.getElementById("_img");
                  img.src="/MyWebTest/verifyCode?"+new Date().getTime();
              }
         </script>
    </body>
    </html>

    Jquery方式实现

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <title>验证码</title>
    </head>
    <body>
         <form action="/MyWebTest/login" method="post">
               <img id="_img" alt="" src="/MyWebTest/verifyCode">
               <a href="#">看不清,换一张</a><br/>
         </form>
         <script type="text/javascript">
              $(document).ready(function () {  
                  $("a").click(function() {
    
                     var src= $("#_img").attr("src","/MyWebTest/verifyCode?"+new Date().getTime());
    
                  });
                 });
         </script>
    </body>
    </html>

    注意:

    1. a标签中的href属性值用”#“号占位,如果用”javascript:void(0)“的话会出现IO异常。
    2. 给”/MyWebTest/verifyCode”后面拼接new Date().getTime())参数是为了防止浏览器缓存导致验证码不刷新;
    3. 用jQuery的时候导入对应的js库文件
    <script type="text/javascript" src="http://xxxx/jquery-3.2.1.min.js"></script>

    总结

      学一点,总结一点,每天提升一点。
    
    展开全文
  • 一个页面中可以有多个form标签,只能是并列关系,能嵌套。只能是兄弟关系,,能是父子关系。用户向服务器端发送数据时,一次只能提交一个表单中的数据。如果要提交多个表单就需要用js中的异步交互。 表单元素 ...
  • HTML特效代码大全(完整)

    万次阅读 多人点赞 2018-09-17 13:19:16
    HTML特效代码 1。忽视右键      或    2。加入背景音乐   IE:*.mid" loop=infinite>   NS:*.mid" autostart=true hidden=true loop=true>      *.mid你的背景音乐的midi格式文件  3。...
  • HTML特效代码大全(史上最全)

    万次阅读 多人点赞 2019-06-20 15:52:50
    如果访问者的浏览器是IE5.0,就需加任何代码,只要将图标文件上传到网站的根目录下即可。 1,META标签里的代码是什么意思? 是放于与之间的标记.以下是我总结它在网页中最常见的几种。 该网页的关键字,作用于...
  • html网页详细代码

    万次阅读 多人点赞 2016-07-07 12:03:28
    12)消除连接的下划线:写上你想写的字 13)贴音乐: 14)贴flash: 15)贴影视文件: 16)换行: 17)段落: 段落 18)原始文字样式: 正文 19)帖子背景: 20)固定帖子背景随滚动条滚动: 21)定制帖子背景颜色:(value...
  • 棒棒糖!要原味的~ 老规矩:直接上货,先效果图~~ 上传的图片有大小要求。...html代码: <!DOCTYPE html> <html> <head> <title>淘宝网-淘!我喜欢</title> ...
  • 轮播图制作,详细步骤及 HTML+CSS+JS 完整代码

    万次阅读 多人点赞 2020-04-05 12:55:27
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
  • html特效代码大全

    千次阅读 2018-06-03 22:12:55
    HTML特效代码1。忽视右键   < body oncontextmenu = "return false" >  或   < body style = "overflow-y:hidden" > 2。加入背景音乐  IE: < bgsound src = "*.mid" loop = infinite >  NS: ...
  • HTML各种命令的代码

    千次阅读 2018-10-22 19:04:00
    这样做起来是一样的,主要是防止鼠标经过图片时会出现另存的按钮。禁止鼠标右键的代码很简单: 48、在网页的Head部分加入如下代码,这段代码的主要功能是屏蔽PrintScreen键,不断清空剪贴版,防止图片被用文件...
  • js+html+css实现轮播图

    千次阅读 2021-06-08 19:10:35
    首先先把轮播图的结构搭建起来(html),代码如下:结构可自行搭建,结构搭建完接着就是用css去进行修饰美化此时的ul是没有给它设置固定的宽和高的,高可以先设置,宽能,等下让图片一张一张一的动起来,实际上是...
  • 很早就想写一篇关于网页源代码屏蔽的文章。是因为经常编出些JS脚本的之后,在沾沾自喜的同时,也在担心源代码会被人家看到,盗用我的脚本。所以一直以来,我都在尽力维护我的网页源代码的安全。虽然目前还没有找到...
  •  那么,有些人就会想到,如果对方看不到框架网页的源代码。又何谈去直接打开被保护网页?对,这就是接下来我要讲的。如果要一个页面的菜单栏内的查看源代码失去效用。那最简单的办法就是去掉菜单栏。而这一点是可以...
  • 一张懂开源许可协议

    千次阅读 2016-11-21 19:19:43
    对软件专利的态度,MPL许可证像GPL许可证那样明确表示反对软件专利,但是却明确要求源代码的提供者能提供已经受专利保护的源代码(除非他本人是专利权人,并书面向公众免费许可这些源代码),也能在将这些源...
  • 图片轮播的实现(html__js)

    千次阅读 2021-06-10 13:30:03
    通过轮播次数来决定显示那一张首先,可以用简单的div 包含img的框架来实现,我们为他添加按钮,每个按钮对应不同的图片,那么,每点击一次,将要显示的图片的style.dispay属性设置为'block'将显示的图片的display...
  • 使用html制作个人简历(新手)

    千次阅读 2021-09-15 10:21:03
    效果如图: 其中,单击通信技术工程师会产生超链接跳转到另外一个页面中去,展示我在任职期间主要负责的工作内容: ...其中,单击维护工程师会产生超链接跳转到...张孟含的个人简历.html代码: <!DOCTYP...
  • HTML+CSS制作人物介绍卡片效果

    千次阅读 多人点赞 2020-12-28 11:38:56
    HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
  • 【前端开发】代码结构及性能优化大总结

    千次阅读 多人点赞 2021-06-05 13:40:19
    HTML 代码所有的标签名和属性应该都为小写 属性值应该用引号括起来 元素的 id 与 class 按照特定规范命名 代码缩进 4 个空格 给 HTML 代码块添加必要注释 CSS 命名规范 尽量使用 class 选择器进行样式设定 类命名...
  • Python 万能代码模版:爬虫代码

    千次阅读 2021-09-14 12:56:19
    但今天的 Python 课程是个例外,因为今天讲的 **Python 技能,需要你懂计算机原理,也需要你理解复杂的编程模式。**即使是非开发人员,只要替换链接、文件,就可以轻松完成。 并且这些几个实用技巧,简直是 ...
  • HTML和CSS知识点总结(包括H5和C3)

    千次阅读 2021-07-28 12:05:09
    HTML和CSS知识点总结 1.常用的HTML标签 标题标签 <h1></h1>~<h6></h6> 段落标签<p></p>和换行标签<br/> 文本格式化标签 加粗<strong></strong>和<b>&...
  • 0代码复刻CSDN

    千次阅读 多人点赞 2021-05-25 13:39:03
    新型语言0代码复刻CSDN。
  • 实训-利用HTML和CSS制作一个网页界面

    万次阅读 多人点赞 2020-09-29 18:48:24
    学习HTML和CSS有一段时间了,笔者做完了一个相对练习而言较为复杂的网页,纽曼官网首页,上一下效果图: 这个网页相对来说还是比较有练习意义的,包含导航栏,轮播图,大量的浮动和弹性布局以及一些细小却重要的...
  • HTML入门与进阶以及HTML5

    万次阅读 多人点赞 2019-12-12 21:04:45
    (1)HTML是什么? (2)CSS (3)JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊...
  • 从技术原理上来,也许可以说他们是同宗同源,但是从产品角度来说,它们的用途是一样的。秀米的布局可以用来制作类似答题、字幕等交互式的图文内容;.svg图片在秀米则是可以色,而且用户可以上传自己...
  • 经过亲自测试,本代码复制并按照说明,可以直接运行 ============================================================using System;using System.Collections.Generic;using System.Linq;using System.Web;using ...
  • Web前端开发学习3:SEO代码优化

    千次阅读 2015-10-31 18:28:17
    代码优化概述  关于代码优化的知识是纯理论的... 所谓代码优化是指对程序代码进行等价(指改变程序的运行结果)变换。程序代码可以是中间代码,也可以是 目标代码。等价的含义是使得变换后的代码运行结果与变换前

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,440
精华内容 25,776
关键字:

看不清换一张的html代码