Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
​
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
​
    <body>
        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        
        <!-- 以上語法是Materialize CSS下載後的初始化引用動作 http://materializecss.com/getting-started.html#setup -->
        <!---------------------------------------------------------------------------------------------------------->
​
        <!-- 頁首語法參見 http://materializecss.com/breadcrumbs.html -->
        <nav>
            <div class="nav-wrapper">
                <div class="col s12">
                    <a href="#!" class="breadcrumb">健康記錄</a>
                    <a href="#!" class="breadcrumb">BMI計算</a>
                </div>
            </div>
        </nav>  
        
        <!-- Radio Buttons輸入方式語法參見 http://materializecss.com/forms.html#radio -->
        <p>
          <input name="group1" type="radio" id="A" checked />
          <label for="A">男</label>
        </p>
        <p>
          <input name="group1" type="radio" id="B" />
          <label for="B">女</label>
        </p>
        <br>
        
        <!-- Range輸入方式語法參見 http://materializecss.com/forms.html#range -->
        <p class="range-field">
          身高: <input type="range" id="H" min="100" max="200" />
        </p>
        <p class="range-field">
          體重: <input type="range" id="W" min="30" max="120" />
        </p>
        
        <!-- Submit按鈕樣式語法參見 http://materializecss.com/buttons.html#submit -->
        <button class="btn waves-effect waves-light" type="submit" name="action" onclick="javascript:f()">Submit
            <i class="material-icons right">send</i>
        </button>
​
        <!-- Card樣式語法參見 http://materializecss.com/cards.html#image -->
        <!-- 而且一開始先把display屬性設定成none就會看不見 -->
        <div class="row" style="display:none" id="C">
            <div class="col s12 m7">
                <div class="card">
                    <div class="card-image" id="CI">
                        <img src="images/sample-1.jpg">
                        <span class="card-title"Card Title</span>
                    </div>
                    <div class="card-content" id="CP">
                        <p>I am a very simple card. I am good at containing small bits of information.
                        I am convenient because I require little markup to use effectively.</p>
                    </div>
                    <div class="card-action" id="CL">
                        <a href="#">This is a link</a>
                    </div>
                </div>
            </div>
        </div>      
​
        <!-- 頁尾語法參見 http://materializecss.com/footer.html -->
        <footer class="page-footer">
            <div class="footer-copyright">
                <div class="container">
                    © 2016 Copyright 
                </div>
            </div>
        </footer>
​
        
        <script>
            function f()
            {
                var a = document.getElementById("A").checked;
                var b = document.getElementById("B").checked;
                var h = document.getElementById("H").value;
                var w = document.getElementById("W").value;
                
                // alert("a="+a + " b="+b + " h="+h + " w="+w);
                
                // Style display Property語法參見 http://www.w3schools.com/jsref/prop_style_display.asp
                document.getElementById("C").style.display = "block";
                
                var bmi = w / ((h/100)*(h/100));
                if ( bmi < 18.5) 
                   {
                    alert("過輕");
                   }
                else if ( bmi < 24) 
                   {
                    document.getElementById("CI").innerHTML = '<img src="http://m1.ablwang.com/uploadfile/2014/0308/20140308015424929.jpg" style="width:100%" /><span class="card-title">標準</span>';
                    document.getElementById("CP").innerHTML = '<p>國民健康署建議我國成人BMI應維持在18.5(kg/m2)及24(kg/m2)之間，太瘦、過重或太胖皆有礙健康。</p>';
                    document.getElementById("CL").innerHTML = '<a href="http://www.google.com">繼續閱讀...</a>';
                   }
                else if ( bmi < 27) 
                   {
                    alert("過重");
                   }
                else  
                   {
                    alert("肥胖");
                   }            
            }
        </script>
           
      </body>
  </html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers