Widget:战斗模拟计算器

<head>

   <style type="text/css">
       * {
           margin: 0;
           padding: 0;
       }

       /*定义进度条的背景*/
       #main1 {
           width: 180px;
           height: 20px;
           background: rgba(255, 255, 255, 0.807);
           overflow: hidden;
           margin: 0 auto;
       }

       /*定义进度条*/
       #progress1 {
           width: 100%;
           height: 20px;
           margin-top: 1px;
           background: rgb(255, 25, 0);
       }

       #man1 {
           width: 180px;
           height: 10px;
           background: rgba(255, 0, 0, 0);
           overflow: hidden;
           margin: 0 auto;
       }

       #progre1 {
           width: 100%;
           height: 10px;
           margin-top: 1px;
           background: rgb(17, 233, 225);
       }

       #main2 {
           width: 100px;
           height: 40px;
           background: rgba(10, 10, 10, 0);
           overflow: hidden;
           margin: 0 auto;
       }

       /*定义进度条*/
       #progress2 {
           width: 100%;
           height: 40px;
           margin-top: 1px;
           background: rgb(64, 255, 0);
       }

       button {
           display: block;
           margin: 0 auto;
           width: 60px;
           height: 30px;
       }

       .YX1bk {
           height: 200px;
           width: 180px;
       }

       .YX1tupian {
           height: 200px;
           width: 180px;
       }

       .YX1tupian #YX1yangzipic {
           position: absolute;
           margin-top: 0px;
           margin-left: 0px;
           z-index: 0;
       }

       .YX1tupian #YX1yangzipic img {
           height: 200px;
           width: 180px;
       }

       .YX1tupian .YX1xiaopic {
           position: absolute;
           margin-top: 145px;
           margin-left: 0px;
           height: 20px;
           width: 180px;
           z-index: 0;
       }

       .YX1tupian .YX1xiaopic img {
           height: 20px;
           width: 20px;
       }

       .YX1xiaopic #tubiao1 {
           position: absolute;
           height: 20px;
           width: 20px;
           margin-left: 0px;
       }

       .YX1xiaopic #tubiao2 {
           position: absolute;
           height: 20px;
           width: 20px;
           margin-left: 20px;
       }

       .zdbufen {
           height: 720px;
           width: 720px;
           display: flex;
           flex-wrap: wrap;
           background-image: url(https://patchwiki.biligame.com/images/dxcb2/9/97/i08nzactyr3vb022zx1eneru94zlgbb.jpg);
           background-size: cover;

       .biankuang {
           width: 180px;
           height: 25px;
           font-size: 22px;
           text-align: center;
           border: none;
           position: relative;
           z-index: 1;
       }

       .yx1mingzi {
           width: 180px;
           height: 20px;
       }

       .tubiaozi {
           width: 20px;
           height: 10px;
           border: none;
           font-size: 1px;
       }

       .yxzongkuang {
           width: 180px;
           height: 250px;
       }

       .qitabufen {
           width: 720px;
           height: 470px;
       }
   </style>

</head>

<body>

                   <input class="biankuang" id="shu" disabled="disabled" value="">

                           <input class="tubiaozi" style="color: blue;" id="tubiao11" disabled="disabled" value="999">

                   <input style="color: rgb(1, 1, 1);background: rgba(255, 255, 255, 0.1);" type="Number" id="result"
                       value="" disabled="disabled">

               <input class="yx1mingzi" type="text" id="zhiye1" value="">

               <input style="color: brown;background: rgba(255, 255, 255, 0.1);" type="Number" id="result" value=""
                   disabled="disabled">

       <input class="sValue form-control" style="color: brown;" type="Number" id="shuru" value="">

       <select name="YX1zhiye" id="YX1zhiye">
           <option value="0">未选择</option>
           <option value="神官骑士">神官骑士</option>

       </select>

   <button id="bid">start</button>

           <input class="sValue form-control" type="Number" id="yijizhuangtai" value="">

</body> <script type="text/javascript">

   //利用setInterval函数实现进度条变化效果
   var texto = 1;
   function onImageClick() {
       //console.log("111");
       alert('图片被点击了');
       texto = 2;
       return 0;
   }

   $(document).ready(function () {

       Math.formatFloat = function (f, digit) {
           var m = Math.pow(10, digit);
           return Math.round(f * m, 10) / m;
       }

       //console.log(onImageClick());
       function setColor() {
           //console.log("111");
           var h3 = document.getElementById("shu");
           var suijishu = Math.floor(Math.random() * 100 + 1);
           if (suijishu > 50) {
               h3.style.color = "red";
           } else {
               h3.style.color = "green";
           }
           return 0;
       }
       var images = [];
       var img1 = new Image();
       img1.src = "https://patchwiki.biligame.com/images/dxcb2/b/b6/8xhdtrgn7b5he415u1kovk29ellxcbr.png";
       images.push(img1);
       var img2 = new Image();
       img2.src = "https://patchwiki.biligame.com/images/dxcb2/5/52/brh89vfy00wssoc6rg1xsy5zzf0lpm6.png";
       images.push(img2);
       $("#YX1zhiye").change(function () {//完成
           var img = $('#YX1zhiye').val();
           if (img == '神官骑士') {
               $("#YX1yangzipic").html('<img src="https://patchwiki.biligame.com/images/dxcb2/0/01/03xg7a43gxlxhvm6zb85hfz8venb3ah.png">');
           }
       });
       window.onload = function () {
           var obj = document.getElementById("tubiao1");
           var a = obj.getElementsByTagName("img");
           var num = 0;
           if (a.length > 0) {
               //console.log("chenggong");
               num = 1;
           } else {
               num = 0;
           }
           return num;
       }
       var xiaotubiao = function (a) {

           var am = window.onload();
           if (a > 500) {
               $("#tubiao1").html(images[1]);
               $("#tubiao2").html(images[0]);
           } else {
               $("#tubiao2").html(images[1]);
               $("#tubiao1").html(images[0]);
           }
           return 0;
       }
       var shuxing = function () {
           var shuru = $('#shuru').val();
           var num = Number(shuru) * 10;
           return num;
       }
       bid.onclick = function () {
           var pro = 100;
           var result = shuxing();
           var a1 = 10000;
           var a2 = 1000;
           var times = 0;
           var miaos = 0;
           var fens = 0;
           bar = setInterval(function () {
               if ((times % 1 == 0) && (times != 0)) {
                   miaos = miaos + 1;
               }
               if ((miaos % 60 == 0) && (miaos > 0)) {
                   miaos = 0;
                   fens = fens + 1;
               }
               document.getElementById("shizhong").innerHTML = fens + " : " + miaos;
               var m1 = xiaotubiao(a2);
               var m = setColor();
               if (a2 >= 0) {
                   pro = Math.floor(a2 / a1 * 100);
                   if (a2 != 0) {
                       a2 = a2 - 5;
                   }
               }
               if (texto == 2) {
                   console.log("ke");
                   texto = 1;
               }
               //console.log(pro);
               result = a2;
               $("#result").val(result);
               $("#shu").val(result);
               //console.log(result);
               if ((pro <= 0) || (pro > 100)) {
                   clearInterval(bar);
               }
               progress1.style.width = pro + "%";
               progress2.style.width = pro + "%";
               times = times + 0.1;
               //console.log("111");
               times = Math.formatFloat(times, 1);
           }, 100);
       }

       var fanhui = function () {
           var img = $('#YX1zhiye').val();
           $("#zhiye1").val(img);
           var num = 1;
           return num;
       }
       $("input").bind("input propertychange", function () {
           shuxing();
           setColor();
           fanhui();
       })
   })

</script>

</html>

Widget:战斗模拟计算器

WIKI功能

评论