搜索到
111
篇与
的结果
-
一款好看圆环进程时钟html代码 先看看效果 上代码<html> <head> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body, button { color: #fff; font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { background-color: #1F1F1F; height: 100vh; display: grid; place-items: center; } .progress-clock { display: grid; justify-content: center; align-content: center; position: relative; text-align: center; width: 16em; height: 16em; } .progress-clock__time-date, .progress-clock__time-digit, .progress-clock__time-colon, .progress-clock__time-ampm { transition: color 0.2s linear; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .progress-clock__time-date, .progress-clock__time-digit { background: transparent; } .progress-clock__time-date, .progress-clock__time-ampm { grid-column: 1 / 6; } .progress-clock__time-date { font-size: 0.75em; line-height: 1.33; } .progress-clock__time-digit, .progress-clock__time-colon { font-size: 2em; font-weight: 400; grid-row: 2; } .progress-clock__time-colon { line-height: 1.275; } .progress-clock__time-ampm { cursor: default; grid-row: 3; } .progress-clock__rings { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .progress-clock__ring { opacity: 0.1; } .progress-clock__ring-fill { transition: opacity 0s 0.3s linear, stroke-dashoffset 0.3s ease-in-out; } .progress-clock__ring-fill--360 { opacity: 0; stroke-dashoffset: 0; transition-duration: 0.3s; } [data-group]:focus { outline: transparent; } [data-units] { transition: opacity 0.2s linear; } [data-group="d"]:focus, [data-group="d"]:hover { color: hsl(333,90%,55%); } [data-group="h"]:focus, [data-group="h"]:hover { color: hsl(33,90%,55%); } [data-group="m"]:focus, [data-group="m"]:hover { color: hsl(213,90%,55%); } [data-group="s"]:focus, [data-group="s"]:hover { color: hsl(273,90%,55%); } [data-group]:focus ~ .progress-clock__rings [data-units], [data-group]:hover ~ .progress-clock__rings [data-units] { opacity: 0.2; } [data-group="d"]:focus ~ .progress-clock__rings [data-units="d"], [data-group="d"]:hover ~ .progress-clock__rings [data-units="d"], [data-group="h"]:focus ~ .progress-clock__rings [data-units="h"], [data-group="h"]:hover ~ .progress-clock__rings [data-units="h"], [data-group="m"]:focus ~ .progress-clock__rings [data-units="m"], [data-group="m"]:hover ~ .progress-clock__rings [data-units="m"], [data-group="s"]:focus ~ .progress-clock__rings [data-units="s"], [data-group="s"]:hover ~ .progress-clock__rings [data-units="s"] { opacity: 1; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,10%); --fg: hsl(var(--hue),10%,90%); } .progress-clock__ring { opacity: 0.2; } } </style> </head> <body> <div id="clock" class="progress-clock"> <button class="progress-clock__time-date" data-group="d" type="button"> <small data-unit="w">Sunday</small><br> <span data-unit="mo">January</span> <span data-unit="d">1</span> </button> <button class="progress-clock__time-digit" data-unit="h" data-group="h" type="button">12</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="m" data-group="m" type="button">00</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="s" data-group="s" type="button">00</button> <span class="progress-clock__time-ampm" data-unit="ap">AM</span> <svg class="progress-clock__rings" width="256" height="256" viewBox="0 0 256 256"> <defs> <linearGradient id="pc-red" x1="1" y1="0.5" x2="0" y2="0.5"> <stop offset="0%" stop-color="hsl(343,90%,55%)" /> <stop offset="100%" stop-color="hsl(323,90%,55%)" /> </linearGradient> <linearGradient id="pc-yellow" x1="1" y1="0.5" x2="0" y2="0.5"> <stop offset="0%" stop-color="hsl(43,90%,55%)" /> <stop offset="100%" stop-color="hsl(23,90%,55%)" /> </linearGradient> <linearGradient id="pc-blue" x1="1" y1="0.5" x2="0" y2="0.5"> <stop offset="0%" stop-color="hsl(223,90%,55%)" /> <stop offset="100%" stop-color="hsl(203,90%,55%)" /> </linearGradient> <linearGradient id="pc-purple" x1="1" y1="0.5" x2="0" y2="0.5"> <stop offset="0%" stop-color="hsl(283,90%,55%)" /> <stop offset="100%" stop-color="hsl(263,90%,55%)" /> </linearGradient> </defs> <!-- Days of Month --> <g data-units="d"> <circle class="progress-clock__ring" cx="128" cy="128" r="74" fill="none" opacity="0.1" stroke="url(#pc-red)" stroke-width="12" /> <circle class="progress-clock__ring-fill" data-ring="mo" cx="128" cy="128" r="74" fill="none" stroke="url(#pc-red)" stroke-width="12" stroke-dasharray="465 465" stroke-dashoffset="465" stroke-linecap="round" transform="rotate(-90,128,128)" /> </g> <!-- Hours of Day --> <g data-units="h"> <circle class="progress-clock__ring" cx="128" cy="128" r="90" fill="none" opacity="0.1" stroke="url(#pc-yellow)" stroke-width="12" /> <circle class="progress-clock__ring-fill" data-ring="d" cx="128" cy="128" r="90" fill="none" stroke="url(#pc-yellow)" stroke-width="12" stroke-dasharray="565.5 565.5" stroke-dashoffset="565.5" stroke-linecap="round" transform="rotate(-90,128,128)" /> </g> <!-- Minutes of Hour --> <g data-units="m"> <circle class="progress-clock__ring" cx="128" cy="128" r="106" fill="none" opacity="0.1" stroke="url(#pc-blue)" stroke-width="12" /> <circle class="progress-clock__ring-fill" data-ring="h" cx="128" cy="128" r="106" fill="none" stroke="url(#pc-blue)" stroke-width="12" stroke-dasharray="666 666" stroke-dashoffset="666" stroke-linecap="round" transform="rotate(-90,128,128)" /> </g> <!-- Seconds of Minute --> <g data-units="s"> <circle class="progress-clock__ring" cx="128" cy="128" r="122" fill="none" opacity="0.1" stroke="url(#pc-purple)" stroke-width="12" /> <circle class="progress-clock__ring-fill" data-ring="m" cx="128" cy="128" r="122" fill="none" stroke="url(#pc-purple)" stroke-width="12" stroke-dasharray="766.5 766.5" stroke-dashoffset="766.5" stroke-linecap="round" transform="rotate(-90,128,128)" /> </g> </svg> </div> </body> <script> window.addEventListener("DOMContentLoaded",() => { const clock = new ProgressClock("#clock"); }); class ProgressClock { constructor(qs) { this.el = document.querySelector(qs); this.time = 0; this.updateTimeout = null; this.ringTimeouts = []; this.update(); } getDayOfWeek(day) { switch (day) { case 1: return "Monday"; case 2: return "Tuesday"; case 3: return "Wednesday"; case 4: return "Thursday"; case 5: return "Friday"; case 6: return "Saturday"; default: return "Sunday"; } } getMonthInfo(mo,yr) { switch (mo) { case 1: return { name: "February", days: yr % 4 === 0 ? 29 : 28 }; case 2: return { name: "March", days: 31 }; case 3: return { name: "April", days: 30 }; case 4: return { name: "May", days: 31 }; case 5: return { name: "June", days: 30 }; case 6: return { name: "July", days: 31 }; case 7: return { name: "August", days: 31 }; case 8: return { name: "September", days: 30 }; case 9: return { name: "October", days: 31 }; case 10: return { name: "November", days: 30 }; case 11: return { name: "December", days: 31 }; default: return { name: "January", days: 31 }; } } update() { this.time = new Date(); if (this.el) { // date and time const dayOfWeek = this.time.getDay(); const year = this.time.getFullYear(); const month = this.time.getMonth(); const day = this.time.getDate(); const hr = this.time.getHours(); const min = this.time.getMinutes(); const sec = this.time.getSeconds(); const dayOfWeekName = this.getDayOfWeek(dayOfWeek); const monthInfo = this.getMonthInfo(month,year); const m_progress = sec / 60; const h_progress = (min + m_progress) / 60; const d_progress = (hr + h_progress) / 24; const mo_progress = ((day - 1) + d_progress) / monthInfo.days; const units = [ { label: "w", value: dayOfWeekName }, { label: "mo", value: monthInfo.name, progress: mo_progress }, { label: "d", value: day, progress: d_progress }, { label: "h", value: hr > 12 ? hr - 12 : hr, progress: h_progress }, { label: "m", value: min < 10 ? "0" + min : min, progress: m_progress }, { label: "s", value: sec < 10 ? "0" + sec : sec }, { label: "ap", value: hr > 12 ? "PM" : "AM" } ]; // flush out the timeouts this.ringTimeouts.forEach(t => { clearTimeout(t); }); this.ringTimeouts = []; // update the display units.forEach(u => { // rings const ring = this.el.querySelector(`[data-ring="${u.label}"]`); if (ring) { const strokeDashArray = ring.getAttribute("stroke-dasharray"); const fill360 = "progress-clock__ring-fill--360"; if (strokeDashArray) { // calculate the stroke const circumference = +strokeDashArray.split(" ")[0]; const strokeDashOffsetPct = 1 - u.progress; ring.setAttribute( "stroke-dashoffset", strokeDashOffsetPct * circumference ); // add the fade-out transition, then remove it if (strokeDashOffsetPct === 1) { ring.classList.add(fill360); this.ringTimeouts.push( setTimeout(() => { ring.classList.remove(fill360); }, 600) ); } } } // digits const unit = this.el.querySelector(`[data-unit="${u.label}"]`); if (unit) unit.innerText = u.value; }); } clearTimeout(this.updateTimeout); this.updateTimeout = setTimeout(this.update.bind(this),1e3); } } </script> </html>{border: 0;box-sizing: border-box;margin: 0;padding: 0;}:root {--hue: 223;--bg: hsl(var(--hue),10%,90%);--fg: hsl(var(--hue),10%,10%);font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));}body, button {color: #fff;font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}body {background-color: #1F1F1F;height: 100vh;display: grid;place-items: center;}.progress-clock {display: grid;justify-content: center;align-content: center;position: relative;text-align: center;width: 16em;height: 16em;}.progress-clock__time-date,.progress-clock__time-digit,.progress-clock__time-colon,.progress-clock__time-ampm {transition: color 0.2s linear;-webkit-user-select: none;-moz-user-select: none;user-select: none;}.progress-clock__time-date,.progress-clock__time-digit {background: transparent;}.progress-clock__time-date,.progress-clock__time-ampm {grid-column: 1 / 6;}.progress-clock__time-date {font-size: 0.75em;line-height: 1.33;}.progress-clock__time-digit,.progress-clock__time-colon {font-size: 2em;font-weight: 400;grid-row: 2;}.progress-clock__time-colon {line-height: 1.275;}.progress-clock__time-ampm {cursor: default;grid-row: 3;}.progress-clock__rings {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}.progress-clock__ring {opacity: 0.1;}.progress-clock__ring-fill {transition:opacity 0s 0.3s linear,stroke-dashoffset 0.3s ease-in-out;}.progress-clock__ring-fill--360 {opacity: 0;stroke-dashoffset: 0;transition-duration: 0.3s;}outline: transparent;}[data-units] {transition: opacity 0.2s linear;}color: hsl(333,90%,55%);}color: hsl(33,90%,55%);}color: hsl(213,90%,55%);}color: hsl(273,90%,55%);}opacity: 0.2;}opacity: 1;}/ Dark theme /@media (prefers-color-scheme: dark) {:root {--bg: hsl(var(--hue),10%,10%);--fg: hsl(var(--hue),10%,90%);}.progress-clock__ring {opacity: 0.2;}} Sunday January 1 12:00:00 AM window.addEventListener("DOMContentLoaded",() => { const clock = new ProgressClock("#clock"); }); class ProgressClock { constructor(qs) { this.el = document.querySelector(qs); this.time = 0; this.updateTimeout = null; this.ringTimeouts = []; this.update(); } getDayOfWeek(day) { switch (day) { case 1: return "Monday"; case 2: return "Tuesday"; case 3: return "Wednesday"; case 4: return "Thursday"; case 5: return "Friday"; case 6: return "Saturday"; default: return "Sunday"; } } getMonthInfo(mo,yr) { switch (mo) { case 1: return { name: "February", days: yr % 4 === 0 ? 29 : 28 }; case 2: return { name: "March", days: 31 }; case 3: return { name: "April", days: 30 }; case 4: return { name: "May", days: 31 }; case 5: return { name: "June", days: 30 }; case 6: return { name: "July", days: 31 }; case 7: return { name: "August", days: 31 }; case 8: return { name: "September", days: 30 }; case 9: return { name: "October", days: 31 }; case 10: return { name: "November", days: 30 }; case 11: return { name: "December", days: 31 }; default: return { name: "January", days: 31 }; } } update() { this.time = new Date(); if (this.el) { // date and time const dayOfWeek = this.time.getDay(); const year = this.time.getFullYear(); const month = this.time.getMonth(); const day = this.time.getDate(); const hr = this.time.getHours(); const min = this.time.getMinutes(); const sec = this.time.getSeconds(); const dayOfWeekName = this.getDayOfWeek(dayOfWeek); const monthInfo = this.getMonthInfo(month,year); const m_progress = sec / 60; const h_progress = (min + m_progress) / 60; const d_progress = (hr + h_progress) / 24; const mo_progress = ((day - 1) + d_progress) / monthInfo.days; const units = [ { label: "w", value: dayOfWeekName }, { label: "mo", value: monthInfo.name, progress: mo_progress }, { label: "d", value: day, progress: d_progress }, { label: "h", value: hr > 12 ? hr - 12 : hr, progress: h_progress }, { label: "m", value: min < 10 ? "0" + min : min, progress: m_progress }, { label: "s", value: sec < 10 ? "0" + sec : sec }, { label: "ap", value: hr > 12 ? "PM" : "AM" } ]; // flush out the timeouts this.ringTimeouts.forEach(t => { clearTimeout(t); }); this.ringTimeouts = []; // update the display units.forEach(u => { // rings const ring = this.el.querySelector(`[data-ring="${u.label}"]`); if (ring) { const strokeDashArray = ring.getAttribute("stroke-dasharray"); const fill360 = "progress-clock__ring-fill--360"; if (strokeDashArray) { // calculate the stroke const circumference = +strokeDashArray.split(" ")[0]; const strokeDashOffsetPct = 1 - u.progress; ring.setAttribute( "stroke-dashoffset", strokeDashOffsetPct * circumference ); // add the fade-out transition, then remove it if (strokeDashOffsetPct === 1) { ring.classList.add(fill360); this.ringTimeouts.push( setTimeout(() => { ring.classList.remove(fill360); }, 600) ); } } } // digits const unit = this.el.querySelector(`[data-unit="${u.label}"]`); if (unit) unit.innerText = u.value; }); } clearTimeout(this.updateTimeout); this.updateTimeout = setTimeout(this.update.bind(this),1e3); } } -
爬取美女图片保存本地与入MySQL库 {card-describe title="基本介绍"}本文详细记录如何爬取美女图片，并将图片下载保存在本地，同时将图片url进行入库。保存在本地肯定是为了没事能拿出来养养眼啊，那入库就是为了定位图片啊，要懂点技术的话，还能搬运搬运做个小图片网站，不为别的，就是养眼和学习！本文主要讲思路和方法。{/card-describe}先看效果 解析目标网址大家看上面的截图肯定就发现了，这网址不寻常 ::(狗头) ，现在这些网站国内都很难活的，网站就不贴出来了。查看网站情况查看首页可以基本确定数据加载方式，是分页加载的方式确定分页加载方式一般就是两种加载方式，一种是直接改变url，就想旧版的微博，就是直接改变url请求新的网页即可，另一种就是ajax，一般涉及到ajax就比较麻烦，可能有token啥的，不过技术而言，都比较简单，请求就完事。再看本网站，点击加载更多后，浏览器的url并没有改变，说明就是ajax，那么直接F12打开控制台，调到网络栏，清空信息 再点击加载更多，我们想要的东西就有了。解析分页请求双击我们抓到的包，查看包的 请求网址、请求方法、载荷、响应 请求网址即为我们发送请求的地址；请求方法我们发送请求要用到的方法，很重要，后面写代码就要根据这个来，方法错了请求不到数据；载荷查看请求的时候给服务器传递了哪些数据，也很重要，取不取得到正确我们想要的数据就完全看这个内容了；响应响应的内容就是我们需要的数据，进一步解析就能获得的数据了。 到这里就还没解决一个问题，这个问题就是 载荷字段 的解析，如上可以发现就是四个字段： id、action、type、paged ，其实每个字段都比较好理解，不出意外的话，前三个字段就是死的，主要就是paged字段了，为了验证猜测，再请求一下，查看两个包载荷的不同之处就好了。方法一样，这里就不演示了。事实也证明了我们的猜测，改变 paged字段 就好。查看网页结构继续F12，查看元素，就能发现是一个又一个的li标签了，每个li可以点击进入到对应主题的图片详情界面，得到了这个信息就简单了，就很好获取详情页的url了。 但是页面url没变，不可能通过首页这一个url就能获取到全站的内容，所以还得看看上一步抓的包，如下。是不是和想象中的不一样，这里是直接请求的网页代码而不是数据，那对于我们来说就更简单了，全文用一种url提取方法就好，将 data下的html字段转为html 对象就行。图片详情页前面说那么多，也都是再讲如何提取每个主题的详情url，具体的图片获取还得是进入详情页啊；点进来看看，进来一看，发现就是一个一个img标签，那更好了，直接提取图片url就好啊。 但是！！！ 竟然要VIP，细心的小伙伴应该和我一样，并没有慌啊，为什么呢，看下文解除VIP限制确切来说是绕开限制,也就是针对本网站有效，属于是瞎猫碰上死耗子。回到主题，为什么发现有限制的时候不慌呢，大家在看看图片详情页的网页元素，是不是发现了一些猫腻，所有的图片url，就那一点点地方不一样啊，那我们还爬什么网页，直接构造图片url不就得了。构造图片url看上面的不同之处，就大致知道每个主题下的图片url规律了，那我们知道第一张图片的url后，构建后面图片的url就好嘛，至于构建到多少，首页和详情页都有，如下，构建这么多就好啦！ 思路很简单，但是构建肯定没那么简单，要确定数字变化的位置、数字的位数、提取数字部分、进行计算、拼接字符串…多看一下网站，会发现这些图片url并不是最后那个数据不一样，并不规则。但是也不难，就是麻烦点，那就是获取两个url，进行url对比，先提取两个字符串的数字部分形成一个数组，然后对比两个数组中不同的部分，如果不同，获取其下标，根据下标获取到url中那个数字字符串，根据数字字符串进行url分割，再计算和拼接，说的有点泛泛，具体的看代码，此方法还有bug，大家可以再研究一下。img_id_list1 = re.findall(r"\d+\d*",url1) img_id_list2 = re.findall(r"\d+\d*", url2) index = 0 for i in range(len(img_id_list1)): if(img_id_list1[i] != img_id_list2[i]): index = i break img_id = img_id_list1[index] #图片末尾标识 img_url_pre = url1.split(img_id)[0] # 提取分割后的前半部分 img_url_end = url1.split(img_id)[1] # 提取分割后的后半部分 for i in tqdm(range(img_num)): img_id_int = int(img_id) # 提取的数字字符串转为int型 img_id_len = len(img_id) # 提取的数字字符串长度 img_id_main_int = img_id_int + i # 数字+1 img_id_main_int_len = len(str(img_id_main_int)) # 加1后长度 img_id_use = '0'*(img_id_len-img_id_main_int_len) + str(img_id_main_int) # 补0 imgurl = img_url_pre+img_id_use+img_url_end # 得到图片url ...请求主题url与基本信息很简单，利用request包发送请求，利用JSON包解析得到的数据，再利用lxml模块进行url获取就好啦！部分代码如下，不能直接用哦，断断续续的：headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36' } def img_get(page): start_url = 'https://XXXXXX/admin-ajax.php' data = { 'id': 0, 'action': 'postlist_newajax', 'type': 'index', 'paged': page } import json try: response = requests.post(start_url, headers=headers, data=data) # 序列化成json字符串 json = json.loads(response.text) if (json['success'] == 'ok'): # 请求到的html # print (json['data']['html']) html = etree.HTML(json['data']['html'], parser=etree.HTMLParser(encoding='utf-8')) # a标签 a_rr = html.xpath('//a[@target="_blank"]') a_re = '<a href="(.*?)"' # 多少张图片 img_num = html.xpath('//div[@class="postlist-imagenum"]/span') # 标题 img_file_title = html.xpath('//div[@class="case_info"]/a') ...获取图片url同样的办法，不过要先获取到前两张图片url，方法如上，xpath获取就行。代码如下，也不能直接用哦：response = urllib.request.urlopen(a_href[0]).read().decode("utf-8", "ignore") img_data = etree.HTML(response) # 转换格式，构造解析对象 img_src1 = img_data.xpath('//*[@id="image_div"]/img[1]/@src') # 进行匹配,提取出来的内容不是列表 if (str(type(img_src1)) == "<class 'list'>"): pass else: img_src1 = [i for i in img_src1] img_src2 = img_data.xpath('//*[@id="image_div"]/img[2]/@src') # 进行匹配,提取出来的内容不是列表 if (str(type(img_src2)) == "<class 'list'>"): pass else: img_src2 = [i for i in img_src2] # print("此页第一张图片链接：",img_src1[0]) # print("此页第二张图片链接：", img_src2[0]) ...保存到本地方法很简单，代码如下(本示例代码是单独的保存图片代码)：# -*- coding: utf-8 -*- # @Time: 2022/11/3 15:08 # @Author: MinChess # @File: save_pic.py # @Software: import os import datetime import urllib.request # 创建目录，并返回该目录 def make_dir(path): # 去除左右两边的空格 path = path.strip() # 判断该文件是否存在，不存在才创建，存在则跳过 if not os.path.exists(path): os.makedirs(path) return path # 图片保存地址 save_img_path = 'D:\program files\Pytest\Spider\图片获取\pic\\' path = make_dir(save_img_path) # 命名图片 filename = path + datetime.datetime.now().strftime('%Y%m%d%H%M%S%f') + '.jpg' # 打开文件 f = open(filename, 'wb') # 请求图片 req = urllib.request.urlopen('https://kodo.jiumoz.com/halo/Group-screen.png') # 解析请求 buf = req.read() # 写入图片 f.write(buf) ...写入数据库也很简单，建好库，连接后根据字段写好语句就行，主要用到的包是pymysql，代码如下：def mysql_db(route,url,info,name): conn = pymysql.connect( host="127.0.0.1", database="picture", user="root", password="root" ) try: with conn.cursor() as cursor: sql = "insert into sn (route,url,info,name) values ('"+route+"','"+url+"','"+info+"','"+name+"')" cursor.execute(sql) conn.commit() except Exception as e: conn.rollback() print("数据库操作异常：\n", e) finally: conn.close() ...最终源码# -*- coding: utf-8 -*- # @Time : 2022/11/10 0:35 # @Author : MinChess # @File : sn_main.py # @Software: PyCharm import sys from tqdm import tqdm import requests from lxml import etree import urllib import re import os import pymysql import datetime headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36' } def img_get(page): start_url = 'https://snly.vip/wp-admin/admin-ajax.php' data = { 'id': 0, 'action': 'postlist_newajax', 'type': 'index', 'paged': page } import json try: response = requests.post(start_url, headers=headers, data=data) # 序列化成json字符串 json = json.loads(response.text) if (json['success'] == 'ok'): # 请求到的html # print (json['data']['html']) html = etree.HTML(json['data']['html'], parser=etree.HTMLParser(encoding='utf-8')) # a标签 a_rr = html.xpath('//a[@target="_blank"]') a_re = '<a href="(.*?)"' # 多少张图片 img_num = html.xpath('//div[@class="postlist-imagenum"]/span') # 标题 img_file_title = html.xpath('//div[@class="case_info"]/a') for i in range(len(img_num)): if(page==1 and i==0): print('第一个没用') else: # print(img_file_title[i].text.replace(' ', ''), "主题下有： ", img_num[i].text, " 张图片") a_res = etree.tostring(a_rr[i], encoding='utf-8').strip().decode('utf-8') a_href = re.findall(a_re, a_res) # 打印获取到的链接 # print(a_href[0]) response = urllib.request.urlopen(a_href[0]).read().decode("utf-8", "ignore") img_data = etree.HTML(response) # 转换格式，构造解析对象 img_src1 = img_data.xpath('//*[@id="image_div"]/img[1]/@src') # 进行匹配,提取出来的内容不是列表 if (str(type(img_src1)) == "<class 'list'>"): pass else: img_src1 = [i for i in img_src1] img_src2 = img_data.xpath('//*[@id="image_div"]/img[2]/@src') # 进行匹配,提取出来的内容不是列表 if (str(type(img_src2)) == "<class 'list'>"): pass else: img_src2 = [i for i in img_src2] # print("此页第一张图片链接：",img_src1[0]) # print("此页第二张图片链接：", img_src2[0]) img_url_build(img_src1[0],img_src2[0], int(img_num[i].text), img_file_title[i].text.replace(' ', ''), page, i + 1) else: print(json['success']) sys.exit() except Exception as e: print(e) def img_url_build(url1,url2,img_num,name,page,themeid): img_id_list1 = re.findall(r"\d+\d*",url1) img_id_list2 = re.findall(r"\d+\d*", url2) index = 0 for i in range(len(img_id_list1)): if(img_id_list1[i] != img_id_list2[i]): index = i break img_id = img_id_list1[index] #图片末尾标识 img_url_pre = url1.split(img_id)[0] # 提取分割后的前半部分 img_url_end = url1.split(img_id)[1] # 提取分割后的后半部分 path = 'G:\snly2' + "\\" + 'sn\\' img_path = make_dir(path) print("开始写入第",page,"页的第",str(themeid)+'/20',"个主题下的图片","图片主题："+name) for i in tqdm(range(img_num)): img_id_int = int(img_id) img_id_len = len(img_id) img_id_main_int = img_id_int + i img_id_main_int_len = len(str(img_id_main_int)) img_id_use = '0'*(img_id_len-img_id_main_int_len) + str(img_id_main_int) imgurl = img_url_pre+img_id_use+img_url_end # 图片url filename = datetime.datetime.now().strftime('%Y%m%d%H%M%S%f') + '.jpg' #图片名 imgpath = img_path + filename save(imgurl,imgpath,name,filename) def save(url,img_path,name,filename): route = '\\' + '\\' + 'sn\\' + '\\' + filename try: req = urllib.request.urlopen(url) mysql_db(route,url, name, filename) # 解析请求 buf = req.read() # 打开文件 f = open(img_path, 'wb') # 写入图片 f.write(buf) except Exception as e: print(e) # 创建目录，并返回该目录 def make_dir(path): # 去除左右两边的空格 path = path.strip() # 判断该文件是否存在，不存在才创建，存在则跳过 if not os.path.exists(path): os.makedirs(path) return path def mysql_db(route,url,info,name): conn = pymysql.connect( host="127.0.0.1", database="picture", user="root", password="root" ) try: with conn.cursor() as cursor: sql = "insert into sn (route,url,info,name) values ('"+route+"','"+url+"','"+info+"','"+name+"')" cursor.execute(sql) conn.commit() except Exception as e: conn.rollback() print("数据库操作异常：\n", e) finally: conn.close() if __name__ == '__main__': page = 88 while True: print("====="*10,"第",page,"页","====="*10) img_get(page) page = page + 1 ...
-
grid之经典12列栅格布局组件,经典示例-圣杯布局 {card-describe title="摘要"}记录grid完成简单的经典12栅格布局，并完成经典的圣杯布局效果，同时完成一个典型的图片列表展示。{/card-describe}建立布局组件建立12列栅格布局组件的好处就是，只要你想布局，可以随时利用里面的小组件，按照你自己的想法来实现布局。基础HTML代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>12列栅格布局</title> <link rel="stylesheet" href="grid-layout.css" /> <style> .box { width: 90%; outline: 1px solid; padding: 5px; margin: 0 auto; } .box .row { height: 50px; margin: 5px; } .box .row>* { outline: 1px solid; border-radius: 5px; background-color: lightcyan; text-align: center; line-height: 50px; font-weight: bolder; } </style> </head> <body> <div class="box"> <!-- 2列: 6 + 6 --> <!-- row: grid容器 --> <div class="row"> <!-- col-6就是grid项目 --> <div class="col-6">6</div> <div class="col-6">6</div> </div> <!-- 2列: 3 +9 --> <div class="row"> <div class="col-3">3</div> <div class="col-9">9</div> </div> <!-- 3列: 2+8+2 --> <div class="row"> <div class="col-2">2</div> <div class="col-8">8</div> <div class="col-2">2</div> </div> </div> </body> </html>...grid-layout.css代码：/* 12列栅格布局组件 */ /* grid 容器 */ .row { /* 定义这行是gird容器,并且分成12列 */ display: grid; /* 用repeat函数块数分列 */ grid-template-columns: repeat(12, 1fr); gap: 5px; } /* 设置项目 列数合并从1到12列 */ .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { /* 从当前开始跨越6列 */ grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }...圣杯布局如果使用传统flex方式或者定位来做这个布局的话，非常的麻烦，而使用grid不到10行代码就可以把这个布局给写出来。利用上面写好的组件，即可完成经典的圣杯布局。基础html代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>(圣杯布局)用12列的栅格布局组件来完成一个3列布局</title> <!-- 栅格布局组件UI --> <link rel="stylesheet" href="grid-layout.css" /> <link rel="stylesheet" href="grid-case.css" /> </head> <body> <div class="header row"> <div class="col-12">页眉12列</div> </div> <div class="main row"> <div class="left col-2">左侧2列</div> <div class="content col-8">内容区8列</div> <div class="right col-2">右侧2列</div> </div> <div class="footer row"> <div class="col-12">页脚12列</div> </div> </body> </html>...grid-case.css代码body { width: 1000px; margin: 0 auto; /* border: 1px solid #000; */ } .main { margin: 5px 0; } .header, .footer { height: 50px; background-color: lightblue; } .main>* { /* border: 1px solid #000; */ background-color: lightgreen; min-height: 700px; } .main .left, .main .right { min-width: 150px; } .main .content { min-width: 500px; }...grid-layout.css代码：/* 12列栅格布局组件 */ /* grid 容器 */ .row { /* 定义这行是gird容器,并且分成12列 */ display: grid; /* 用repeat函数块数分列 */ grid-template-columns: repeat(12, 1fr); gap: 5px; } /* 设置项目 列数合并从1到12列 */ .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { /* 从当前开始跨越6列 */ grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }...图片列表实战实战效果如下图：基础html代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>仿php.cn最新课程</title> <link rel="stylesheet" href="phpcn-course.css" /> </head> <body> <div class="latest-courses"> <h2>最新课程</h2> <div class="courses-list"> <!-- 课程 --> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> <div class="course"> <!-- 1课程图片 --> <a href=""> <img src="course.png" alt="" /> </a> <!-- 2. 课程描述 --> <div class="desc"> <!-- 2.1 标题 --> <div class="title"> <small class="tag">中级</small> <a href="">php编程从入门到精通(2023最新版)</a> </div> <!-- 2.2 其它 --> <div class="other"> <span>12345次学习</span> <span>收藏</span> </div> </div> </div> </div> </div> </body> </html>...phpcn-course.css代码：body { background-color: #efefef; } body a { text-decoration: none; color: #555; font-size: small; } body a:hover { color: red; } .latest-courses { width: 1020px; /* border: 1px solid #000; */ margin: 0 auto; } /* 课程列表: grid, 2行5列 */ .latest-courses .courses-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 10px; } .latest-courses .courses-list img { width: 100%; /* 上 右 下 左 */ border-radius: 5px 5px 0 0; } /* 图片鼠标放上去放大一点点 */ .latest-courses .courses-list img:hover { /* 变换: 放大 */ transform: scale(1.1); transition: 0.3s; } .latest-courses .courses-list .course { background-color: #fff; border-radius: 5px; /* 给课程加上溢出隐藏,这样的图片放大时,宽高不变化 */ overflow: hidden; } /* 课程描述 */ .latest-courses .courses-list .course .desc { padding: 15px; display: grid; gap: 10px; } .latest-courses .courses-list .course .desc .tag { color: red; background-color: bisque; border-radius: 2px; padding: 2px 4px; font-size: x-small; } .latest-courses .courses-list .course .desc .other { color: #aaa; font-size: small; display: flex; place-content: space-between; } ...
-
Typecho博客程序禁用F12代码 虽然没多少人会在意被扒代码，但我还是分享一下。当然我不是为了防爬代码，我是因为其他的原因要隐藏F12。接下来就说说代码我在网上找到不少，但我发现或多或少的都有点问题，所以分享一段我自己用的效果就是按下F12直接关闭当前页面。代码展示直接放到主题文件下footer.php文件的最后面<script> function fuckyou(){ window.close(); //关闭当前窗口(防抽) window.location="about:blank"; //将当前窗口跳转置空白页 } function click(e) { if (document.all) { if (event.button==2||event.button==3) { alert("禁止拿代码"); oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { fuckyou(); document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; document.oncontextmenu = new Function("return false;") document.onkeydown =document.onkeyup = document.onkeypress=function(){ if(window.event.keyCode == 123) { fuckyou(); window.event.returnValue=false; return(false); } } </script>...这样就可以了。
-
彩虹聚合登录系统源码开心版 一站式社会化账号登录系统 源码介绍彩虹聚合登录是彩虹旗下的社交账号聚合登录系统，为网站提供一站式社交账号登录选项，包括微信、微博、QQ、百度等账号。简化了用户注册和登录流程，提高了用户在网站的浏览体验，快速增加了网站的注册量和用户数据量。系统还提供完整的开发文档和SDK，方便开发者快速接入。源码截图 系统特点全新的用户中心界面，可以查看整体统计数据和公告。支持会员级别在线购买，并可根据不同会员级别设置可用的登录方式和账号上限。方便查看应用统计信息，包括不同登录方式占比、新增账户数、请求数等统计信息。所有登录的账号都可以清晰显示。安装说明确保您的PHP 版本为7.1 或更高版本。只需访问域名后跟“/install”即可开始安装。后台管理地址为“/admin”，默认帐号为“admin”，默认密码为“123456”。没有后面，放心使用。下载地址隐藏内容，请前往内页查看详情
CC BY-NC-ND