Home > Article > Web Front-end > js image and text code sharing to achieve lottery effect

js image and text code sharing to achieve lottery effect

黄舟Original: 2017-03-27 14:28:361330browse

This article mainly introduces js examples of methods to achieve the lottery effect. Has very good reference value. Let’s take a look at it with the editor below

Rendering:

##The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>随机抽奖</title>
  <style>
    *{margin: 0;padding: 0;}
    body{
       background:darksalmon;
    }
    h1,#ks,#js{
       text-align: center;
     }
    #ks{
       width: 100px;
       height: 70px;
       background: blueviolet;
       border-radius: 10px;
       line-height: 70px;
       margin:3% 0 0 40%;
     }
    #ks:hover{
      width: 100px;
      height: 70px;
      background: tomato;
      border-radius: 10px;
      line-height: 70px;
    }
    #js{
      width: 100px;
      height: 70px;
      background: blueviolet;
      border-radius: 10px;
      line-height: 70px;
      margin:-5% 0 0 50%;
    }
    #js:hover{
      width: 100px;
      height: 70px;
      background: tomato;
      border-radius: 10px;
      line-height: 70px;
    }
    .jp{
      border:3px solid #CD5C5C;
      border-radius:10px;
      width:95px;
      height:23px;
      background:#ff3030;
      padding-top:5px;
      text-align:center;
      color: #ff7ee1;
    }
    #jp{
      width: 100%;
      height: 200px;
      background: orangered;
      position: absolute;
      margin-top: 300px;
    }
    #jp span{
     font-size: 30px;
    }
    #tx{
      font-size: 60px;
      color: #fff;
    }
  </style>
</head>
<body>
   <h1>抽奖了</h1>
   <p id="ks" onclick="ks()">开始抽奖</p><!--如何通过一个按钮实现开始和关闭？-->
   <p id="js" onclick="gb()">停止抽奖</p>
   <p id="jp"><span>恭喜你获得了：</span><span id="tx"></span></p>
<script>
  var arr=["三星","苹果","华为·荣耀","小米","魅族","中兴·努比亚","酷派","vivo（蓝厂）","oppo(绿厂)"];
  //循环添加的数组
  var lieshu=3;//列数
  console.log(arr.length);
  console.log("可以分："+arr.length/lieshu+"行");
  for(var i=0;i<arr.length/lieshu;i++){//控制行数
    for(var j=0;j<lieshu;j++){//控制列
      if(i*lieshu+j<arr.length){
        console.log("循环最内层："+i*lieshu+j);
        document.write("<p id=\"jiang"+(i*lieshu+j)+"\" class=\"jp\" style =\"" +
          "position:absolute;left:"+(j*110+500)+"px;" +"top:" +(i*50+200)+"px;\">"+
          arr[i*lieshu+j]+"</p>");
           /*  document.write 网页内写文件
              i*lieshu+j 为个数
           *   (j*110+500) 110 为列边距 500为整个表格；列偏移
           *   (i*40+300)  40 行间距  300为整个表格；列偏移
           *
           * */
       }
    }
  }
  var bs=-1;//用于循环过后变色
  var t;
 function ks(){
   /* 开始变色的方法*/
   if(bs!=-1){
    document.getElementById("jiang"+bs).style.background="#ff3030";
    }
    var shuijisu=Math.floor(Math.random()*arr.length);//生成arr.length个 随机数向下取证
    document.getElementById("jiang"+shuijisu).style.background="#3500cc";

    bs =shuijisu;//shuijisu 代指添加元素的下表
    t =setTimeout("ks()",100);
 }
function gb() {
  clearTimeout(t);
  document.getElementById("tx").innerHTML =document.getElementById("jiang"+bs).innerHTML;
//修改id="tx"类的值

}
</script>
</body>
</html>

The above is the detailed content of js image and text code sharing to achieve lottery effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript implementation of Tab click switching example code sharing (picture and text)Next article：JavaScript implementation of Tab click switching example code sharing (picture and text)

See more

js image and text code sharing to achieve lottery effect

Related articles