星座運勢

時間 2019-11-11

標籤星座運勢简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    * {margin: 0;padding: 0;}.box {width: 278px;height: 157px;margin: 50px auto;border: 1px solid #D2E1F1;
}.box-head {border-bottom: 1px dotted #cccccc;}.box-head h3 {font: 400 18px/35px "simsun";padding-left: 20px;}.box-body {width: 210px;height: 50px;margin-left: 10px;background: url(images/xingzuo.png) no-repeat;}.box-body a {display: inline-block;width: 50px;height: 50px;float: left;}select {margin: 3px 0 0 10px;}.star {position: relative;}#sp1 {display: inline-block;width: 80px;height: 18px;background: url(images/star.png) no-repeat;position: absolute;top: 4px;right: 0;}#sp2 {display: inline-block;height: 13px;background: url(images/star.png) no-repeat 0 -29px;}.box-footer p {line-height: 24px;height: 70px;font-size: 14px;padding: 0 15px 4px;}
    </style>
</head>
<body>
<div class="box">
    <div class="box-head"><h3>星座運勢</h3></div>
    <div class="box-body" id="boxBody">
        <a href="#"></a>
        <select name="" id="sele">
            <option value="0">白羊座(03.21-04.19)</option>
            <option value="1">金牛座(04.20-05.20)</option>
            <option value="2">雙子座(05.21-06.21)</option>
            <option value="3">巨蟹座(06.22-07.22)</option>
            <option value="4">獅子座(07.23-08.22)</option>
            <option value="5">處女座(08.23-09.22)</option>
            <option value="6">天秤座(09.23-10.23)</option>
            <option value="7">天蠍座(10.24-11.22)</option>
            <option value="8">射手座(11.23-12.21)</option>
            <option value="9">摩羯座(12.22-01.19)</option>
           <option value="10">水瓶座(01.20-02.18)</option>
           <option value="11">雙魚座(02.19-03.20)</option>
        </select>
        <div class="star">今日運勢：<span id="sp1"> <span id="sp2"></span></span></div>
    </div>
    <div class="box-footer" id="con">
        <p>你也許感到實現理想的旅途並不順利，充滿了荊棘與坎坷，與一開始所想的並不同，所以更須要耐心... <a href="#">[詳細]</a></p>
    </div>
</div>
</body>
</html>
<script>
    //需求 ： 選擇不一樣星座，顯示不一樣的圖片和運勢之內容；
    //步驟：1 獲取事件源和相關盒子
    //     2.綁定事件
    //     3.書寫事件驅動程序
            //1 獲取事件源和相關盒子
    var sele = document.getElementById("sele");
    var boxBody = document.getElementById("boxBody");
    var sp2 = document.getElementById("sp2");
    var con =document.getElementById("con");
    var arrcon =[
        "<p>你也許感到實現理想的旅途並不順利,充滿了荊棘與坎坷,與一開始所想的並不同,所以更須要耐心... <a href='#'>[詳細]</a></p>",
        "<p>今天你容易被財務困住了步伐，有些金牛可能會要償還貸款，爲他人還帳，或者要面對一些財務上的困... <a href='#'>[詳細]</a></p>",
        "<p>今天的你彷彿患上了星期一綜合症，狀態再次凍結了有木有。即便你很歡呼雀躍地與身邊人分享想法，...<a href='#'>[詳細]</a></p>",
        "<p>工做日的第一天，你卻有些顯得精神萎頓，不只容易沒睡好，也可能感到大腦沒法運做，我的陷入一種... <a href='#'>[詳細]</a></p>",
        "<p>今天的你在人羣中顯得至關活躍，和他人聊聊八卦都能體現出你獨特的一面。可是你又感到自我表達不...<a href='#'>[詳細]</a></p>",
        "<p>今天你的我的狀態容易受家庭事務的牽連，工做上躍躍欲試卻感到打不起精神。混亂的思緒也可能使你...<a href='#'>[詳細]</a></p>",
        "<p>工做日的第一天你卻有點使不上勁，在工做領域容易消極怠工，或者思緒困頓，感到多說多錯，大腦也...<a href='#'>[詳細]</a></p>",
        "<p>你可能會感到一些財務上多壓力，入不敷出，或者須要不斷的借款彌補漏洞，請客開銷比落入你本身口...<a href='#'>[詳細]</a></p>",
        "<p>今天你有些糾結，特別須要留意和身邊親近的人相處，將面臨種種考驗。這不是適合表白的一天，由於...<a href='#'>[詳細]</a></p>",
        "<p>今天的你可能感到工做上的我的價值能以呈現，有一種爲他人作嫁衣的感覺，甚至你的一些功勞和業績... <a href='#'>[詳細]</a></p>",
        "<p>今天的你可能會喪失玩樂的興致，一些聚會和娛樂活動，可能由於人員問題，致使既破財，又不能盡興... <a href='#'>[詳細]</a></p>",
        "<p>工做可能會給你帶來泰山壓頂的感受，讓你感到暫時缺乏突破口，也反而更加迷茫。你也可能會有一些...<a href='#'>[詳細]</a></p>"
        ]
    var arrsp2 =[5,4,8,1,9,10,3,6,2,10,7,10];
    sp2.style.width = arrsp2[0]*8+"px";
    sele.onchange = function (){
        boxBody.style.backgroundPositionY = "-"+50*[this.value]+"px";
        sp2.style.width = arrsp2[this.value]*8+"px";
        con.innerHTML = arrcon[this.value];
    }
</script>

　　圖片資源：html

效果圖：數據庫

Tips：渲染的數據能夠從後臺數據庫中調取！佈局

不知道您是否留意過QQ首頁的右側邊欄，有一個星座運勢的小功能模塊，今天咱們就來看看他的佈局和原理是怎麼實現的？實際上是精靈圖結合JavaScript的this使用；代碼很簡單。首先不一樣的星座日期對應着精靈圖上的不一樣星座圖標，設置星座選項的value從0到11，乘以50取負數的px值就是對應的星座圖片，由於這裏的圖片都是設計好了的。同時運勢的星星也要跟着變，這裏是怎麼實現的呢？實際上是兩張圖片的疊加，亮星星放在上面，只要設置它的寬度，就能顯示不一樣星級，五顆星分爲10份，半顆星8px，因此這裏能夠經過0-10不一樣的取值就決定了有幾顆星或者幾顆半新，同時顯示對應的p。若是您看了源碼，不難發現，這些元素之間的關聯是經過this.value；也就是當前選中選項的value值。this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。