技术教程
(共20篇)
搜索到
20
篇与
技术教程
的结果
-
-
『原创』『教程』博客评论框添加随机一言 前言由于我的博客之前经常有人回复一些无意义的内容，导致很多垃圾评论所以我在想既然很多游客喜欢回复一些垃圾评论，不如我直接设置一个随机一言，让他们省去了垃圾评论的打字时间，同时又能让我的评论区少一些无意义的评论而且那些真正认真回复的人只需要一键删除即可，也不会很影响评论体验，所以就给自己的评论框添加了随机一言前段时间有小伙伴留言让我出个评论随机一言的教程，而我这边突然爆发了疫情，前些天自己又感染了，所以一直拖到现在效果展示按照惯例，先来一波效果展示本教程仅以Joe主题为例，其他主题可自行发挥能力，如有技术问题，博主可提供简单的指导教程开始一、添加后台控制在 Joe/functions.php 或者 Joe/public/custom.php（有的话） 内添加以下代码// 评论框随机语录功能 $Comment_Citation = new Typecho_Widget_Helper_Form_Element_Select( 'Comment_Citation', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启评论框随机语录功能', '介绍：开启后，评论框自动随机填充随机语录' ); $Comment_Citation->setAttribute('class', 'joe_content joe_change'); // 如果后台无法展示该设置，将joe_change修改为joe_other $form->addInput($Comment_Citation->multiMode()); //评论框随机语录链接/文字 $Comment_Citation__text = new Typecho_Widget_Helper_Form_Element_Textarea( 'Comment_Citation__text', NULL, "https://api.vvhan.com/api/ian", '评论框随机语录', '介绍：用于修改评论框随机语录（可以为api地址） <br /> 格式：一行一个，可以为api地址，也可为文字，可以填写多个API地址<br /> 注意：必须填写JSON格式的API，API需要开启跨域权限才能调取，否则会调取失败！<br /> 如果为api地址可在前台按钮刷新内容，如果为文字只能刷新页面来刷新内容（建议使用api地址）<br /> 推荐API：https://api.vvhan.com/api/ian' ); $Comment_Citation__text->setAttribute('class', 'joe_content joe_change'); // 如果后台无法展示该设置，将joe_change修改为joe_other $form->addInput($Comment_Citation__text);二、添加刷新按钮（可省略）在 Joe/public/comment.php 添加以下代码，不添加则不设置刷新按钮{tabs}{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="添加代码"}<?php if ($this->options->Comment_Citation !== "off") : ?> <div class="Comment_Citation" title="语录"> <div class='comment_box'> <i class='fa fa-fw fa-refresh' aria-hidden='true'></i> <span class="title">语录</span> </div> </div> <?php endif; ?>{/tabs-pane}{/tabs}三、添加内容获取1、添加后端获取在 Joe/core/function.php 添加以下代码{tabs}{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="添加代码"}/* 获取评论框随机语录 */ function _getComment_Citation() { $CitationRandom = explode("\r\n", Helper::options()->Comment_Citation__text); echo $CitationRandom[array_rand($CitationRandom)]; }{/tabs-pane}{/tabs}2、添加前端获取在 Joe/public/config.php 添加以下代码{tabs}{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="添加代码"}CITATION: `<?php _getComment_Citation() ?>`, // 评论随机语录{/tabs-pane}{/tabs}四、添加核心代码在 Joe/assets/js/joe.global.min.js 或者 Joe/assets/js/custom.min.js（有的话） 添加以下代码隐藏内容，请前往内页查看详情五、添加刷新按钮样式（可省略）这是刷新按钮样式，如果前面没添加刷新按钮，可跳过此步骤在 Joe/assets/css/joe.global.min.css 或者 Joe/assets/css/custom.min.css（如果有）添加以下代码.joe_owo__contain { position: static; .box { position: absolute; bottom: 100%; margin-bottom: 6px; left: 0px; padding-top: 5px; border: 1px solid rgba(0, 0, 0, 0.15); border-color: transparent; box-shadow: 0 0 10px 8px rgb(116 116 116 / 8%); } } .comment_box { cursor: pointer; text-align: center; color: var(--routine); height: 26px; line-height: 26px; background: var(--background); opacity: 0.85; border-radius: 13px; width: 70px; margin-left: 5px; &:hover { background: var(--theme); color: #fff; }}结语教程稍有点复杂，但其实是沿用侧栏随机一言的方法，所以如果你能看懂核心js的话，可以仅修改 第四步 中ajax的 url 来实现，那样会简单很多很多
-
『原创』『教程』为你的博客添加阅读模式（适配Joe，其他主题也可用） 前言我又来拔flag了，最近立了好多flag，但是最近重庆太热了，不想写文章（其实就是懒了）既然给小伙伴立了flag，还是要说到做到，不然没有小伙伴来玩了。这个功能也是xcshare定制的功能，但是我还是分享出来吧成果展示教程开始一、添加后台开关一样的，还是在 Joe/functions.php 里添加（也可以在 Joe/public/custom.php 里添加，前提是你创建并引用了这个文件）// 是否启用阅读模式 $ReadBook = new Typecho_Widget_Helper_Form_Element_Select( 'ReadBook', array( 'off' => '关闭（默认）', 'on' => '开启'), 'off', '请选择是否启用阅读模式', '介绍：开启后，文章页可以进入阅读模式' ); $ReadBook->setAttribute('class', 'joe_content joe_custom'); //没有joe_custom就改成joe_other $form->addInput($ReadBook->multiMode());二、添加开关按钮在 Joe/public/footer.php 的 <div class="joe_action"> 内部添加以下代码<!-- 阅读模式 --> <?php if ($this->options->ReadBook === 'on' && $this->is('post')) : ?> <!-- 检测是否为文章页 --> <div class="joe_action_item read_book" title="阅读模式"> <svg t="1651294208728" class="icon-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"> <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" fill="var(--minor)" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path> <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" fill="var(--minor)" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path> </svg> <svg t="1651294208728" class="icon-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"> <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path> <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path> </svg> </div> <?php endif; ?>三、添加JS首先说明，因为我使用的Joe主题自带jQuery框架，如果你是其他主题，请自行引入jQuery或者将以下代码修改为原生js在 Joe/assets/js/joe.post_page.min.js 最后一个 }); 前加入以下代码当然你也可以加在Joe/assets/js/joe.post_page.js里再使用minify进行压缩 如果看过我之前的教程，也可以加在 Joe/assets/css/custom.js 里，再进行压缩 隐藏内容，请前往内页查看详情四、添加按钮css在 Joe/assets/css/joe.post.min.css 里加入以下代码 如果看过我之前的教程，也可以加在 Joe/assets/css/custom.scss 里，再用scss to css转换即可 .joe_action_item.read_book{visibility:hidden;transform:scale(0)}.joe_action_item.read_book.active{visibility:visible;transform:scale(1)}.joe_action_item.read_book svg{transform:scale(0);opacity:0;transition:transform .85s,opacity .85s}.joe_action_item.read_book svg.active{transform:scale(1);opacity:1}结语其实教程很简单，就是隐藏一些组件和更换页面底色没有固定的方法，只有固定的思维，所以一定要多思考、多变通。
-
-
『转载』『教程』搭建z-file文件目录并开启反向代理，可做图床和网盘 ZFile此项目是一个在线文件目录的程序, 支持各种对象存储和本地存储, 使用定位是个人放常用工具下载, 或做公共的文件库. 不会向多账户方向开发.前端基于 h5ai 的原有功能使用 Vue 重新开发、后端采用 SpringBoot, 数据库采用内嵌数据库.成果安装教程一、安装依赖基于java开发，所以要先安装java环境# CentOS系统 yum install -y java-1.8.0-openjdk unzip # Debian/Ubuntu系统 apt update apt install -y openjdk-8-jre-headless unzip 二、下载、上传项目隐藏内容，请前往内页查看详情直接下载并上传到网站根目录，然后解压得到以下目录z-file ├─ META-INF ├─ WEB-INF └─ bin ├── start.sh # 启动脚本 ├── stop.sh # 停止脚本 └── restart.sh # 重启脚本三、开启部署服务直接在当前目录打开终端输入以下代码./bin/start.shWeb默认端口为8080，如需修改端口可直接编辑配置文件 /zfile/WEB-INF/classes/application.yml 启动之后部署工作即宣告完成，可以在浏览器里直接输入ip:8080进入Web进行下一步配置，如果觉得每次都要加端口号麻烦可以参考后续设置反代。 具体访问地址如下四、域名访问在宝塔面板中添加一个新的网站如果想要开启HTTPS可以在设置反代之前在SSL选项卡配置证书打开反向代理选项卡，选择添加反向代理，端口填你设置的端口号（我这里改成了8282），如图配置五、初始化因为上一步已经配置了域名访问，所以直接输入域名，无需再加端口号，设置管理用户名和密码。输入 域名/#/admin进入管理后台，可以设置域名，外观设置，修改密码，添加存储等。六、更多用法1、文件夹加密直接在欲加密的文件夹中上传一个名为“password.txt”的文件即可，密码即为文件内容。加密之后效果如图2、显示readme如果想在某个文件夹中显示readme文件，直接在该文件夹中上传readme.md文件即可，同时需要在后台中开启显示文档区功能。3、可以作为图床使用如果你的博客需要图片外链，那么你可以将图片上传到某个目录，接着在zfile中打开这个目录，找到图片文件，右键并选择复制直链，这样就获取了这张图片的直链。总结Z-File作为一款开源免费的网盘列表程序，优点还是很多的。安装部署和配置都比较方便，也可以生成固定的文件链接，使用定位是个人放常用工具下载, 或做公共的文件库. 不会向多账户方向开发。
-
『转载』『教程』H5ai（Dplayer）完整安装使用教程及注意事项 前言关于如何搭建 H5ai ，网上虽然有很多教程，但详细的却不多，有的也是比较模糊。本文将介绍一下如何在宝塔Nginx环境下搭建 H5ai 以及其中的一些注意事项。成果H5ai是一款德国程序员Lars Jung打造的基于HTTP Web服务器的现代文件索引器，是一款功能强大的PHP文件目录列表程序，适合做个人仓库，它提供多种文件目录列表呈现方式，支持 Apache Httpd, Lighttpd, Nginx等多种WEB服务器，支持多国语言（如英语，简体中文等），你可以在线预览以及下载TXT，图片，音频，视频等文件格式。 安装教程一、环境要求{callout color＝"#f0ad4e"}Nginx - MySQLPHP 7.1或以上phpMyAdmin{/callout}二、添加站点请在左边的菜单栏,找到网站,然后点击添加站点,输入相关信息后点击提交即可 三、H5ai下载将文件解压后放在网站根目录下的_h5ai文件夹内，结构如下 下载地址隐藏内容，请前往内页查看详情DOC_ROOT ├─ _h5ai ├─ your files └─ and folders 四、上传文件把你需要列的文件及目录放在_h5ai同目录下即可（我这里是把_去掉了） 五、修改配置文件在宝塔面板首页->左边的网站 -> H5ai(放H5ai的网站) -> 设置 -> 配置文件中六、查看依赖信息访问 http(s)://你的网站名/_h5ai/public/index.php来查看H5ai的功能开放情况，默认密码为空 右边已经是yes或者变成绿色的,证明对应的依赖已经安装成功 七、配置PHP1、安装Use EXIF thumbs{callout color＝"#2bff00"}安装imagemagick和exifUse EXIF thumbs会显示成yes{/callout}2、Movie thumbs (ffmpeg)安装CentOS 6和7安装方法是不一样的，下面分别说明： 安装前都需要先安装epel扩展源:# yum -y install epel-release # su -c ‘yum localinstall --nogpgcheck https://download1.rpmfusion.org/free/el/rpmfusion-free-release-6.noarch.rpm https://download1.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release-6.noarch.rpm‘ # yum -y install ffmpeg ffmpeg-devel 3、PDF thumbs安装选择安装convert# yum -y install ImageMagick 4、Shell tar/Shell zip/Shell du安装这三项根据h5ai官网,在 php.ini被禁用函数中去掉 exec和 passthru即可，是否有危险不知道,自己掂量,禁用好像也不影响一些功能，另外顺便把 scandir函数去掉禁用，不然会出现无非显示目录中文件的情况。 在你的软件商店中找到你下载的PHP版本–进入设置–禁用函数 {callout color＝"#14ffb9"}删除exec 和 passthruShell tar Shell zip Shell du就会显示成yes{/callout}八、给H5ai加密码首先我们要找到这个文件 _h5ai/public/index.php ，在最下面增加以下代码：function mima() { $user＝array(‘填写你的用户名‘,‘填写你的密码‘); if(!($user[0]＝＝＝$_SERVER[‘PHP_AUTH_USER‘] && $user[1]＝＝＝$_SERVER[‘PHP_AUTH_PW‘])){ header(‘WWW-Authenticate: Basic realm＝"MY Mark"‘); header(‘HTTP/1.0 401 Unauthorized‘); die("please login"); } } 然后在第一行，也就是<?php的下面（也就是第二行）插入以下代码：php mima(); 九、注意事项1、读取不出文件如果存在文件，但读不出来，可能原因就是 php 已禁用 scandir函数了，请修改 php.ini解决。 disable_functions＝passthru,exec,system,chroot,scandir,... 删掉 scandir,字样，再重启 php 即可：/etc/init.d/php-fpm restart。 文件仍读不出 把h5ai程序_h5ai中 private和 public两个文件夹中的 cache目录权限设置为 777。2、404报错检查上面步骤说到的配置文件步骤，如果正确请重启服务器试一试。
-
『原创』『表情』为Joe主题增加QQ，Bilibili，酷安，贴吧，微博表情包 前言最近失恋了，就一直在学习前端基础，所以个人博客都好久没更新了偶然在翠翠的博客看到给typecho添加表情包的教程，所以自己也添加了两组表情包但是在添加途中遇到了一个问题，所以将自己遇到的坑记录下来成果展示后台编辑器代码位置 教程开始一、添加表情过滤因为Joe主题之前被人恶意注入过xss，因此主题作者添加了关键词屏蔽，所以还要进行过滤拿到一个表情包后，在 windows 系统中下这样操作，在表情包文件夹内创建一个 文本文档 然后双击打开，使用以下命令生成该文件夹文件（图片）列表：dir /b > list.txt 保存后将文件后缀改为 bat ，然后再双击打开，就会生成一个 list.txt 文件生成的 list.txt 就包含了改目录下的全部文件名，就可以很方便的批处理。 关键词拼串可以使用Excel进行，直接使用以下代码就行=A2&$F$2&A3 =E2&$F$2&A4然后打开 Joe/core/parse.php 文件，找到表情过滤在下面添加你表情的关键词与表情地址{tabs}{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="代码"}隐藏内容，请前往内页查看详情{/tabs-pane}{/tabs}这里有一个坑 ，因为原作者引用表情包地址是用的 urlencode() 函数，将文字转换为UrlEncode编码的字符隐藏内容，请前往内页查看详情二、配置 OwO.json打开 Joe/assets/json 下的 joe.owo.json 文件在里面添加（请自行删除代码中的 删除 字符） "表情": [ { "icon": "assets/owo/QQ/E788B1E4BDA0.gif", "data": ":删除$(爱你)" }, { "icon": "assets/owo/QQ/E788B1E5BF83.gif", "data": ":删除$(爱心)" }, { "icon": "assets/owo/QQ/E582B2E685A2.gif", "data": ":删除$(傲慢)" }, { "icon": "assets/owo/QQ/E799BDE79CBC.gif", "data": ":删除$(白眼)" }, { "icon": "assets/owo/QQ/E6A392E6A392E7B396.gif", "data": ":删除$(棒棒糖)" }, { "icon": "assets/owo/QQ/E78886E7AD8B.gif", "data": ":删除$(爆筋)" }, { "icon": "assets/owo/QQ/E68AB1E68BB3.gif", "data": ":删除$(抱拳)" }, { "icon": "assets/owo/QQ/E98499E8A786.gif", "data": ":删除$(鄙视)" }, { "icon": "assets/owo/QQ/E997ADE598B4.gif", "data": ":删除$(闭嘴)" }, { "icon": "assets/owo/QQ/E693A6E6B197.gif", "data": ":删除$(擦汗)" }, { "icon": "assets/owo/QQ/E88F9CE58880.gif", "data": ":删除$(菜刀)" }, { "icon": "assets/owo/QQ/E59083.gif", "data": ":删除$(吃)" }, { "icon": "assets/owo/QQ/E591B2E78999.gif", "data": ":删除$(呲牙)" }, { "icon": "assets/owo/QQ/E5A4A7E585B5.gif", "data": ":删除$(大兵)" }, { "icon": "assets/owo/QQ/E5A4A7E593AD.gif", "data": ":删除$(大哭)" }, { "icon": "assets/owo/QQ/E89B8B.gif", "data": ":删除$(蛋)" }, { "icon": "assets/owo/QQ/E5BE97E6848F.gif", "data": ":删除$(得意)" }, { "icon": "assets/owo/QQ/doge.gif", "data": ":删除$(doge)" }, { "icon": "assets/owo/QQ/E58F91E59186.gif", "data": ":删除$(发呆)" }, { "icon": "assets/owo/QQ/E58F91E68092.gif", "data": ":删除$(发怒)" }, { "icon": "assets/owo/QQ/E5A58BE69697.gif", "data": ":删除$(奋斗)" }, { "icon": "assets/owo/QQ/E5B0B4E5B0AC.gif", "data": ":删除$(尴尬)" }, { "icon": "assets/owo/QQ/E58BBEE5BC95.gif", "data": ":删除$(勾引)" }, { "icon": "assets/owo/QQ/E9BC93E68E8C.gif", "data": ":删除$(鼓掌)" }, { "icon": "assets/owo/QQ/E5AEB3E7BE9E.gif", "data": ":删除$(害羞)" }, { "icon": "assets/owo/QQ/E686A8E7AC91.gif", "data": ":删除$(憨笑)" }, { "icon": "assets/owo/QQ/E5A5BDE6A392.gif", "data": ":删除$(好棒)" }, { "icon": "assets/owo/QQ/E59388E6ACA0.gif", "data": ":删除$(哈欠)" }, { "icon": "assets/owo/QQ/E5969DE5BDA9.gif", "data": ":删除$(喝彩)" }, { "icon": "assets/owo/QQ/E6B2B3E89FB9.gif", "data": ":删除$(河蟹)" }, { "icon": "assets/owo/QQ/E59D8FE7AC91.gif", "data": ":删除$(坏笑)" }, { "icon": "assets/owo/QQ/E9A5A5E9A5BF.gif", "data": ":删除$(饥饿)" }, { "icon": "assets/owo/QQ/E6838AE68190.gif", "data": ":删除$(惊恐)" }, { "icon": "assets/owo/QQ/E6838AE5969C.gif", "data": ":删除$(惊喜)" }, { "icon": "assets/owo/QQ/E6838AE8AEB6.gif", "data": ":删除$(惊讶)" }, { "icon": "assets/owo/QQ/E88F8AE88AB1.gif", "data": ":删除$(菊花)" }, { "icon": "assets/owo/QQ/E58FAFE788B1.gif", "data": ":删除$(可爱)" }, { "icon": "assets/owo/QQ/E58FAFE6809C.gif", "data": ":删除$(可怜)" }, { "icon": "assets/owo/QQ/E68AA0E9BCBB.gif", "data": ":删除$(抠鼻)" }, { "icon": "assets/owo/QQ/E985B7.gif", "data": ":删除$(酷)" }, { "icon": "assets/owo/QQ/E5BFABE593ADE4BA86.gif", "data": ":删除$(快哭了)" }, { "icon": "assets/owo/QQ/E9AAB7E9AB85.gif", "data": ":删除$(骷髅)" }, { "icon": "assets/owo/QQ/E59BB0.gif", "data": ":删除$(困)" }, { "icon": "assets/owo/QQ/E7AFAEE79083.gif", "data": ":删除$(篮球)" }, { "icon": "assets/owo/QQ/E6B3AAE5A594.gif", "data": ":删除$(泪奔)" }, { "icon": "assets/owo/QQ/E586B7E6B197.gif", "data": ":删除$(冷汗)" }, { "icon": "assets/owo/QQ/E6B581E6B197.gif", "data": ":删除$(流汗)" }, { "icon": "assets/owo/QQ/E6B581E6B3AA.gif", "data": ":删除$(流泪)" }, { "icon": "assets/owo/QQ/E99ABEE8BF87.gif", "data": ":删除$(难过)" }, { "icon": "assets/owo/QQ/OK.gif", "data": ":删除$(OK)" }, { "icon": "assets/owo/QQ/E596B7E8A180.gif", "data": ":删除$(喷血)" }, { "icon": "assets/owo/QQ/E69287E598B4.gif", "data": ":删除$(撇嘴)" }, { "icon": "assets/owo/QQ/E595A4E98592.gif", "data": ":删除$(啤酒)" }, { "icon": "assets/owo/QQ/E5BCBA.gif", "data": ":删除$(强)" }, { "icon": "assets/owo/QQ/E695B2E68993.gif", "data": ":删除$(敲打)" }, { "icon": "assets/owo/QQ/E4BAB2E4BAB2.gif", "data": ":删除$(亲亲)" }, { "icon": "assets/owo/QQ/E7B397E5A4A7E4BA86.gif", "data": ":删除$(糗大了)" }, { "icon": "assets/owo/QQ/E68BB3E5A4B4.gif", "data": ":删除$(拳头)" }, { "icon": "assets/owo/QQ/E9AA9AE689B0.gif", "data": ":删除$(骚扰)" }, { "icon": "assets/owo/QQ/E889B2.gif", "data": ":删除$(色)" }, { "icon": "assets/owo/QQ/E8839CE588A9.gif", "data": ":删除$(胜利)" }, { "icon": "assets/owo/QQ/E6898BE69EAA.gif", "data": ":删除$(手枪)" }, { "icon": "assets/owo/QQ/E8A1B0.gif", "data": ":删除$(衰)" }, { "icon": "assets/owo/QQ/E79DA1.gif", "data": ":删除$(睡)" }, { "icon": "assets/owo/QQ/E8B083E79AAE.gif", "data": ":删除$(调皮)" }, { "icon": "assets/owo/QQ/E581B7E7AC91.gif", "data": ":删除$(偷笑)" }, { "icon": "assets/owo/QQ/E59090.gif", "data": ":删除$(吐)" }, { "icon": "assets/owo/QQ/E68998E885AE.gif", "data": ":删除$(托腮)" }, { "icon": "assets/owo/QQ/E5A794E5B188.gif", "data": ":删除$(委屈)" }, { "icon": "assets/owo/QQ/E5BEAEE7AC91.gif", "data": ":删除$(微笑)" }, { "icon": "assets/owo/QQ/E68FA1E6898B.gif", "data": ":删除$(握手)" }, { "icon": "assets/owo/QQ/E68891E69C80E7BE8E.gif", "data": ":删除$(我最美)" }, { "icon": "assets/owo/QQ/E697A0E5A588.gif", "data": ":删除$(无奈)" }, { "icon": "assets/owo/QQ/E59093.gif", "data": ":删除$(吓)" }, { "icon": "assets/owo/QQ/E5B08FE7BAA0E7BB93.gif", "data": ":删除$(小纠结)" }, { "icon": "assets/owo/QQ/E7AC91E593AD.gif", "data": ":删除$(笑哭)" }, { "icon": "assets/owo/QQ/E5B08FE6A0B7E584BF.gif", "data": ":删除$(小样儿)" }, { "icon": "assets/owo/QQ/E6969CE79CBCE7AC91.gif", "data": ":删除$(斜眼笑)" }, { "icon": "assets/owo/QQ/E8A5BFE7939C.gif", "data": ":删除$(西瓜)" }, { "icon": "assets/owo/QQ/E59898.gif", "data": ":删除$(嘘)" }, { "icon": "assets/owo/QQ/E7BE8AE9A9BC.gif", "data": ":删除$(羊驼)" }, { "icon": "assets/owo/QQ/E998B4E999A9.gif", "data": ":删除$(阴险)" }, { "icon": "assets/owo/QQ/E79691E997AE.gif", "data": ":删除$(疑问)" }, { "icon": "assets/owo/QQ/E58FB3E593BCE593BC.gif", "data": ":删除$(右哼哼)" }, { "icon": "assets/owo/QQ/E5B9BDE781B5.gif", "data": ":删除$(幽灵)" }, { "icon": "assets/owo/QQ/E69995.gif", "data": ":删除$(晕)" }, { "icon": "assets/owo/QQ/E5868DE8A781.gif", "data": ":删除$(再见)" }, { "icon": "assets/owo/QQ/E79CA8E79CBCE79D9B.gif", "data": ":删除$(眨眼睛)" }, { "icon": "assets/owo/QQ/E68A98E7A3A8.gif", "data": ":删除$(折磨)" }, { "icon": "assets/owo/QQ/E59292E9AA82.gif", "data": ":删除$(咒骂)" }, { "icon": "assets/owo/QQ/E68A93E78B82.gif", "data": ":删除$(抓狂)" }, { "icon": "assets/owo/QQ/E5B7A6E593BCE593BC.gif", "data": ":删除$(左哼哼)" } ], "BiliBili": [ { "icon": "assets/owo/bilibili/doge.gif", "data": ":删除#(doge)" }, { "icon": "assets/owo/bilibili/E4BAB2E4BAB2.gif", "data": ":删除#(亲亲)" }, { "icon": "assets/owo/bilibili/E581B7E7AC91.gif", "data": ":删除#(偷笑)" }, { "icon": "assets/owo/bilibili/E5868DE8A781.gif", "data": ":删除#(再见)" }, { "icon": "assets/owo/bilibili/E58F91E68092.gif", "data": ":删除#(发怒)" }, { "icon": "assets/owo/bilibili/E58F91E8B4A2.gif", "data": ":删除#(发财)" }, { "icon": "assets/owo/bilibili/E58FAFE788B1.gif", "data": ":删除#(可爱)" }, { "icon": "assets/owo/bilibili/E59090E8A180.gif", "data": ":删除#(吐血)" }, { "icon": "assets/owo/bilibili/E59186.gif", "data": ":删除#(呆)" }, { "icon": "assets/owo/bilibili/E59195E59090.gif", "data": ":删除#(呕吐)" }, { "icon": "assets/owo/bilibili/E59BB0.gif", "data": ":删除#(困)" }, { "icon": "assets/owo/bilibili/E59D8FE7AC91.gif", "data": ":删除#(坏笑)" }, { "icon": "assets/owo/bilibili/E5A4A7E4BDAC.gif", "data": ":删除#(大佬)" }, { "icon": "assets/owo/bilibili/E5A4A7E593AD.gif", "data": ":删除#(大哭)" }, { "icon": "assets/owo/bilibili/E5A794E5B188.gif", "data": ":删除#(委屈)" }, { "icon": "assets/owo/bilibili/E5AEB3E7BE9E.gif", "data": ":删除#(害羞)" }, { "icon": "assets/owo/bilibili/E5B0B4E5B0AC.gif", "data": ":删除#(尴尬)" }, { "icon": "assets/owo/bilibili/E5BEAEE7AC91.gif", "data": ":删除#(微笑)" }, { "icon": "assets/owo/bilibili/E6809DE88083.gif", "data": ":删除#(思考)" }, { "icon": "assets/owo/bilibili/E6838AE59093.gif", "data": ":删除#(惊吓)" }, { "icon": "assets/owo/bilibili/E68993E884B8.gif", "data": ":删除#(打脸)" }, { "icon": "assets/owo/bilibili/E68A93E78B82.gif", "data": ":删除#(抓狂)" }, { "icon": "assets/owo/bilibili/E68AA0E9BCBBE5AD90.gif", "data": ":删除#(抠鼻子)" }, { "icon": "assets/owo/bilibili/E6969CE79CBCE7AC91.gif", "data": ":删除#(斜眼笑)" }, { "icon": "assets/owo/bilibili/E697A0E5A588.gif", "data": ":删除#(无奈)" }, { "icon": "assets/owo/bilibili/E69995.gif", "data": ":删除#(晕)" }, { "icon": "assets/owo/bilibili/E6B581E6B197.gif", "data": ":删除#(流汗)" }, { "icon": "assets/owo/bilibili/E6B581E9BCBBE8A180.gif", "data": ":删除#(流鼻血)" }, { "icon": "assets/owo/bilibili/E782B9E8B59E.gif", "data": ":删除#(点赞)" }, { "icon": "assets/owo/bilibili/E7949FE6B094.gif", "data": ":删除#(生气)" }, { "icon": "assets/owo/bilibili/E7949FE79785.gif", "data": ":删除#(生病)" }, { "icon": "assets/owo/bilibili/E79691E997AE.gif", "data": ":删除#(疑问)" }, { "icon": "assets/owo/bilibili/E799BDE79CBC.gif", "data": ":删除#(白眼)" }, { "icon": "assets/owo/bilibili/E79DA1E79D80.gif", "data": ":删除#(睡着)" }, { "icon": "assets/owo/bilibili/E7AC91E593AD.gif", "data": ":删除#(笑哭)" }, { "icon": "assets/owo/bilibili/E885BCE88586.gif", "data": ":删除#(腼腆)" }, { "icon": "assets/owo/bilibili/E889B2.gif", "data": ":删除#(色)" }, { "icon": "assets/owo/bilibili/E8B083E79AAE.gif", "data": ":删除#(调皮)" }, { "icon": "assets/owo/bilibili/E98499E8A786.gif", "data": ":删除#(鄙视)" }, { "icon": "assets/owo/bilibili/E997ADE598B4.gif", "data": ":删除#(闭嘴)" }, { "icon": "assets/owo/bilibili/E99ABEE8BF87.gif", "data": ":删除#(难过)" }, { "icon": "assets/owo/bilibili/E9A68B.gif", "data": ":删除#(馋)" }, { "icon": "assets/owo/bilibili/E9BB91E4BABAE997AEE58FB7.gif", "data": ":删除#(黑人问号)" }, { "icon": "assets/owo/bilibili/E9BC93E68E8C.gif", "data": ":删除#(鼓掌)" } ] 将上文中转码后的名称列成 Excel 表格，并在某单元格（比如图例中的 G2 ~ G5）输入前缀=$G$2&C2&$G$3&$G$4&A2&$G$5然后对于每一行输入公式进行字符串拼接 之后可以将表格复制到 Excel 转 json 中获取相应的 json 文件，就不需要一个个做啦 ww 做完后将其复制到 joe.owo.json 就好了注：我这里是将JSON格式化后的结构，建议格式后进行添加，不容易出错，而且看着不会眼睛疼（ 压缩代码太伤眼了 ）三、上传表情包文件将重命名后的表情包文件上传到 Joe/assets/owo 文件夹中，当然你也可以上传到其他地方，只要能访问到就行然后在打开网站查看效果就好啦～表情包资源当然其实这篇文章最重要的就是五套表情包的资源啦，资源的链接在下面，需要的话就拿去哦～>v< 隐藏内容，请前往内页查看详情
-
『原创』『教程』搭建在线VSCode，部署Code-Server并配置反向代理实现域名访问 前言最近学习web开发，一边看视频一边练习，码代码、记笔记，实属有些不亦乐乎但是无奈本子配置不高，每次同时打开vscode+Chrome，本子风扇呼呼作响不说，手里还像捧着个暖宝宝，实在不快突然想起之前看到过的开源vscode—— code-server ，索性自己也来搭建一个web版的vscode成果展示教程开始一、下载code-server源代码其实codeserver有很多种安装方式，但是我这里使用的是通过宝塔进行本地安装Docker安装虽然简单，但是后期维护和修改会很难受，所有我就采用本地安装吧{card-default label="下载code-server源码" width=""}官方github下载： code-server 国内镜像下载： code-server 3.12.0-linux-amd64.tar.gz code-server-4.1.0-linux-amd64.tar.gz code-server-4.1.0-linux-arm64.tar.gz code-server-4.1.0-macos-amd64.tar.gz {/card-default}二、运行code-server1、上传下载的文件到服务器直接将下载好的文件上传到自己的服务器，当然你也可以先使用宝塔添加一个网站然后上传到该网站对应的目录下2、解压文件3、运行code-server直接在解压的文件夹内点击终端进入终端然后在终端输入以下代码直接启动./bin/code-server --host 0.0.0.0 --port 8080如图所示就是已经完成配置.进入浏览器，输入服务器公网ip，加上刚才我们指定的端口号进入,显示欢迎界面输入密码进入4、修改密码在第一次开启code-server时，会在服务器 根目录-root-.config-code-server下生成一个配置文件打开后可以修改 host:端口 和 密码 ，这里建议把host改为 0.0.0.0 以能够使用外网访问如果不想使用密码，在 启动命令 中加 --auth none 即可无需密码进入。成功访问。到这里，我们就基本完成了 code-server 的部署。存在的问题虽然我们已成功部署了 code-server 服务，但有几个问题仍然不可避免！我们使用 终端 连接的方式启动 code-server，一旦断开连接，那么 code-server 就不可以再使用了code-server 自签的证书被浏览器提示不安全域名 + 端口的访问方式实在是太麻烦，而且还会暴露端口，不安全优化 code-server 服务一、问题11、创建开启脚本直接在code-server同目录下创建一个 start.sh 文件，打开将以下代码复制进去隐藏内容，请前往内页查看详情2、创建关闭脚本创建一个 stop.sh 文件，将以下代码复制进去kill -9 'cat save_pid.txt' # 关闭这个进程，关闭code-server服务这样一来我们就得到了开启和关闭的脚本文件3、启动开启脚本在同目录文件夹下打开终端输入以下代码，就可以直接启动code-server并保持后台./start.sh启动后不会有反馈，可以直接关闭当前终端，然后会发现同目录下生成了 run.log 文件打开 run.log 即可看到运行日志二、问题2{callout color="#38bdff"}必须先添加 SSL 证书，然后设置反向代理{/callout}该步骤结合第三步，先添加一个站点，设置好域名，不需要任何环境，php 版本设置为纯静态，然后在面板的 SSL 中申请 Let’s Encrypt 免费 SSL 证书即可。三、问题3这里我们改变默认端口进行访问，并且使用 Nginx 反向代理修改端口：我们可以选择合适的端口开启 code-server，如: ./code-server --port 288651、创建反向代理点击刚才在宝塔 添加的网站-反向代理-添加反向代理 输入你的 代理名称、目标URL {callout color="#f0ad4e"}代理名称：code-server（随便填）目标URL：你的外网IP:端口{/callout}此时你就可以直接使用你的域名进行访问了，但是可能会报错 Error: WebSocket close with status code 1006 别急，这是正常现象，因为你的Nginx没有使用WebSocket代理2、修改反向代理的配置文件点击反向代理里的 配置文件 进行修改在如下位置加入以下代码 隐藏内容，请前往内页查看详情然后再返回你的域名，你会发现可以正常访问了结语虽然code-server还达不到vscode的强大，但是已经可以方便很多了，至少对我来说，我的渣本再也不会呼呼作响了。{bilibili bvid="bv1uL411P7VN" page=""/}
-
『修复』『插件』Typecho文章内容分页插件修复版（适配Joe编辑器） 前言最近在学习web开发，每天跟着教学视频学习，我觉得每一个都是重点，所以有很多学习笔记我将学习笔记放在了自己的博客，一是为了记录自己学习内容，二是为了复习方便但是最近学习DOM的时候，发现有很多要点，而我又不想将其分篇来写，所以导致一篇文章有很多内容内容一多，阅读的时候就很不方便，因为滚动条变小了，而且一直翻不到底也很容易让人放弃所以我就去寻找有没有将文章分页的方法，好不容易找到一个方法，但无奈自己才疏学浅无法将其应用到typecho上来只好退而求其次，寻找有么有现成的方法或者插件，功夫不负有心人，终于还是让我找到了一款插件但是版本很老，是2010年的一款插件，已经不支持typecho1.1了索性到google去找找，没想到意外发现了一位大佬修复了兼容1.1的问题可是由于版本较早，且当年互联网的技术和审美不如现在，所以虽然能用也还是存在一些小问题，比如支持第三方编辑器时，快捷插入键失效且显示在页面底部于是自己动手修复了一下，并对样式进行了一些修改，虽不够完美，但起码适配当前主题成果展示{tabs}{tabs-pane label="前端展示"}{/tabs-pane}{tabs-pane label="编辑器展示"}{/tabs-pane}{/tabs}插件下载本插件主要适配Joe主题，如其他主题需要使用，可以自行修改博主也可以提供一些小的技术支持，喜欢的话不妨打赏博主，万分感谢！
-
『笔记』JavaScript基础学习笔记 5 — DOM（文本对象模型） DOM（文档对象模型）1、DOM的简介（1）什么是DOM：DOM：文档对象模型（Document Object Model） （2）模型：（3）节点：节点的类型节点的属性例：<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">我是一个按钮</button> <script type="text/javascript"> /* 浏览器已经提供了文档节点对象，这个对象是window属性 可以在页面直接使用，文档节点代表的是整个网页 */ console.log(document); //获取到button对象 var btn = doucument.getElementById("btn"); //修改按钮的文字 console.log(btn.innerHTML); btn.innerHTML = "I'm Button"; </script> </body> </html>（4）事件（Event）事件：就是用户和浏览器之间的交互行为可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码将会执行onclick 点击一次、ondblclick点击两次可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--结构和行为耦合，不推荐使用--> <!-- <button id="btn" onclick="alert('你点我干嘛！')；">我是一个按钮</button> --> <button id="btn">我是一个按钮</button> <script type="text/javascript"> //获取到button对象 var btn = doucument.getElementById("btn"); //可以为按钮的对应事件绑定处理函数的形式来响应事件 //这样当事件被触发时，其对应的函数将会被调用 //绑定一个单击事件 //为单击事件绑定的函数，称为单击响应函数 btn.onclick = function(){ alert("单击时触发"); }; btn.ondblclick = function(){ alert("双击才会出现"); }; </script> </body> </html>（5）文档的加载浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行将js代码编写到页面的下部是为了可以在页面加载完毕后再执行js代码onload事件会在整个页面加载完毕后才触发可以为window绑定一个onload事件，可以确保代码执行时所有的DOM对象都已经加载完毕了<head> <script type="text/javascript"> //为window绑定一个onload事件 window.onload = function(){ //获取id为btn的按钮 var btn = document.getElementById("btn"); //为按钮绑定一个单击响应函数 btn.onclick = function(){ alert("hello"); }; }; </script> </head> <body> <button id="btn">点我一下</button> <!-- <script type="text/javascript"> //将js代码编写到页面的下部是为了可以在页面加载完毕后再执行js代码 //获取id为btn的按钮 var btn = document.getElementById("btn"); //为按钮绑定一个单击响应函数 btn.onclick = function(){ alert("hello"); }; </script> --> </body>2、DOM查询（1）获取元素节点window.onload = function(){ //为id为btn01的按钮绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ var bj = document.getElenmentById("bj"); //打印bj //innerHTML 通过这个属性可以获取到元素内部的html代码 alert(bj.innerHTML); }; //为id为btn01的按钮绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ //查找所以li节点 //getElementsByTagName()可以根据标签名来获取一组元素节点对象 //这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中 //即使查询到的元素只有一个也会封装到一个对象中 var lis = document.getElenmentsByTagName("li"); //打印lis //alert(lis); //变量lis for(var i=0; i<lis.length; i++){ alert(lis[i].innerHTML); } }; //为id为btn03的按钮绑定一个单击响应函数 var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ //查找name=gender的所有节点 var inputs = document.getElenmentsByNmae("gender"); //alert(inputs.length); for(var i=0; i<inputs.length; i++){ //对于自结束标签，innerHTML无效 //alert(inputs[i].innerHTML); //如果需要读取元素节点属性直接使用：元素.属性名 //class属性不能采用这种方式，读取class属性时需要使用：元素.className alert(inputs[i].value); alert(inputs[i].name); alert(inputs[i].className); } }; };（2）图片切换的练习<html> <head> <mata charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #outer{ width:500px; margin:50px auto; padding:10px; background-color:yellowgreen; /* 设置文本居中 */ text-align:center; } </style> <script type="text/javascript"> window.onload = function(){ // 点击按钮切换图片 // 获取两个按钮 var prev = document.getElementById("prev"); var naxt = document.getElementById("naxt"); // 获取img标签 var img = docunments.getElementsByTagName("img")[0]; //创建一个数组，用来保存图片的路径 var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"] //创建一个变量来保存当前正在显示的图片的索引 var index = 0; //获取id为info的p元素来修改提示文字 var info = document.getElementById("info"); //设置提示文字 info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张" // 分别为两个按钮绑定单击响应函数 prev.onclick = function(){ //alert("上一张"); // 切换到上一张，索引自减 index--; //判断index是否小于0，小于0则改变为0 if(index<0){ //index = 0; //让图片可以循环 index = imgArr.length - 1; }; img.src = imgArr[index]; //当点击按钮以后，重新设置信息 info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张" }; next.onclick = function(){ //alert("下一张"); //切换图片就是修改img的src属性 //要修改一个元素的属性元素：元素.属性 = 属性值 // 切换到下一张，索引自增 index++; //判断index是否大于最后一个索引，最后一个索引为imgARrr.length - 1 if(index>imgArr.length - 1){ //index = imgArr.length - 1; //让图片可以循环 index = 0; }; img.src = imgArr[index]; //当点击按钮以后，重新设置信息 info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张" }; } </script> </head> <body> <div id="outer"> <p id="info"></p> <img src="img/1.jpg" alt="冰棍" /> <button id="prev">上一张</button> <button id="next">下一张</button> </div> </body> </html>（3）获取元素节点的子节点window.onload = function(){ //为id为btn04的按钮绑定一个单击响应函数 var btn04 = document.getElementById("btn04"); btn04.onclick = function(){ //获取id为city的元素 var city = document.getElementById("city"); //查找#city下所有的li节点 var lis = city.getElementsByTagName("li"); for(var i=0; i<lis.length; i++){ alert(lis[i].innerHTML); } }; //为id为btn05的按钮绑定一个单击响应函数 var btn05 = document.getElementById("btn05"); btn05.onclick = function(){ //返回id为city的节点 var city = document.getElementById("city"); //返回#city下所有子节点 //childNodes属性会获取包括文本节点在内的所有节点 //根据DOM标准，标签与标签之间的空白也会当成文本节点 //但是IE8及以下的浏览器，不会将空白文本当成子节点 var cns = city.childNodes; //alert(cns.length); // for(var i=0; i<cns.length; i++){ // alert(cns[i]); // } //children属性可以获取当前元素的所有子元素 var cns2 = city.chileren; alert(cns2.length); }; //为id为btn06的按钮绑定一个单击响应函数 var btn06 = document.getElementById("btn06"); btn06.onclick = function(){ //获取id为phone的元素 var phone = document.getElementById("phone"); //返回#phone的第一个子节点 //phone.childNodes[0]; //firstChild属性可获取到当前元素的第一个子节点（包括空白文本节点） var fir = phone.firstChild; //firstElementChild属性可以获取当前元素的第一个子元素，IE8及以下不支持 // fir = phone.firstElementChild; alert(fir.innerHTML); }; };（4）获取元素节点的父节点和兄弟节点//定义一个函数，专门为指定的元素绑定单击函数 /* 参数 idStr 要绑定单击响应函数的对象的id属性值 fun 事件的回调函数，当单击元素时，该函数将会被触发 */ function myClick(idStr,fun){ var btn = document.getElementById("idStr"); btn.onclick = fun; }; window.onload = function(){ //为id为btn07的按钮绑定一个单击响应函数 myClick("btn07",function(){ // 获取id为bj的节点 var bj = document.getElementById("bj"); // 返回#bj的父节点 var pn = bj.parentNode; // alert(pn.innerHTML); // innerText 该属性可以获取到元素内部的文本内容，会去除html标签 alert(pn.innerText); }); //为id为btn08的按钮绑定一个单击响应函数 myClick("btn08",function(){ // 获取id为Android的元素 var and = document.getElementById("android"); //返回id为Andrid的前一个兄弟元素(也可能获取到空白文本) var ps = and.previousSibling; // 获取前一个元素兄弟（不包含空白文本），IE8以下不支持 var pe = and.previousElementSibling alert(ps.innerHTML); alert(pe.innerHTML); }); // 读取#username的value属性值 myClick(btn09,function(){ // 获取id为username的元素 var um = document.getElementById("username"); // 读取um的value属性值 // 文本框的value属性值，就是文本框中填写的内容 alert(um.value); }); // 读取#username的value属性值 myClick(btn10,function(){ // 获取id为username的元素 var um = document.getElementById("username"); // 设置um的value属性值 um.value = "今天天气真不错"; }); // 返回#bj的文本值 myClick(btn11,function(){ // 获取id为bj的元素 var bj = document.getElementById("bj"); // alert(bj.innerHTML); // alert(bj.innerText); // 获取bj中的文本 // var fc = bj.firstChild; // alert(fc.nodeValue); // 与上面相同 alert(bj.firstChild.nodeValue); }); };{nextPage/}（5）全选练习<html> <head> <meta content="text/html; charset=UTF-8"> <title>全选练习</title> <script type="text/javascript"> window.onload = function(){ // 获取四个多选框items var items = document.getElementsByName("items"); // 1.全选按钮，点击按钮后四个多选框全部选中 // 给id为checkAllBtn的按钮绑定一个单击响应函数 var checkAllBtn = document.getElementById("checkAllBtn"); // 给id为checkedAllBox的按钮绑定一个单击响应函数 var checkedAllBox = document.getElementById("checkedAllBox"); checkAllBtn.onclick = function(){ // 遍历items for(var i=0; i<items.length; i++){ // 通过多选框的checked属性可以来获取或者设置多选框的选中状态 // alert(items[i].checked;) // 设置四个多选框变为选中 items[i].checked = true; } // 将全选/全不选设置为选中 checkedAllBox.checked = true; }; // 2.全不选按钮，点击按钮后四个多选框全部不选中 // 给id为checkNoBtn的按钮绑定一个单击响应函数 var checkNoBtn = document.getElementById("checkNoBtn"); checkNoBtn.onclick = function(){ // 遍历items for(var i=0; i<items.length; i++){ // 设置四个多选框变为不选中 items[i].checked = false; } // 将全选/全不选设置为不选中 checkedAllBox.checked = false; }; // 3.反选按钮，点击按钮后选中的变为不选中，没选中的变为选中 // 给id为checkRevBtn的按钮绑定一个单击响应函数 var checkRevBtn = document.getElementById("checkRevBtn"); checkRevBtn.onclick = function(){ // 设置checkedAllBox为默认选中状态 checkedAllBox.checked = true; // 遍历items for(var i=0; i<items.length; i++){ // 判断多选框状态 // if(items[i].checked){ // // 证明多选框为已选中，则设置为没选中状态 // items[i].checked = false; // }else{ // // 证明多选框为没选中，则设置为选中状态 // items[i].checked = true; // } // 直接取反 items[i].checked = !items[i].checked; // 在反选时也需要判断四个多选框是否全都选中 // 判断四个多选框是否全选 // 只有有一个没选中则不是全选 if(!items[i].checked){ // 一旦进入判断则证明不是全选 // 将checkedAllBox设置为没选中状态 checkedAllBox.checked = false; } } }; // 4.提交按钮，点击按钮后，将弹出所有选中的多选框的value属性值 // 给id为sendBtn的按钮绑定一个单击响应函数 var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function(){ // 遍历items for(var i=0; i<items.length; i++){ // 判断多选框是否选中 if(items[i].checked){ alert(items[i].value); } } }; // 5.全选/全不选多选框，当他选中时其余的也选中，当他取消时其余的也取消 // // 给id为checkedAllBox的按钮绑定一个单击响应函数 // var checkedAllBox = document.getElementById("checkedAllBox"); checkedAllBox.onclick = function(){ // 在事件响应函数中，响应函数是给谁绑定的，this就是谁 // alert(this == checkedAllBox); // 设置多选框的选中状态 for(var i=0; i<items.length; i++){ // items[i].checked = checkedAllBox.checked; items[i].checked = this.checked; } }; // 如果四个多选框全选中，则checkedAllBox也应该选中 // 如果四个多选框没有全选中，则checkedAllBox也不应该选中 // 6.为四个多选框分别绑定点击函数 for(var i=0; i<items.length; i++){ items[i].onclick = function(){ // 设置checkedAllBox为选中状态 checkedAllBox.checked = true; for(var j=0; j<items.length; j++){ // 判断四个多选框是否全选 // 只有有一个没选中则不是全选 if(!items[j].checked){ // 一旦进入判断则证明不是全选 // 将checkedAllBox设置为没选中状态 checkedAllBox.checked = false; // 一旦进入判断则已经得出结果，不用再继续执行循环 break; } } }; } }; </script> </head> <body> <form method="post" action=""> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br/> <input type="button" id="checkAllBtn" value="全 选"/> <input type="button" id="checkNoBtn" value="全不选"/> <input type="button" id="checkRevBtn" value="反 选"/> <input type="button" id="sendBtn" value="提 交"/> </form> </body> </html>（6）DOM查询的其他方法<html> <head> <script> window.onload = function(){ // 获取body标签 // var body = document.getElementsByName("body")[0]; // 在document中有一个属性body，他保存的是body的引用 var body = document.body; console.log(body); // document.documentElenment保存的是html的根标签 var html = document.documentElenment; console.log(html); // document.all代表页面中的所有元素 var all = document.all; console.log(all.length); //输出6 for(var i=0; i<all.length; i++){ console.log(all[i]); } all = document.getElementsByTagName("*"); //相等于document.all console.log(all.length); // 根据元素的class属性值查询一组元素节点对象 // getElementsByClassNmae可以根据元素的class属性值查询一组元素节点对象 // 但是不支持IE8及以下浏览器 var box1 = document.getElementsByClassNmae("box1"); console.log(box1.length); // 获取页面中所有的div元素 var divs = document.getElementsByTagName("div"); // 获取class为box1中所有的div // 通过css选择器选择来获取 /* document.querySelector() 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象 可以兼容IE8浏览器 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个也只会返回第一个 */ var div = document.querySelector(".box1 div"); console.log(div.innerHTML); var box1 = document.querySelector(".box1"); console.log(box1); // document.querySelectorAll() // 该方法与querySelector()用法类似，但是可以将所有满足条件的元素封装到一个数组中返回 // 即使符合条件的元素只有一个也会返回为数组 var box1 = document.querySelectorAll(".box1"); console.log(box1.length); }; </script> </head> <body> <div class="box1"> 我是box1中的div <div>我是box1中的div</div> </div> <div class="box1"> <div>我是box1中的div</div> </div> <div class="box1"> <div>我是box1中的div</div> </div> <div> </div> </body> </html>（7）DOM增删改<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript"> window.onload = function() { //1.创建一个"广州"节点,添加到#city下 myClick("btn01",function(){ //创建广州节点 <li>广州</li> //创建li元素节点 // document.createElement()可以用于创建一个元素节点对象， // 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回 var li = document.createElement("li"); //创建广州文本节点 // document.createTextNode()可以用来创建一个文本节点对象 // 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 var gzText = document.createTextNode("广州"); //将gzText设置li的子节点 // appendChild()向一个父节点中添加一个新的子节点 // - 用法：父节点.appendChild(子节点); li.appendChild(gzText); //获取id为city的节点 var city = document.getElementById("city"); //将广州添加到city下 city.appendChild(li); }); //2.将"广州"节点插入到#bj前面 myClick("btn02",function(){ //创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); // insertBefore()可以在指定的子节点前插入新的子节点 // - 语法：父节点.insertBefore(新节点,旧节点); city.insertBefore(li , bj); }); //3.使用"广州"节点替换#bj节点 myClick("btn03",function(){ //创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); // replaceChild()可以使用指定的子节点替换已有的子节点 // - 语法：父节点.replaceChild(新节点,旧节点); city.replaceChild(li , bj); }); //4.删除#bj节点 myClick("btn04",function(){ //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); // removeChild()可以删除一个子节点 // - 语法：父节点.removeChild(子节点); //city.removeChild(bj); // 子节点.parentNode.removeChild(子节点); bj.parentNode.removeChild(bj); }); //5.读取#city内的HTML代码 myClick("btn05",function(){ //获取city var city = document.getElementById("city"); alert(city.innerHTML); }); //6.设置#bj内的HTML代码 myClick("btn06" , function(){ //获取bj var bj = document.getElementById("bj"); bj.innerHTML = "昌平"; }); myClick("btn07",function(){ //向city中添加广州 var city = document.getElementById("city"); // 使用innerHTML也可以完成DOM的增删改的相关操作 // 一般我们会两种方式结合使用 //city.innerHTML += "<li>广州</li>"; //创建一个li var li = document.createElement("li"); //向li中设置文本 li.innerHTML = "广州"; //将li添加到city中 city.appendChild(li); }); }; function myClick(idStr, fun) { var btn = document.getElementById(idStr); btn.onclick = fun; } </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> </div> </div> <div id="btnList"> <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div> <div><button id="btn02">将"广州"节点插入到#bj前面</button></div> <div><button id="btn03">使用"广州"节点替换#bj节点</button></div> <div><button id="btn04">删除#bj节点</button></div> <div><button id="btn05">读取#city内的HTML代码</button></div> <div><button id="btn06">设置#bj内的HTML代码</button></div> <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div> </div> </body> </html>（8）添加删除记录-删除<html> <head> <title>添加删除记录练习</title> <script> window.onload = function(){ // 点击超链接后删除一个员工信息 // 获取所有的超链接 var allA = document.getElementsByTagName("a"); // 为每一个超链接都绑定一个单机响应函数 for(var i=0; i<allA.length; i++){ allA[i].onclick = function(){ // 点击超链接后要删除超链接所在行 // 这里点击哪个超链接this就是谁 // 获取a标签父元素的父元素 tr var tr = this.parentNode.parentNode; // 获取要删除的员工的名字 // var name = tr.getElementsByTagName("td")[0].innerHTML; var name = tr.children[0].innerHTML; // 删除之前弹出提示框 // alert("确认删除吗？"); // confirm()用于弹出一个带有确认和取消的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示 // 如果用户点击确认返回true，点击取消返回false var flag = confirm("确认删除"+name+"吗？"); // 如果用户点击确认 if(flag){ // 删除tr，tr的父元素删除子元素tr tr.parentNode.removeChild(tr); } // 点击超链接后会跳转页面，是超链接的默认行为 // 但是此时不需要默认行为，可以通过在响应函数的最后return false来取消默认行为 return false; }; } }; </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="enmName" id="empName" </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email" </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary" </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html>{nextPage/}（9）添加删除记录-添加<html> <head> <title>添加删除记录练习</title> <script> // 删除tr的响应函数 function delA(){ // 点击超链接后要删除超链接所在行 // 这里点击哪个超链接this就是谁 // 获取a标签父元素的父元素 tr var tr = this.parentNode.parentNode; // 获取要删除的员工的名字 // var name = tr.getElementsByTagName("td")[0].innerHTML; var name = tr.children[0].innerHTML; // 删除之前弹出提示框 // alert("确认删除吗？"); // confirm()用于弹出一个带有确认和取消的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示 // 如果用户点击确认返回true，点击取消返回false var flag = confirm("确认删除"+name+"吗？"); // 如果用户点击确认 if(flag){ // 删除tr，tr的父元素删除子元素tr tr.parentNode.removeChild(tr); } // 点击超链接后会跳转页面，是超链接的默认行为 // 但是此时不需要默认行为，可以通过在响应函数的最后return false来取消默认行为 return false; }; window.onload = function(){ // 点击超链接后删除一个员工信息 // 获取所有的超链接 var allA = document.getElementsByTagName("a"); // 为每一个超链接都绑定一个单机响应函数 for(var i=0; i<allA.length; i++){ allA[i].onclick = delA; } // 添加员工的功能，点击按钮后将员工信息添加到表格中 // 为提交按钮绑定一个单击函数 var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick = function(){ // 获取用户提交的员工信息 // 获取员工的名字 var name = document.getElementById("empName").value; // 获取员工的email和salary var email = document.getElementById("email").value; var salary = document.getElementById("salary").value; //需要将获取到的信息保存到tr中 // 创建一个tr var tr =document.createElement("tr"); // 创建四个td var nameTd =document.createElement("td"); var emailTd =document.createElement("td"); var salaryTd =document.createElement("td"); var aTd =document.createElement("td"); // 创建一个a元素 var a = document.createElement("a"); // 创建文本节点 var nameText = document.createTextNode(name); var emailText = document.createTextNode(email); var salaryText = document.createTextNode(salary); var delText = document.createTextNode("Delete"); // 将文本添加到td中 nameTd.appendChild(nameText); emailTd.appendChild(emailText); salaryTd.appendChild(salaryText); // 向a中添加文本 a.appendChild(delText); // 将a添加到td中 aTd.appendChild(a); // 将td添加到tr中 tr.appendChild(nameTd); tr.appendChild(emailTd); tr.appendChild(salaryTd); tr.appendChild(aTd); // 向a中添加href属性 a.href = "javascript:;"; // 为新添加的a再绑定一次单击响应函数 a.onclick = delA; // 获取table var employeeTable = document.getElementById("employeeTable"); // 获取employeeTable中的tbody var tbody = employeeTable.getElementsByTagName("tbody")[0]; // 将tr添加到table中 tbody.appendChild(tr); }; }; </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="enmName" id="empName" </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email" </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary" </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html>（10）添加删除记录-修改<html> <head> <title>添加删除记录练习</title> <script> // 删除tr的响应函数 function delA(){ // 点击超链接后要删除超链接所在行 // 这里点击哪个超链接this就是谁 // 获取a标签父元素的父元素 tr var tr = this.parentNode.parentNode; // 获取要删除的员工的名字 // var name = tr.getElementsByTagName("td")[0].innerHTML; var name = tr.children[0].innerHTML; // 删除之前弹出提示框 // alert("确认删除吗？"); // confirm()用于弹出一个带有确认和取消的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示 // 如果用户点击确认返回true，点击取消返回false var flag = confirm("确认删除"+name+"吗？"); // 如果用户点击确认 if(flag){ // 删除tr，tr的父元素删除子元素tr tr.parentNode.removeChild(tr); } // 点击超链接后会跳转页面，是超链接的默认行为 // 但是此时不需要默认行为，可以通过在响应函数的最后return false来取消默认行为 return false; }; window.onload = function(){ // 点击超链接后删除一个员工信息 // 获取所有的超链接 var allA = document.getElementsByTagName("a"); // 为每一个超链接都绑定一个单机响应函数 for(var i=0; i<allA.length; i++){ allA[i].onclick = delA; } // 添加员工的功能，点击按钮后将员工信息添加到表格中 // 为提交按钮绑定一个单击函数 var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick = function(){ // 获取用户提交的员工信息 // 获取员工的名字 var name = document.getElementById("empName").value; // 获取员工的email和salary var email = document.getElementById("email").value; var salary = document.getElementById("salary").value; //需要将获取到的信息保存到tr中 // 创建一个tr var tr =document.createElement("tr"); // 设置tr中的内容 tr.innerHTML = "<td>"+name+"</td>"+ "<td>"+email+"</td>"+ "<td>"+salary+"</td>"+ "<td><a href='javascript;:'>Delete</a></td>"; // 获取刚添加的a元素，并为其绑定单击响应函数 var a = tr.getElementsByTagName("a")[0]; a.onclick = delA; // 获取table var employeeTable = document.getElementById("employeeTable"); // 获取employeeTable中的tbody var tbody = employeeTable.getElementsByTagName("tbody")[0]; // 将tr添加到table的tbody中 tbody.appendChild(tr); }; }; </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="enmName" id="empName" </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email" </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary" </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html>（11）添加删除记录-a的索引问题<html> <head> <title>添加删除记录练习</title> <script> window.onload = function(){ // 点击超链接后删除一个员工信息 // 获取所有的超链接 var allA = document.getElementsByTagName("a"); // 为每一个超链接都绑定一个单机响应函数 for(var i=0; i<allA.length; i++){ // for循环会在页面加载完成之后立即执行 // 而响应函数会在超链接被点击才会执行 // 当响应函数执行时，for循环早已经执行完毕 alert("for循环正在执行"+i)； allA[i].onclick = function(){ alert("响应函数正在执行"+i); // alert(allA[i]); return false; }; } }; </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="enmName" id="empName" </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email" </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary" </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html>{nextPage/}（12）操作内联样式<html> <head> <title></title> <style> #box1{ width:100px; height:100px; background-color:red; } </style> <script> window.onload = function(){ // 点击按钮后，修改box1的大小 // 获取box1 var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 修改box1的宽度 // 通过JS修改元素的样式 // 语法：元素.style.样式名 = 样式值 // 如果CSS的样式名中含有减号-，这种名称在JS中是不合法的 // 需要将这种样式名修改为驼峰命名法，去掉减号-，然后将-后的字母大写 // border-top-width需要改为borderTopWidth // 通过style属性设置的样式都是内联样式，优先级较高 // 通过JS修改的样式基本都会立即显示，但是如果在样式中写了!important，则此样式会有最高的优先级，即使通过JS也不能覆盖此样式 box1.style.width = "300px"; box1.style.height = "300px"; // box1.style.background-color = "blue"; box1.style.backgroundColor = "blue"; }; // 点击按钮2后读取元素的样式 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ // 读取box1的样式 // 语法：元素.style.样式名 // 通过style设置或读取的都是内联样式 // 无法读取到样式表里的样式 // alert(box1.style.width); alert(box1.style.backgroundColor); } }; </script> </head> <body> <button id="btn01">点我一下</button> <button id="btn02">点我一下2</button> <div id="box1"></div> </body> </html>（13）获取元素的样式元素.currentStyle.样式名getComputdeStyle()方法<html> <head> <style> #box1{ width:100px; height:100px; background-color:yellow; } </style> <script> window.onload = function(){ var box1 = document.getElementById("Box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 获取元素当前显示的样式 // 语法：元素.currentStyle.样式名 // 如果当前没有设置样式，则返回样式的默认值 // currentStyle只有IE支持 // alert("box1.currentStyle.backgroundColor"); // 在其他浏览器中可以使用getConputedStyle()方法来获取元素当前的样式，这个方法是window的方法，可以直接使用 // 需要两个参数（第一个：要获取样式的元素，第二个：可以传递一个伪元素，一般都传null） // 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式来读取样式 // var obj = getComputedStyle(box1,null); // alert(obj); // 如果获取的样式没有设置样式，则还是会返回一个值 // IE8及以下不支持该方法 // 通过currentStyle和getComputdeStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性 // 正常浏览器的方式 // alert(getComputedStyle(box1,null).backgroundColor); // IE8的方式 // alert(box1.currentStyle.backgroundColor); alert(getStyle(box1,"width")); }; }; // 定义一个函数用来获取指定元素当前的样式 // 参数：obj 要获取样式的元素，name要获取的样式名 function getStyle(obj,name){ // 正常浏览器的方式 return getConputedStyle(obj,null)[name]; // IE8的方式 return obj.currentStyle[name]; }; </script> </head> <body> <button id="btn01">点我一下</button> <br/> <div id="box1"></div> </body> </html>getStyle方法<html> <head> <style> #box1{ width:100px; height:100px; background-color:yellow; } </style> <script> window.onload = function(){ var box1 = document.getElementById("Box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ alert(getStyle(box1,"width")); }; }; // 定义一个函数用来获取指定元素当前的样式 // 参数：obj 要获取样式的元素，name要获取的样式名 function getStyle(obj,name){ // 加入window后getConputedStyle会变成对象的属性 if(window.getConputedStyle){ // 正常浏览器的方式,具有getConputedStyle()方法 return getConputedStyle(obj,null)[name]; }else{ // IE8的方式,没有getConputedStyle()方法 return obj.currentStyle[name]; } // 在IE11中优先级会改变 // if(obj.currentStyle){ // return obj.currentStyle[name]; // }else{ // return getConputedStyle(obj,null)[name]; // } // 与第一种一样，但是结构较为复杂 // return window.getConputedStyle?getConputedStyle(obj,null)[name]:obj.currentStyle[name]; } </script> </head> <body> <button id="btn01">点我一下</button> <br/> <div id="box1"></div> </body> </html>（14）其他样式相关的属性HTML DOM Element 对象<html> <head> <style> #box1{ width:100px; height:150px; background-color:red; padding:10px; border:10px solid yellow; } #box2{ padding:100px; background-color:#bfa; } #box4{ width:200px; height:300px; backgroun-color:#bfa; overflow:atuo; } #box5{ width:450px; height:600px; backgroun-color:yellow; } </style> <script> window.onload function(){ var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); var box4 = document.getElementById("box4"); btn01.onclick = function(){ // clientWidth和clientHeight可以获取元素的可见宽度与高度 // 不带px的数字，可以直接计算 // 会获取元素的宽度和高度，包括内容区和内边距 // 这些属性都是只读的，不能修改 alert(box1.clientWidth); alert(box1.clientHeight); // offsetWidth和offsetHeight可以获取元素的整个宽度和高度，包括内容区、内边距、边框 alert(box1.offsetWidth); // offsetParent可以用来获取当前元素的定位父元素 // 会获取到离当前元素最近的开启了定位的祖先元素 // 如果所有的祖先元素都没有开启定位，则返回body var op = box1.offsetParent; alert(op.id) // offsetLeft当前元素相对于其定位父元素的水平偏移量 // offsetTop当前元素相对于其定位父元素的垂直偏移量 alert(box1.offsetLeft); //输出100px // scrollHeight滚动高度、scrollWidth滚动宽度，可以获取到元素整个滚动区域的高度和宽度 alert(box4.scrollHeight); alert(box4.scrollWidth); // scrollLeft可以获取水平滚动条滚动的距离 // scrollTop可以获取垂直滚动条滚动的距离 alert(box4.scrollLeft); // alert(box4.clientHeight); //283 alert(box4.scrollHeight - box4.scrollTop); //滚动条拉到最底部输出283 // 当满足scrollHeight - scrollTop == clientHeight说明垂直滚动条滚动到底了 // 当满足scrollWidth - scrollLeft == clientWidth说明水平滚动条滚动到底了 }; }; </script> </head> <body id="body"> <button id="btn01"></button> <div id="box4"> <div id="box5"></div> </div> <br/><br/> <div id="box3"> <div id="box2" style="position:relative"> <div id="box1"></div> </div> </div> </body> </html>练习<html> <head> <style> #info{ width:300px; height:500px; background-color:#bfa; overflow:auto; } </style> <script> window.onload = function(){ // 当垂直滚动条滚动到底时使表单项可用 // onscroll该事件在滚动条滚动时会触发 var info = document.getElementById("info"); // 获取表单项 var inputs = document.getElementsByTagName("input"); // 为info绑定一个滚动条滚动事件 info.onscroll = function(){ // 检查垂直滚动条是否滚动到底 // 这里出现了一个小问题，滚动条滚动到最底部时始终还差一点，所以只好使用离滚动条底部距离<1来判断 if (info.scrollHeight - (info.scrollTop + info.clientHeight) < 1) { // 滚动条滚到底时使表单项可用 // alert("我到底了"); inputs[0].disabled = false; inputs[1].disabled = false; } }; // 添加一个必须勾选阅读完成才能注册 inputs[1].onclick = function(){ // 判断表单项是否勾选 if(inputs[0].checked == true){ alert("恭喜您，注册成功！") }else{ alert("请勾选同意本协议") } }; }; </script> </head> <body> <h3>欢迎亲爱的用户注册</h3> <p id="info"> 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 </p> <!-- 如果为表单项添加disabled="disabled"则表单项将变为不可用的状态 --> <input type="checkbox" disabled="disabled" />我已仔细阅读 <input type="submit" value="注册" disabled="disabled" /> </body> </html>15、事件对象<html> <head> <style> #areaDiv{ border:1px solid black; width:300px; height:100px; margin-bottom:10px; } #showMsg{ border:1px solid black; width:300px; height:20px; } </style> <script> window.onload = function(){ // 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标 var areaDiv = document.getElementById("areaDiv"); var showMsg = document.getElementById("showMsg"); // onmousemove该事件将会当鼠标在元素中移动时被触发 // 事件对象： // 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数 // 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下 areaDiv.onmousemove = function(event){ // 在IE8中，响应函数被触发时，浏览器不会传递事件对象 // 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的 // 解决兼容性问题 /* if(!evet){ event = window.event; } */ event = event || window.event; // clientX可以获取获取鼠标的水平坐标 // clientY可以获取获取鼠标的垂直坐标 var x = event.clientX; var y = event.clientY; // 在showMsg中显示鼠标的坐标 showMsg.innerHTML = "x = " +x + ",y="+y; }; }; </script> </head> <body> <div id="areaDiv"></div> <div id="showMsg"></div> </body> </html>{nextPage/}练习：跟随鼠标移动<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; /* 开启box1的绝对定位 */ position:absolute; } </style> <script> window.onload = function(){ // 使div可以跟随鼠标移动 var box1 = document.getElementById("box1"); document.onmousemove = function(event){ // 解决兼容性问题 event = event || window.event; // 获取滚动条滚动的距离 // Chrome可以获取到body的scrollTop // IE等浏览器获取不到body的scrollTop，但是能获取到html的scrollTop // 解决兼容问题 // var st = document.body.scrollTop; // var st = document.documentElement.scrollTop; var st = document.body.scrollTop || document.documentElement.scrollTop; var sl = document.body.scrollLeft || document.documentElement.scrollLeft; // 获取鼠标的坐标 // clientX和clientY用于获取鼠标在当前可见窗口的坐标 // div的偏移量是相对于整个页面的 // pageX和pageX可以获取鼠标相对于整个页面的坐标，不兼容IE8 // var left = event.pageX; // var top = event.pageY; var left = event.clientX; var top = event.clientY; // 设置div的偏移量 box1.style.left = left + sl +"px"; box1.style.top = top + st +"px"; }; }; </script> </head> <body style="height:1000px;width:2000px"> <div id="box1"></div> </body> </html>(16)事件冒泡事件的冒泡：指事件的 向上 传导，当后代元素上的事件被触发时，其祖先元素的 相同事件 也会被触发在开发中，大部分的事件冒泡都是有用的。如果不希望发生事件冒泡可以通过事件对象来取消冒泡可以将事件对象的canceBubble=true用来取消冒泡<html> <head> <style> #box1{ width:200px; height:200px; background-color:yellowgreen; } #s1{ background-color:red; } </style> <script> window.onload = function(){ // 为s1绑定一个单击响应函数 var s1 = document.getElementById("s1"); s1.onclick = function(event){ event = event || window.event; alert("我是span的单击响应函数"); // 可以将事件对象的canceBubble设置为true用来取消冒泡 event.cancelBubble = true; }; // 为box1绑定一个单击响应函数 var box1 = document.getElementById("box1"); box1.onclick = function(){ alert("我是div的单击响应函数"); }; // 为body绑定一个单击响应函数 document.body.onclick = function(){ alert("我是body的单击响应函数"); }; }; </script> </head> <body> <div id="box1"> 我是box1 <span id="s1">我是span</span> </div> </body> </html>（17）冒泡的应用—事件的委派事件委派：将事件统一绑定给元素的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能<html> <head> <script> window.onload = function(){ // 点击按钮后添加超链接 // 获取btn01 var btn01 = document.getElementById("btn01"); // 获取ul var u1 = document.getElementById("u1"); btn01.onclick = function(){ // 创建一个li var li = document.createElement("li"); li.innerHTML = "<a href='javascript:;' class="link">新建的超链接</a>"; // 将li添加到ul中 u1.appendChild(li); }; // 为每一个超链接都绑定一个单击响应函数 // 本方法操作比较麻烦，且只能为已有的超链接设置事件，而新添加的超链接必须重新绑定 // 获取所有的a var allA = document.getElementsByTagName("a"); // 遍历a /*for(i=0; i<allA.length; i++){ allA[i].onclick = function(){ alert("我是a的单击响应函数") }; }*/ // 希望只绑定一次即可应用到多个元素上，即使元素是后添加的 // 为ul绑定一个单级响应函数 u1.onclick = function(event){ event = event || window.event; // event中的target表示触发事件的对象 // alert("event.target"); // 如果触发事件的对象是期望元素则执行，否则不执行 if(event.target.className == "link"){ alert("我是ul的单击响应函数"); } }; }; </script> </head> <body> <button id="btn01">添加超链接</button> <ul id="u1"> <li> <p>我是P元素</p> </li> <li><a href="javascript:;" class="link">超链接一</a></li> <li><a href="javascript:;" class="link">超链接二</a></li> <li><a href="javascript:;" class="link">超链接三</a></li> </ul> </body> </html>（18）事件的绑定<html> <head> <script> window.onload = function(){ // 点击按钮后弹出一个内容 // 获取按钮对象 var btn01 = document.getElementById("btn01"); // 使用对象.事件 = 函数的形式绑定响应函数 // 只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个则后边的会覆盖掉前边的 // 为btn01绑定一个单击响应函数 /*btn01.onclick = function(){ alert(1); };*/ // 为btn01绑定第二个单击响应函数 /*btn01.onclick = function(){ alert(1); };*/ /* addEventListener() *通过这个方法也可以为元素绑定单击响应函数 *参数： *1.事件的字符串，不要on *2.回调函数，是事件触发时该函数会被调用 *是否在捕获阶段触发，需要一个布尔值，一般都为false *使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，当事件被触发时，响应函数将会按照函数的绑定顺序执行 *不支持IE8及以下浏览器 */ btn01.addEventListener("click",function(){ alert(1); },false); btn01.addEventListener("click",function(){ alert(2); },false); btn01.addEventListener("click",function(){ alert(3); },false); /*attachEvent()可以在IE8中来绑定事件 *1.事件的字符串，要on *2.回调函数 *可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反 *不支持IE8以上 */ btn01.attachEvent("onclick",function(){ alert(1); }); btn01.attachEvent("onclick",function(){ alert(2); }); // 自定义bind函数 bind(btn01,"click",function(){ alert(this); }); bind(btn01,"click",function(){ alert(2); }); }; // 自定义一个函数，用来为指定元素绑定响应函数 // addEventListener()中的this是绑定事件的对象 // attachEvent()中的this是window，需要统一两个方法的this /*参数： *obj要绑定事件的对象 *eventStr事件的字符串(不要on) *callback回调函数 */ function bind(obj,eventStr,callback){ if(obj.addEventListener){ // 大部分浏览器兼容的方式 obj.addEventListener(eventStr,callback,flase); }else{ // this是由调用方式决定 // 可以使用匿名函数调用回调函数，这样就可以指定this // IE及以下浏览器，加一个on // obj.attachEvent("on"+eventStr,callback); obj.attachEvent("on"+eventStr,function(){ // 在匿名函数中调用回调函数 callback.call(obj); }); } }; </script> </head> <body> <button id="btn01">点我一下</button> </body> </html>（19）事件的传播事件的冒泡和捕获阶段{alert type="success"}微软公司认为事件是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向元素当前元素的祖先元素上传播，也就是事件在冒泡阶段执行网景公司认为事件是由外向内传播，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素w3c综合了两个公司的方案，将事件传播分成了三个阶段捕获阶段：在捕获阶段时从外（最外层祖先元素）向内（目标元素）进行捕获，但是默认此时不会触发事件目标阶段：事件捕获到目标元素，捕获结束，开始在目标目标元素上触发事件冒泡阶段：事件从目标向他的祖先元素传递，依次触发祖先元素上的事件如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true一般不会希望在捕获阶段触发事件，所以这个参数一般都是false{/alert}<html> <head> <style> #box1{ width:300px; height:300px; background-color:yellowgreen; } #box2{ width:200px; height:200px; background-color:yellow; } #box3{ width:150px; height:15px; background-color:skyblue; } </style> <script> window.onload = function(){ // 分别为三个div绑定单击响应函数 var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); bind(box1,"click",function(){ alert("我是box1的响应函数"); }); bind(box2,"click",function(){ alert("我是box2的响应函数"); }); bind(box3,"click",function(){ alert("我是box3的响应函数"); }); }; function bind(obj,eventStr,callback){ if(obj.addEventListener){ // 大部分浏览器兼容的方式 obj.addEventListener(eventStr,callback,flase); }else{ // this是由调用方式决定 // 可以使用匿名函数调用回调函数，这样就可以指定this // IE8及以下浏览器，加一个on // obj.attachEvent("on"+eventStr,callback); obj.attachEvent("on"+eventStr,function(){ // 在匿名函数中调用回调函数 callback.call(obj); }); } }; </script> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> </body> </html>
-
-
『原创』『教程』首页及文章页滚动广告栏 前言因为之前在很多网站上都能看到广告，虽然但是，这对很多博主来说也是一笔额外的收入，我一直是入不敷出！:@(吐血倒地) 然后我看到了执念博客的首页广告栏，虽然曝光确实大，但是用户体验极其不好，因为要翻很多广告才能翻到文章，就像这样：所以我就想到了滚动广告，一个广告的位置，能够显示多条广告成果展示{tabs}{tabs-pane label="首页"}{/tabs-pane}{tabs-pane label="文章页"}{/tabs-pane}{/tabs}教程开始灵感及相关代码来自于Joe主题的首页轮播图一、添加后台打开 functions.php 添加以下代码{tabs}{tabs-pane label="代码"}$JADPost = new Typecho_Widget_Helper_Form_Element_Textarea( 'JADPost', NULL, NULL, '文章页顶部广告', '介绍：用于设置文章页顶部广告 <br /> 格式：广告图片 || 跳转链接 （中间使用两个竖杠分隔）<br /> 注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0) <br /> 其他：一行一个，一行代表一个轮播广告图' ); $JADPost->setAttribute('class', 'joe_content joe_post'); $form->addInput($JADPost);{/tabs-pane}{tabs-pane label="代码位置"}因为有位小伙伴放错了位置，所以再贴一张图{/tabs-pane}{/tabs}这是文章页的代码，因为首页广告主题自带了二、添加滚动广告栏{tabs}{tabs-pane label="首页"} 因为首页已经有广告位了，所以直接替换就行了将主题 index.php 的以下代码直接替换为新代码{collapse}{collapse-item label="代码位置" open}{/collapse-item}{collapse-item label="新代码" open}隐藏内容，请前往内页查看详情{/collapse-item}{/collapse}{/tabs-pane}{tabs-pane label="文章页"}文章页直接在主题的 post.php 文件内合适的地方加入以下代码{collapse}{collapse-item label="代码位置" open}{/collapse-item}{collapse-item label="代码" open}隐藏内容，请前往内页查看详情{/collapse-item}{/collapse}{/tabs-pane}{/tabs}三、修改广告栏样式{tabs}{tabs-pane label="首页"} 直接在 Joe/assets/css 打开 joe.index.min.css 然后在最后添加以下代码.joe_index__ad .swiper-container{height: 180px!important;border-radius: var(--radius-inner);}.joe_index__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_index__ad .swiper-container{height: 120px!important}.joe_index__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}{/tabs-pane}{tabs-pane label="文章页"}直接在 Joe/assets/css 打开 joe.post.min.css 然后在最后添加以下代码.joe_post__ad .swiper-container{height: 180px!important;margin-top:15px;border-radius: var(--radius-inner);}.joe_post__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_post__ad .swiper-container{height: 120px!important}.joe_post__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}{/tabs-pane}{/tabs}四、添加滚动效果{tabs}{tabs-pane label="首页"}首页因为引入了滚动效果，所有不需要设置，会直接调用首页轮播图的滚动效果但是会根据首页轮播图的滚动方式滚动，效果不太好，暂时没想到比较好的解决方法{/tabs-pane}{tabs-pane label="文章页"}首先在主题的 post.php 文件内 <head>标签内加入以下代码<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>然后再在 Joe/assets/js 打开 joe.post_page.min.js 然后在最后添加以下代码if(0!==$(".joe_post__ad .swiper-container").length){let e="vertical";new Swiper(".swiper-container",{keyboard:!1,direction:e,loop:!0,autoplay:!0,mousewheel:!0,pagination:{el:".swiper-pagination"},})}添加位置{/tabs-pane}{/tabs}教程结束大功告成，快刷新你的网站看看效果吧！
