mirror of
https://github.com/zhaoolee/ChineseBQB.git
synced 2026-01-13 06:14:57 +08:00
147 lines
3.6 KiB
HTML
147 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>PP制造计划开源表情包</title>
|
|
</head>
|
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
|
|
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
|
|
crossorigin="anonymous"
|
|
/>
|
|
|
|
<!--
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> -->
|
|
|
|
<body>
|
|
<style>
|
|
body {
|
|
margin: 20px;
|
|
};
|
|
|
|
#imgs_container {
|
|
display: flex;
|
|
};
|
|
</style>
|
|
|
|
<nav class="navbar navbar-light bg-light">
|
|
<a class="navbar-brand" href="#">
|
|
<img
|
|
src="https://www.v2fy.com/asset/0i/ChineseBQB/031Penguin_%E6%B2%99%E9%9B%95%E4%BC%81%E9%B9%85%F0%9F%90%A7BQB/000000031.gif"
|
|
width="30"
|
|
height="30"
|
|
class="d-inline-block align-top"
|
|
alt=""
|
|
loading="lazy"
|
|
/>
|
|
PP制造计划开源表情包
|
|
</a>
|
|
</nav>
|
|
|
|
<div style="height: 50px"></div>
|
|
|
|
<div class="input-group mb-3">
|
|
<input
|
|
type="text"
|
|
id="bqb_key"
|
|
class="form-control"
|
|
placeholder="请输入表情包关键词"
|
|
aria-label="Recipient's usernam"
|
|
aria-describedby="button-addon2"
|
|
/>
|
|
</div>
|
|
|
|
|
|
<div id="imgs_container">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- 数据源https://www.v2fy.com/asset/0i/ChineseBQB/chinesebqb_v2fy.json -->
|
|
|
|
<script>
|
|
jQuery.get("./chinesebqb_v2fy.json", chinesebqb_v2fy => {
|
|
console.log("chinesebqb_v2fy==>>", chinesebqb_v2fy);
|
|
|
|
|
|
let key_val_img_info_list = [];
|
|
|
|
// 监听input内容变化
|
|
$("#bqb_key").bind("input propertychange", function(event) {
|
|
console.log($("#bqb_key").val());
|
|
|
|
|
|
var key_val = $("#bqb_key").val();
|
|
|
|
if(key_val !== ""){
|
|
|
|
|
|
key_val_img_info_list = [];
|
|
}
|
|
|
|
|
|
var chinesebqb_v2fy_data = chinesebqb_v2fy.data;
|
|
|
|
|
|
for(var m =0, chinesebqb_v2fy_data_length = chinesebqb_v2fy_data.length; m < chinesebqb_v2fy_data_length; m++){
|
|
|
|
|
|
if(chinesebqb_v2fy_data[m]["name"].indexOf(key_val) !== -1){
|
|
|
|
key_val_img_info_list.push(chinesebqb_v2fy_data[m]);
|
|
|
|
|
|
|
|
|
|
}
|
|
};
|
|
|
|
|
|
console.log(key_val+"key_val_img_info_list==>>", key_val_img_info_list);
|
|
// 将获得的信息展示到网页
|
|
|
|
let img_inner_html = "";
|
|
for(let n = 0, key_val_img_info_list_length=key_val_img_info_list.length; n<key_val_img_info_list_length; n++){
|
|
|
|
var img_html = '<div style="text-align: center; flex: 0 1 100px"><img style="width: 100%" src='+ key_val_img_info_list[n]["url"] + '></img><br/>'+ key_val_img_info_list[n]["name"] + '<hr/>' +'<div>'
|
|
|
|
|
|
img_inner_html += img_html
|
|
}
|
|
|
|
|
|
$("#imgs_container").html(img_inner_html);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|