面向所有人的chatGPT 专属程序员入门教程
> 获取03:14 这种数值的JavaScript 代码“ <input class="bpx-player-ctrl-time-seek" value="00:00" style="display: none;"> <div class="bpx-player-ctrl-time-label"> <span class="bpx-player-ctrl-time-current">03:14</span> <span class="bpx-player-ctrl-time-divide">/</span> <span class="bpx-player-ctrl-time-duration">18:17</span> </div> </div></div>”
---
You can use the following JavaScript code to extract the value "03:14":
javascript
```javascript
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText;
console.log(timeValue);
```
This code uses the `querySelector` method to select the `.bpx-player-ctrl-time-current` element, which contains the value "03:14". The `innerText` property of the selected element is then used to retrieve the text content of the element, which is the value "03:14".
---
> 把发一条友善的评论的元素设置为timeValue “class="report">举报</li></ul></div></div></div><div class="reply-box"></div><div class="paging-box"></div></div></div></div><div class="comment-send-lite " style="width: 651px;"><div class="textarea-container"><textarea class="ipt-txt" placeholder="发一条友善的评论"></textarea><button type="submit" class="comment-submit">发表评论</button></div><div class="comment-emoji comment-emoji-lite"><i class="face"></i><span class="text">表情</span></div></div><div class="loading-state"></div><div class="bottom-page paging-box-big"></”
---
You can use the following JavaScript code to set the value of `timeValue` as the content of the textarea element with class `ipt-txt`:
javascript
```javascript
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
```
This code uses the `querySelector` method to select the `.ipt-txt` element, which is the textarea where you want to set the value of `timeValue`. The `value` property of the selected element is then set to the value of `timeValue`.
---
> 合并上面的代码
---
Here's the combined code for extracting the value "03:14" and setting it as the content of the textarea element with class `ipt-txt`:
javascript
```javascript
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText;
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
```
---
> 按t 时执行这些代码
---
You can use the following code to execute the previous combined code when the "t" key is pressed:
javascript
```javascript
document.addEventListener("keydown", function(event) {
if (event.code === "KeyT") {
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText;
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
}
});
```
This code uses the `addEventListener` method to listen for a "keydown" event. When the "keydown" event occurs, the code checks if the `event.code` property is equal to "KeyT". If it is, the code for extracting the value "03:14" and setting it as the content of the textarea element with class `ipt-txt` is executed.
---
> 执行代码后激活内容输入区域
---
You can use the following code to activate the textarea element after the code is executed:
javascript
```javascript
document.addEventListener("keydown", function(event) {
if (event.code === "KeyT") {
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText;
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
textarea.focus();
}
});
```
This code is the same as the previous code, but with the addition of a call to the `focus` method on the selected textarea element. The `focus` method activates the textarea and places the cursor inside it, allowing the user to immediately start typing.
---
> 取消网页默认行为
---
You can use the following code to cancel the default behavior of the "t" key in the web page:
javascript
```javascript
document.addEventListener("keydown", function(event) {
if (event.code === "KeyT") {
event.preventDefault();
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText;
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
textarea.focus();
}
});
```
This code is the same as the previous code, but with the addition of a call to the `preventDefault` method on the event object. The `preventDefault` method cancels the default behavior of the "t" key in the web page. This is useful if you want to prevent the key from triggering any other events or actions that it would normally trigger.
---
> 时间后面加个空格
---
You can modify the code to add a space after the time value like this:
javascript
```javascript
document.addEventListener("keydown", function(event) {
if (event.code === "KeyT") {
event.preventDefault();
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText + " ";
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
textarea.focus();
}
});
```
This code is the same as the previous code, but with the addition of a space character at the end of the `timeValue` string. The modified `timeValue` string will now have a space after the time value when it is set as the value of the textarea element.
---
> 按t 改成按shift 加 t
---
You can modify the code to trigger the event when the "Shift" key and the "t" key are pressed together like this:
javascript
```javascript
document.addEventListener("keydown", function(event) {
if (event.code === "KeyT" && event.shiftKey) {
event.preventDefault();
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText + " ";
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
textarea.focus();
}
});
```
This code is the same as the previous code, but with the addition of a check for the `shiftKey` property of the event object. The `shiftKey` property is `true` if the "Shift" key is pressed when the event is triggered. The event will only be triggered if both the "Shift" key and the "t" key are pressed together.
---
> 改成tampermonkey 代码
---
Here's the code for Tampermonkey:
javascript
```javascript
// ==UserScript==
// @name Add Time To Comment
// @namespace http://www.example.com/
// @include http://www.example.com/
// @version 1.0
// @grant none
// ==/UserScript==
document.addEventListener("keydown", function(event) {
if (event.code === "KeyT" && event.shiftKey) {
event.preventDefault();
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText + " ";
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
textarea.focus();
}
});
```
This code is the same as the previous code, but with the addition of the Tampermonkey header information at the top. The header information is used by Tampermonkey to identify the script and control how it operates. The `@include` directive specifies the URL pattern that the script should be run on. In this case, the script will be run on the `http://www.example.com/` URL.
---
> 只在https://www.bilibili.com/ 加载
---
Here's the updated code for Tampermonkey to run only on `https://www.bilibili.com/`:
javascript
```javascript
// ==UserScript==
// @name Add Time To Comment
// @namespace http://www.example.com/
// @include https://www.bilibili.com/
// @version 1.0
// @grant none
// ==/UserScript==
document.addEventListener("keydown", function(event) {
if (event.code === "KeyT" && event.shiftKey) {
event.preventDefault();
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText + " ";
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
textarea.focus();
}
});
```
This code is the same as the previous code, but the `@include` directive has been updated to `https://www.bilibili.com/`, so the script will only run on that specific URL.
---
> 在在https://www.bilibili.com/ 所有页面加载
---
Here's the updated code for Tampermonkey to run on all pages of `https://www.bilibili.com/`:
javascript
```javascript
// ==UserScript==
// @name Add Time To Comment
// @namespace http://www.example.com/
// @include https://www.bilibili.com/*
// @version 1.0
// @grant none
// ==/UserScript==
document.addEventListener("keydown", function(event) {
if (event.code === "KeyT" && event.shiftKey) {
event.preventDefault();
const timeSpan = document.querySelector('.bpx-player-ctrl-time-current');
const timeValue = timeSpan.innerText + " ";
const textarea = document.querySelector('.ipt-txt');
textarea.value = timeValue;
textarea.focus();
}
});
```
This code is the same as the previous code, but the `@include` directive has been updated to `https://www.bilibili.com/*`, so the script will run on all pages of `https://www.bilibili.com/`.
---
> summarize a prompt for the current code
---
The current code is a script for Tampermonkey that adds the current time to a comment section on the website `https://www.bilibili.com/`. The script activates when the user presses the `Shift` key and the `T` key, which adds the time displayed on the page (in the format `hh:mm`) followed by a space to the textarea for the comment. The script is designed to run on all pages of `https://www.bilibili.com/` and cancels the default behavior of the web page when the keys are pressed.
---
2023-02-03 17:07:54 CST|23m 48s
Keywords:
程序、插件、时间戳、网站、自定义、规则、编辑器、输入框、自然语言、页面加载
Transcript:
看了这个视频之后，你可能就能够用掐的 GBT 打造成你专属的程序员。比如现在网页，你可以用按 shift t 把它的时间戳插入在评论里，这个是 b 站默认没有的功能。现在实际上是程序发挥的作用。但是你怎么样自己来做到这件事情，只是通过这个例子来说明这么一种方式。你有自己的自定义需求，也可以通过类似的方式来实现。比如现在这个东西，把这里的时间插入到输入框里面，你现在来做。先把页面给保存下来。
对，因为现在刚才改了一下，因为要把状态改成默认的，这样他才他的初始的状态才比较正确。现在把这个页面保存下来，而这里保存页面之后，你随便用一个什么编辑器打开，比如最简单的这种，他好像他还给加，还给解析了一下。
make plantest。先不管了，我之前我因为我自己习惯用别的方式，我刚才没用这种。反正你随便找一个编辑器，按这种方式打开，随便找个编辑器，现在你想先做的，你就想得到值。171748，你就在里边搜一期， T8 对吧。你就把它附近的，你不用管它什么规则，你大概是把附近的只要包含它内容给复制出来，把它输入到洽的 APP 里。这种获取。因为之前我时间和这是不一样的，你就替换成这个时间就行了。把代码粘贴到这里，他就会就会把这个给写出来，对吧。这是这一步。下面得到了值之后，我们可以试一试代码，看 1748 刚才这个值对吧，它其实已经得到了这个值。得到了值之后，我就要去设置到输入的区域里面，这里你可以找到标志性的内容，发一条友善的评论，你还是去这里面搜，跟刚才类似，E。一条发一条友商的评论，也是在它附近把这个东西给复制出来。和刚才做法是类似的，把描述的内容给改一下，把发一条友善的评论的元素设置为咳，因为你可能不是那么自然。我没试过设置成时间，什么可不可以，我估计可能也可以。这里刚开始试的时候，我直接把它写成了它提供的值，你是需要理解的。如果你纯从语义上可能也是可以的，把它设置，它就得到了这么一个东西。实际上它只是完成了这第二个步骤。第一个步骤没有包含在这里面，所以合并一下上面的代码，这里你可以看到和刚才代码，加上这个代码，有一句去掉了，是因为它是一个就是输出，让你在里面，没有让你在里面再输出到看到值的一个语句，不是影响它的功能。下面这里就做到了。获取到时间戳，设置到输入框里面。但是一般的时候我不可能每次都这样执行一遍吗？我牛哥可以给他设个快捷键，按 t 的时候执行那些代码，他又给他改了一下，这里和上面是一样的。这里你其实不用管他怎么写，反正写出来了，这样之后你按 t 就行了。执行之后有一个问题是，因为它相当于，我按了 t 之后，它可以把它设置到这里我想做的事情。比如现在这里他并没有包含程序这个东西，是你讲什么他就做什么，他不会去多余的去做一些事情。所以他只设置之后，你需要去把你的光标或者鼠标激活在这个位置。所以你再告诉他说执行代码后激活内容输入的区域，就相当于它会它会把让你可以直接在这里输入了，而不用你自己再手动来激活这个地方。这里还有一个问题是，这里说的是 t 按 t 默认，它其实会把 t 也输入到这里，这是一个网页的默认的行为，因为实际上他这个事情是你在改写网页默认的一些反应行为，你其实不想让他不想要默认的行为，就按 t 的时候不是去输入t，而是做一些事情。你就要写一下取消网页默认的行为。我你其实不太需要去管它里面是怎么个意思，我这里就是为了说明。我来讲一下。其实加了这么这一句，就对应了刚才这句话。加了默认的行为。这个时候它生成的是这种，就在这里输入的时候，直接在这个时间戳里输入的，你可以再优化一下时间，后面加个空格，这时候它就会变成空格，加了一个空格让你再输入。他也是改了一下，其实是这里加了一个这里的空格。按t。我其实我之前自己写的代码就是按 t 来加的，我都没有，因为反正最后没有改。现在我可以再优化一个代码，就是按 shift t，这里他又加了一个 shift key，就是按 t 的时候也按shift。让执行代码。刚才激活的是 for focus，这是这一句大概能对应出来。你看一下它的每次变化的东西，大概能对应出来。这个功能还是比较简单的，就是这个代码，其实你这样这样粘贴的，让它执行，你就以在这个页面里就生效了。但一般情况下，这种很不方便。你可以安装这么一个程序，它其实帮你做，让你做这件事更加的方便。把这个东西安装之后，就像刚才这里会出现，你可以自己写一个，创建新的，把粘进去，因为这个插件它本身有一些东西，有一些规则什么之类的，所以你这里要再改一下它。写。改成这个东西叫什么 time monkey，他的名字就是插件名字的代码，他就加了一些说明的东西。这里有一个问题，可能是稍微要明确的一点，就了解一下它的功能。代码其实不用你写，但是你要知道它有哪些约定好的一些规则规范，他有哪些能力。实际上是对应的说明。这个意思是代码在哪个页面加载，我们实际上是想让他在哔哩哔哩加载。这里要改一下，你不用改代码，你我刚开始是只在加载它，其实最后生成的不太对，因为它只是这一个网页，就是首页，只是首页。实际上你不想，你是想在这种我视频播放页让它加载，你就再稍微改一下，在这是多输了一个，在他所有页面加载这里他又改了，他又加了一个星号。这其实是一种匹配的一个所谓匹配的模式。这个也可以不用了解，你之后用的多的时候你就知道怎么样来做这种说明。主要是这种说明这里的其实不用，我是为了说明去解释它，其实你平时也可以不解释它，这里就生成了代码。其实我直接把它拷贝到这里，这是刚才运行的时候，我直接拷贝一模一样的东西。在保存之后你就会出现出现这一个东西，这里绿色的时候开启它就相当于生效了，你把它关掉就是不生效了。这样就可以做到你在按 shift t 的时候就可以有这种效果。这实际上你稍微学习一下就可以做到零基础去真的是接近零基础去实现。增强一个网页的功能。在之前你很难做到这件事的，你几乎不是说很难，几乎不可能。当然这里边你还是要了解一些比如插件的一些规则，或者是一些基本的东西，这个东西也是需要一定的学习的，不是说也不是说真的那么自由，因为它毕竟还是要遵循一些程序的一些原则的。不管怎么样，我举这个例子也并不完全是功能本身，而是你有了这种能力之后，你可以比如你用哪个网站的时候，你发现这个地方，我想让他这样做。其实一定程度上你都可以去自己去实现这个东西。其他的 g p t 就相当于是你专属的程，给你配备了一个专属的程序员。对，刚才有一个地方我忘说了，因为我现在电脑用新版的代码比较卡，所以我现在还用的哔哩哔哩旧版的代码。你这个东西要生效，你还是要要选择旧版的设置才能执行相应的代码。现在再回顾一下这个东西，主要你写说明就行，怎么样学写说明里面代码具体啥意思你也不用太理解。昨今天主要还是看了王淑瑞老师昨天发了一个视频，他讲的是一个用 chart g p t 写且爬虫的一个例子，也挺有启发的。我之前是觉着他写代码的能力还是还是可能要在有一定的专业能力的基础上，可能还要才行，但是他举的例子相对来说还是比较能够让零基础的普通人也能做到。这件事，也是有一些限制的。而且我其实改改也，我说修改了他一些描述。他有的地方是你要开这种刚才我打开发者工具，自己去找元素，实际上就像像我刚才这种剧，你就随便复制，让他自己去找。这种方式更加 0 基础。你就不需要了解这些什么开发者的这些工具，啥东西，唯一一个个可能稍微需要了解的插件的工具，以及这个里面代码怎么放在什么位置。相对来说可能专业化强一点，实际上也不是那么简，也实际上也不是那么难。实际上你看着是代码，实际上你把这个东西粘在某个地方而已，是和它内容本身。你是通过这种 XGP 对话的形式实现的，它只是告诉你放在什么地方。有这么一个规则，和代码本身没有太大的关系。所以是真的是挺厉害的。就真的他，有些我还真的挺惊讶的，他有些他真的可以，真的可以。你看起来他好像真的理解了你在说什么，他真的知道哪一步该改到哪一步，而且很准确，而且跟不需要你去人文的干预。如果他需要1，就算是需要，因为程序这个东西需要非常精准的去写的。如果你需要一点干预，对于零基础的人来说就很困难了，因为你就算改一个字母，那个字母就很难。对于有基础的人还好说，但是他竟然可以做到你不完全不用改代码本身，只是让你去增加一些描述，或者改写一些描述。这个东西相对来说还是很自然的一种方式，是挺神奇的。但是另外一个角度来讲，其实 XGP 这种生成代码的能力，在我的理解来说，它还是一种翻译。它并不是真的理解了这个代码本身的含义，而是有一些人写了一些描述，比如教程什么之类的，它就有自然语言的这种描述，加上代码，它实际上它训练之后，让自然语言和程序，甚至或者还有数学的一些知识有了这种对应关系。它只是让你通过一种自然语言去翻译成了一个代码的这种语言。所以一个你，其实严格来讲，他还是不能做到所有的这种程序的事情，就是那种特别模式化的，比较简单的爬虫，或者这种小小的功能的改动，它是可以的。另外一个用的比较广泛的一些语言，比如这是个Javascript，网页什么东西的用的比较多， Python 各种有各种，它的门槛相对低一些，用的人也比较多，所以这种它的效果就比较好。如果一些比较冷门的编程或者冷门的语言，它可能都不行，所以它还是受制于语调这个东西。回过头来，反正网页是很大多数人都会用到的。这种功能还是挺有意思的。我可以再举一个例子，来说明一下这种功能。实际上，当你使用一个网站的时候，刚才这个例子是把它写在了这个地方，挺方便的，我其实用的是挺久的一个功能。你使用一个网站的时候，你有哪些想自定义的一些功能，想增强的一些功能，你就可以自己让用它来写一下。比如，这是飞书的网站，我是经常用它来识别文稿或者字幕，提取出来关键词，看一看这个东西的大概内容。你看这里我经常做的是，我想把关键词粘在它对应的视频下面，我每次可能要这个还不能选，因为它的代码还是禁止选择了，我不能选，我就想我想直接让他能不能我按一个键，让他把它复制出来内容。现在其实我是做到了。这里也可以看到一个叫一键复制视频标签，也是刚才一样一个，类似的一个东西，它做到的效果就是我按 c 的时候就复制出来了，你可以看到粘贴剪剪贴板里面就有这个东西，这就是相当于我增强了它。网站功能和刚才那种使用的生成和使用的方式是类似的，也可以尝试。我举这个例子想说，当你看到一个网站上有你想实现的一个小功能的是吧？可能大功能还是有点勉强，这种增强性的。这种功能还是挺有挺有价值的，也比较容易来做。所以总结一下，真的有了 XGP 这个东西，很多一些小的功能，你真的可以自己来做，也不需要真正的去找一个董编程的程序员来帮你来做了。对，今天视频就分享到这里，我觉得最大的能力就是它让零基础的普通人，所有人都可以来做这件事情，不再局限于只有专业的程序员还要学半天才能去完成这么一件事情。虽然它现在可能还比较只能实现一些比较简单的功能，但是因为又刚又像我刚才说的，它是因为语调的限制，我我我怀疑当语料丰富之后，甚至都可以做到非常专业的这种事情还是挺厉害的一个功能，也不怪最近那么火，所以就这样。有什么想法也都欢迎来交流，看看能用它来做到一些之前完全想不到的事情。好，今天就这样。
