【原创】垃圾分类查询网页源码

ADUN · 发表于 2022-5-16 21:16:22

简约单页，代码精简明确。
自适应+AJAX查询，官方接口目前稳定。
有免费的威望，可以送点？
完整源码
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<meta http-equiv="Access-Control-Allow-Origin" content="*">

<title>垃圾分类查询</title>

<meta name="keywords" content="垃圾分类查询" />

<meta name="description" content="垃圾分类查询" />

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<style>

body,html{height:100%;}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

a{color:#333;text-decoration:none;}

input{outline:0;}

.color{color:#4caf50;}

.colored{color:#f44336;}

li,ul{list-style:none;}

.container{position:relative;margin:0 auto;width:1024px;max-width:100%;}

.main{margin-top:20px;margin-bottom:15px;padding:0 15px;}

.content-body,.main{position:relative;overflow:hidden;}

.content-body{border:1px solid #eee;border-radius:4px;background:#fff;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}

.content-left{overflow:hidden;width: 100%;border-bottom: 1px solid #eee;background-color:#f8f8f8;color:#333;text-align:center;letter-spacing:2px;}

.content-left,.content-right{position:relative;float:left;height:100%;}

.content-right{padding:20px;width:100%;background-color:#fff;letter-spacing:1px;}

.content-left .avatar{position:relative;overflow:hidden;margin:0 auto;padding: 10px 0;}

.content-left .avatar img{width:90px;height:90px;max-width:100%;border:0;border-radius:50%;vertical-align:middle;font-size:100%;transition: transform.5s ease-out;border: 2px solid #fff;}

.content-left .avatar img:hover{transform: rotate(360deg);}

.content-left .device{z-index:1;overflow:hidden;width:100%;margin-bottom: 15px;}

.content-left .device .name{height:1pc;font-size:1pc;line-height:1pc;}

.content-left .device .qq{margin-top:9pt;height:9pt;font-size:9pt;line-height:9pt;opacity:.5;}

.content-right .title{color:#666;text-align:center;letter-spacing:2px;font-weight:700;font-size:18px;}

.content{position:relative;overflow:hidden;margin-top:30px;margin-bottom:15px;}

.content .content-box{display:flex;margin-bottom:15px;max-width:100%;align-items:flex-end;}

.content-box .content-key{display:inline-block;max-width:calc(100% - 7.5rem);flex:1;}

.content-box .content-key input{box-sizing:border-box;width:100%;background-color:transparent;}

.content-box .content-key input,.content-box button{display:inline-block;padding:10px 15px;outline:0;border:1px solid #dcdee0;color:#333;line-height:1pc;}

.content-box button{position:relative;left:-.0625rem;width:7.5rem;background-color:#fff;font-size:14px;cursor:pointer;}

.tips{padding:10px;border:1px solid #ddd;border-radius:4px;color:#666;font-size:14px;}

.tips h1{margin:auto -10px;padding-bottom:10px;padding-left:10px;border-bottom:1px solid #ddd;font-size:14px;}

.tips .tips-content,.tips .tips-submit{overflow:hidden;margin-top:15px;}

.tips .tips-content #text{position:relative;float:left;padding:6px 9pt;width:100%;height:34px;border:1px solid #ccc;border-radius:4px;background-color:#fff;background-image:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);color:#555;font-size:14px;line-height:1.42857143;}

.tips .tips-submit{text-align:center;}

.tips .tips-submit a{display:inline-block;padding:8px 1pc;border:1px solid #dedede;border-radius:2px;color:#666;line-height:1;cursor:pointer;}

.tips .tips-submit a:first-child{color:#4caf50;margin-right: 5px;}

footer{overflow: hidden;padding:10px 15px;border:1px solid #eee;font-size:9pt;border-radius: 4px;border-top: 0;border-top-left-radius: 0;border-top-right-radius: 0;}

footer .footer-left{float:left;}

footer .footer-right{float:right;}

</style>

</head>

<body>

<div class="container">

            <div class="main">

                        <div class="content-body">

                                    

                                    <div class="content-left">

                                                   <div class="avatar">

                                                               <img src="https://69560.cn/api/qq.php/?qq=1410469560" alt="LOGO头像">

                                                   </div>

                                                   <div class="device">

                                                               <p class="name">不懂网</p>

                                                               <p class="qq">御风而行,踏破天穹</p>

                                                   </div>

                                    </div>

                                    

                                    <div class="content-right">

                                                   <div class="title">垃圾分类查询</div>

                                                   <div class="content">

                                                         <div class="content-box">

                                                                        <div class="content-key">

                                                                                    <input type="text" name="keyword" id="url" placeholder="输入垃圾名称">

                                                                              </div>

                                                                              <button type="submit" id="ajax_key">查询</button>

                                                               </div>

                                                               <div id="tips"></div>

                                                   </div>

                                    </div>

                        </div>

                        <footer>

                                    <span class="footer-left">? 2019 Copyright <a href="" title="不懂网">不懂网</a></span>

                                    <span class="footer-right">

                                                   <a rel="nofollow"  target="_blank" title="粤ICP备18156222号">粤ICP备18156222号</a>

                              </span>

                        </footer>

            </div>

</div>



<script type="text/javascript">

$(document).ready(function(){

            $('#ajax_key').click(function (){

                        var keyword = $('#url').val();

                        if (keyword == '') {

                                    alert('关键词不能为空');

                                    return false;

                        }

                        $.ajax({

                                    url: "https://69560.cn/api/key.php?key=",

                                    type: "GET",

                                    dataType: "json",

                                    data:"key="+$.trim($("#url").val()),

                                    success:function(data){

                                                   var oDiv = document.getElementById('tips');

                                                   oDiv.innerHTML = '<div class="tips"><h1>温馨提示：<span class="color">' + data.msg + '</span></h1><div class="tips-content"><li style="margin-bottom: 15px;">' + data.name + '</li><li>' + data.type + '</li></div></div>';

                                    }

                        });

            });

});

</script>

</body>

</html>
复制代码

相关帖子