星座运势

Posted verayangnakiss

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了星座运势相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   .box{
    width: 350px;
    height: 250px;
    /*border: black soild 1px;*/
    margin: 100px auto;
    background-color: white;
   }
   .dt{
    padding-left: 10px;
    line-height: 35px;
    font-weight: 700;
    color: black;
   }
   .dd{
    padding: 25px;
   }
   .icon{
    width: 50px;
    height: 50px;
    float: left;
    background: url(img/4.jpg);
    margin-right: 10px;
   }
   .dd-t{
    overflow: hidden;
   }
   .yunshi{
    width: 80px;
    height: 13px;
    display: inline-block;
    background: url(img/0.png);
    position: relative;
   }
   .start{
    width: 0px;
    height: 13px;
    top: 0;
    left: 0;
    position: absolute;
    background: url(img/0.png) bottom;
   }
  </style>
  <script type="text/javascript">
   window.onload = function(){
    function $(id){
     return document.getElementById(id);
    }
    var arr= [1,3,2,5,4];
    var text = [15,16,17,18,19]
//    function fn(yunshsi){
//     $("content").innerHTML = ‘123‘;
//     $(‘star‘).style.width = yunshi*8+"px";
//    }
    var sele = document.getElementById(‘sele‘);
    sele.onchange = function(){
//     alert(this.value);
     $("ico").style.backgroundPosition = "0"+(-this.value*50)+‘px‘;
     
     $("content").innerHTML = text[this.value];
     $(‘star‘).style.width = arr[this.value]*16+"px";
//     switch(this.value){
//      case "0":
//      fn(arr[this.value]);
//      break;
//      case "1":
//      fn(9);
//      break;
//     }
    }
   }
  </script>
 </head>
 <body>
  <div class="box" style="border: solid grey 1px;">
   <div class="dt">星座运势</div>
   <div class="dd">
    <div class="dd-t">
     <div class="icon" id="ico"></div>
     <div class="right">
      <select id="sele">
       <option value="0">白羊座 03.21-04.19</option>
       <option value="1">金牛座03.21-04.19</option>
       <option value="2">天枰座03.21-04.19</option>
       <option value="3">水瓶座03.21-04.19</option>
       <option value="4">处女座03.21-04.19</option>
       
      </select>
      <div>今日运势:<span class="yunshi">
       <span class="start" id="star"></span>
      </span></div>
     </div>
    </div>
    <div class="dd-b" id="content">
     这几天遇上你很强,但是很危险,不到好处说充电宝还几万回复别克
     北侧不错不成
    </div>
   </div>
  </div>
 </body>
</html>

以上是关于星座运势的主要内容,如果未能解决你的问题,请参考以下文章

星座运势

星座运势下拉

HarmonyOS JS卡片之“星座运势”卡片开发

练手小项目-生活小助手--星座运势查询

独立开发人员er Cocos2d-x实战 013Cocos2dx 网络编程实战之星座运势

❤️Android Studio实现一个星座配对APP❤️