源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储布尔值

来源：互联网发布：nginx 在线人数统计编辑：程序博客网时间：2024/06/03 04:15

难点：这个示例的难点在于instock和shipping两种状态对应的图标的控制，到现在还没搞明白（还得回头补补CSS的课）

示例效果：

JS代码如下：

// Create variables and assign their valuesvar inStock;var shipping;inStock = true;shipping = false;// Get the element that has an id of stockvar elStock = document.getElementById('stock');// Set class name with value of inStock variableelStock.className = inStock;// Get the element that has an id of shippingvar elShip = document.getElementById('shipping');// Set class name with value of shipping variableelShip.className = shipping;

HTML代码如下：

<!DOCTYPE html><html>  <head>    <title>JavaScript & jQuery - Chapter 2: Basic JavaScript Instructions - Boolean Variable</title>    <link rel="stylesheet" href="css/c02.css" />  </head>  <body>    <h1>Elderflower</h1>    <div id="content">      <div class="message">Available: <span id="stock"></span></div>      <div class="message">Shipping: <span id="shipping"></span></div>    </div>    <script src="js/boolean-variable.js"></script>  </body></html>

CSS代码：（参考：源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储数字，http://blog.csdn.net/hpdlzu80100/article/details/52669264）

0 0