垃圾分类查询网页源码

自适应+AJAX查询,官方接口目前稳定。

接口采用蓝优tools

垃圾查询

完整源码

<!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">©&nbsp;2019 Copyright&nbsp;<a  href="" title="优梦云">优梦云</a></span>
 <span class="footer-right">
 <a rel="nofollow" href="http://gd.beian.miit.gov.cn/" target="_blank" title="粤ICP备18156222号">粤ICP备18156222号</a>
     </span> 
 </footer>
 </div>
</div>
<!-- JS输出 -->
<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>