效果图如下: 

    

    

    

    

    页面代码:

    

    <div class="form-item form-width-in fr">
      <label>产 品 编 码</label>
      <input type="text" id="product_code" name="product_code" value="" class="field fwidth" placeholder="获取随机编码">
      <a onclick="hq();" class="mailbox" style="cursor:pointer;">获取</a>
    </div>

    js代码:

    

    <script type="text/javascript">
      function hq(){
      //声明一个随机数变量,默认为1
      var GetRandomn = 1;
      //js生成时间戳
      var timestamp=new Date().getTime();
      //获取随机范围内数值的函数
        function GetRandom(n){
        //由随机数+时间戳+1组成
        GetRandomn=Math.floor(Math.random()*n+timestamp+1);
        }
      //开始调用,获得一个1-100的随机数
      GetRandom("30");
      //把随机数GetRandomn 赋给 input文本框.根据input的id
      document.getElementById('product_code').value = GetRandomn;
      //调试输出查看
      //alert(GetRandomn);
      }
    </script>

js生成随机编码并赋值给input文本框的更多相关文章

  1. js中input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  2. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  3. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  4. ie下使用文本编辑器导致input文本框无法聚焦的问题原因

    最近公司的一个项目遇到一个如下问题: 描述:测试发现,每当我们在发布活动的页面发布完活动后,页面跳转到我的活动,然后再次回到发布活动页面,发现所有的input文本框都不能聚焦.然后再去看看其他页面(我 ...

  5. input文本框自适应文本内容宽度

    input文本框自适应文本内容宽度 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. input文本框设置和移除默认值

    input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...

  7. HTML input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  8. input 文本框和 img 验证码对齐问题

    input 文本框和 img 验证码对齐问题 在网页制作中,常将 input 和 img 放在同一行,img标签总是比input高出一个头,非常难看. CCS实现input和img水平对齐的方法 同时 ...

  9. 我的插件のinput文本框实现宽度自适应

    先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <htm ...

随机推荐

  1. ⑨要写信(codevs 1697)

    题目描述 Description 琪露诺(冰之妖精)有操控冷气的能力.能瞬间冻结小东西,比普通的妖精更危险.一直在释放冷气的她周围总是非常寒冷. 由于以下三点原因…… 琪露诺的符卡 冰符“Icicle ...

  2. laravel 查询构造器2

    //查询构造器 public function query() { //获取所有的数据 $student = DB::table('student')->get(); var_dump($stu ...

  3. saltstack 开发相关命令记录

    SALT API开发相关命令记录. 查看当前的salt key信息salt-key -L 测试被控主机的连通性salt '*' test.ping 远程命令执行测试salt '*' cmd.run ' ...

  4. 利用systemtap定位ifconfig dropped数据包的原因

    http://blog.chinaunix.net/uid-20662820-id-3842431.html   欢迎转载,转载请保留文章的完整性!Author: Tony <tingw.liu ...

  5. vSphere 6.5支持512e,NVMe SSD呢?

    原创 2017-01-12 朱朋博 金笑雨 企事录 2016年底,VMware终于宣布,从vSphere 6.5开始支持512e扇区格式了. 这当然是好事.不过,不黑不舒服斯基说:原来以前的版本连51 ...

  6. HDC与CDC相互转换

    转自loop_k原文 HDC与CDC相互转换 概念 首先说一下什么是DC(设备描述表):Windows应用程序通过为指定设备(屏幕,打印机等)创建一个设备描述表(Device Context, DC) ...

  7. Android应用开发 WebView与服务器端的Js交互

    最近公司再添加功能的时候,有一部分功能是用的html,在一个浏览器或webview中展示出html即可.当然在这里我们当然用webview控件喽 WebApp的好处: 在应用里嵌套web的好处有这么几 ...

  8. Android Studio 1.3RC版 build加速

    Android Studio 确实是好用.但build的速度却是奇慢无比!.! ! 我上网找了非常多build加速的设置,却不能适配到我的1.3RC版... . .心塞.无耐,忍着超级无敌慢的速度硬是 ...

  9. nexus批量更新jar包

    nexus批量更新jar包 学习了:https://blog.csdn.net/newtelcom/article/details/54379607 手动进行jar包的拷贝,在维护界面内进行批量更新:

  10. [CSS3] Define Form Element States with CSS Form Pseudo Classes

    Using just semantic CSS Pseudo-Classes you can help define important states for form elements that e ...