2021-06-04前端

<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.12.4.min.js"></script>
<title>环保网</title>

保护地球就是保护全人类

首页 爱心义卖 联系我们

---

            <span id="img1"><img src="./images/graphics/highlight_orange.png"></span>
            <span class="sp" id="sp1">LIFT</span>
            <input type="image" value="LIFE" src="./images/button_visitors.jpg"  id="bt1">
            <span id="img2"><img src="./images/graphics/highlight_red.png"></span>
            <span class="sp" id="sp2">NEWS</span>
            <input type="image"  value="NEWS" src="./images/button_teachers.jpg"  id="bt2">
            <span id="img3"><img src="./images/graphics/highlight_blu.png"></span>
            <span class="sp" id="sp3">COOPERATION</span>
            <input type="image" value="COOPERATION" src="./images/button_events.jpg"  id="bt3">
            <span id="img4"><img src="./images/graphics/highlight_gold.png"></span>
            <span class="sp" id="sp4">FUTURE</span>
            <input type="image"  value="FUTURE" src="./images/button_kids.jpg"  id="bt4">
        </div>
        <div id="resource_list" class="list"></div>
        <div class="environment">

        </div>
        <div class="should">
            <h1>我们该做什么</h1>
            <img src="./images/Copy%20of%20Picture8%20copy%20copy%20copy.png">
            <span>更多</span>
        </div>
        </div>
        <div class="infoimg">
            <img src="./images/flashholder.jpg">
        </div>
        <div class="links">
            <h1>快速连接</h1>
            <ul>
                <li><a href="javascript:;">中国环保网</a></li>
                <li><a href="javascript:;">环保网</a></li>
                <li><a href="javascript:;">环境自愿者网</a></li>
                <li><a href="javascript:;">上海环保网</a></li>
            </ul>
            <ul>
                <li><a href="javascript:;">中华环保网</a></li>
                <li><a href="javascript:;">环境保护协会</a></li>
                <li><a href="javascript:;">环境公共网</a></li>
            </ul>
        </div>
        <div class="tupianjianz1">
            <h1>图片见证</h1>
            <span>用图片见证人类的环保力量</span>
            <ul>
                <li><img src="./images/witness/bg9.jpg"></li>
                <li><img src="./images/witness/bg10.jpg"></li>
                <li><img src="./images/witness/bg11.jpg"></li>
                <li><img src="./images/witness/bg12.jpg"></li>
                <li><img src="./images/witness/bg13.jpg"></li>
            </ul>
        </div>
    </div>
    </div>
<div class="footer">
    <div class="foot-l">
    <span id="baohu">保护环境</span>
    <span> 保护地球 保护全人类</span>
    <span id="tel">电话</span>201-265201
    <br>
    <span>一起加入我们把让我们共创美好未来</span>
    </div>
    <div class="foot-logo">
        <img src="./images/5-star.jpg">
    </div>
    <div class="foot-right">
        <span>关于我们  联系我们 法律条款 网站地图</span>
    </div>
</div>
</div>
<script src="./mock/jquery.mockjax.js"></script>
<script src="./js/test.js"></script>
<script src="js/mustache.min.js"></script>
<script type="text/html" id="list-tmpl">
    {{#data}}
    <div class="infomation" id="hid">
        <input type="button" id="quit" value="退出"></div>
    <ul>
        <li>{{t1}}</li>
        <li>{{t2}}</li>
        <li>{{t3}}</li>
    </ul>
    <ul>
        <li>{{a1}}</li>
        <li>{{a2}}</li>
        <li>{{a3}}</li>
    </ul>

    </div>
    {{/data}}
</script>
<script type="text/html" id="en-tmpl">
    {{#data}}
    <div class="env">
        <h1>环境动态新闻</h1>
        <span>记录身边事情</span>
        <img src="{{src}}">
        <span>更多动态新闻</span>
    </div>
    {{/data}}
</script>
<script>
    var tmpl = $("#en-tmpl").html();
    var renderData = function (data) {
        //渲染页面
        Mustache.parse(tmpl);
        $("#environment").html(Mustache.render(tmpl,{data :data.list}))
    }

    //获取test.js数据
    $.ajax({
        url:"getDataSrc" ,
        type:"POST" ,
        dataType:"json",
        success: function (data) {
            //获取数据成功
            console.log(data);
            renderData(data);
        }
    })
</script>
<script>
    //点击退出
    $("#quit").on("click" ,function () {

    });

    //点击go弹出输入类容
    $("#btn1").on("click", function(){
        alert($("#input1").val());
    })
    var tmpl = $("#list-tmpl").html();
    var renderData = function (data) {
        //渲染页面
        Mustache.parse(tmpl);

        $("#resource_list").html(Mustache.render(tmpl,{data :data}))
    }
    //获取test.js数据
    $("#bt1").on("click" ,function () {
        $.ajax({
            url:"getData" ,
            type:"POST" ,
            dataType:"json",
            success: function (data) {
                //获取数据成功

                renderData(data.list[0]);
            }
        })
    });
    $("#bt2").on("click" ,function () {
        $.ajax({
            url:"getData" ,
            type:"POST" ,
            dataType:"json",
            success: function (data) {
                //获取数据成功

                renderData(data.list[1]);
            }
        })
    });
    $("#bt3").on("click" ,function () {
        $.ajax({
            url:"getData" ,
            type:"POST" ,
            dataType:"json",
            success: function (data) {
                //获取数据成功

                renderData(data.list[2]);
            }
        })
    })
    $("#bt4").on("click" ,function () {
        $.ajax({
            url:"getData" ,
            type:"POST" ,
            dataType:"json",
            success: function (data) {
                //获取数据成功

                renderData(data.list[3]);
            }
        })
    })
</script>

<script src="js/index.js"></script>

$.mockjax({
url :“getData” ,
status :200,
responseTime :1000,
response :function (setting) {
this.responseText={
list:[{
t1 : “环保行动”,
t2 :“环保低碳”,
t3:“低碳生活”,
a1:“自愿者行动”,
a2:“自愿者协会”,
a3:“日常生活环保”
},
{
t1 : “唐山减少再生科技园”,
t2 :“合肥市减少排放”,
t3:“新闻题目”,
a1:“新闻活动”,
a2:“自愿者协会新闻”,
a3:“中国主题”
},{
t1 : “环保行动”,
t2 :“环保低碳”,
t3:“低碳生活”,
a1:“自愿者行动”,
a2:“自愿者协会”,
a3:“日常生活环保”
},
{
t1 : “减少环保行动”,
t2 :“建设环保低碳”,
t3:“低碳生活”,
a1:“自愿者行动”,
a2:“自愿者协会”,
a3:“日常生活环保”
},

        ]
    }
}

})

$.mockjax({
url :“getDataSrc” ,
status :200,
responseTime :1000,
response :function (setting) {
this.responseText={
list:[{
src: “./images/carousel/CasualtiesAndSurvivors.jpg”
},
{
src: “./images/carousel/Earthscape.jpg”
},
{
src: “./images/carousel/HowItAllStarted.jpg”
},
{
src: “./images/carousel/Oceans.jpg”
},
{
src: “./images/carousel/CasualtiesAndSurvivors.jpg”
},
{
src: “./images/carousel/CasualtiesAndSurvivors.jpg”
},

        ]
    }
}

})