发表更新技术分享2 分钟读完 (大约305个字)

通过JavaScript开发了一款Tampermonkey翻译插件

谷歌浏览器翻译插件,一个兴趣使然的插件

其实是在看英文文档的时候,发现有的单词不认识,只好百度翻译,但是百度翻译有点麻烦(来回切屏),所以想找一个谷歌插件来使用,不过发现谷歌插件都是付费的,正好需要写一个油猴插件,于是,这款插件就这样诞生了,代码写的非常非常的low,非常不优雅,并且样子也很丑陋,但是功能还可以,正常访问谷歌翻译的接口.

使用方式:点击翻译图标,左侧输入要翻译的内容,右侧选择要翻译的语言,点击翻译即可,具体的参数请自己查找/鼠标左键选择但单词/句子,内容覆盖到插件的输入框内.
translate_DB gif效果

计划:

  1. 美化
  2. 接口

安装方法,下载油猴插件,搜索translate_DB,或者直接将代码copy到油猴编辑器中保存即可.
translate_DB安装

开源:https://github.com/datehoer/translate_tampermonkey

发表更新技术分享3 分钟读完 (大约455个字)

html网页音乐播放器

其实一直想在网站上加一个音乐播放器的，但是当时搜索的是谷歌浏览器无法自动播放，所以就没准备加。并且其实当时也自己写了一个播放器，网页音乐播放器 音乐播放器 html++css+js 但是由于懒得写 CSS 代码，所以比较丑，然后就没有往网站上加。但是呢，有一个是我一直不明白的地方，就是当时浏览了一个网页，发现他的音乐可以直接播放，所以今天就来研究一下。

其实也就是右键检查，来进行代码的查看，然后 Ctrl+U 查看一下源代码，搜索到刚才看的位置，然后看他的这些代码有啥玄机。然后我就发现了一个库。

GitHub：https://github.com/DIYgod/APlayer 非常 nice 的一个库。

APlayer 是一个功能强大的 HTML5 音乐播放器，Metingjs 基于 APlayer 插件封装好的插件，开箱即用。

然后我们直接贴代码就好了，毕竟是人家封装好的库了，所以可以直接使用。

html 网页音乐播放器

支持的浏览器：

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer 11
  • Microsoft Edge

在博客中，你提供了该库的详细选项和默认值，使读者可以轻松了解如何自定义音乐播放器。

具体的代码可以去看 GitHub 库，里面有详细的解释。简单贴一下我们的这个底部小图标的代码吧。

1
<meting-js server="netease" type="playlist" id="60198" fixed="true" autoplay="true" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"></meting-js>

非常的方便，HTML 网页音乐播放器，开箱即用。

发表更新技术分享7 分钟读完 (大约1088个字)

通过JavaScript来实现售后五星好评

发一篇js代码吧，毕竟说到底我还是要搞前端的，哈哈。通过JavaScript来实现五星好评功能。这个功能相信各位都不陌生，不论是淘宝还是京东，亦或者是各类微商，都离不开好评这个东西，好评多了，平台对你的关照也就多了起来。而且一般来说这个都是用在售后，外卖网购等等吧，都很需要他的，然后呢，我百度搜索到的许多代码其实都有些冗长了，当然也可能是我没有仔细看，不过大体一看就觉得没我的好，所以才准备发这篇文章，不过其实这个是我好久以前写的了。效果图就不放了，我把所有需要本地的东西都用在线的方式替代了，比如说图片就用图床给替代了，别的也没啥需要替代的了。话不多说，直接上一下代码，然后我们简单的解析一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Document  html, body, a, h1, h2, h3, h4, h5, h6, p, a, b, i, em, ul, ol, li, strong, table, th, tr, td, img, form, input, button, select, option, textarea { margin: 0; padding: 0; }

.body {
  text-align: center;
  margin: 10px auto;
  width: 800px;
  height: 64px;
  background-color: aqua;
}

span {
  display: inline-block;
  width: 40px;
  height: 40px;
  /* border: 1px solid red; */
}

span.star {
  background: url(https://s3.ax1x.com/2020/11/21/Dl492V.png) no-repeat;
  /* cursor: pointer; */
  /* vertical-align: -2px; */
  /* span为行内元素，不能直接设置宽高，转换成block */
}

span.star-off {
  background-position: -40px 0;
}

请选择您的评价:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//获取对象
// var div = document.querySelector("div");
// console.log(div);
// var span = document.querySelectorAll(".star")
// console.log(span);
var star = document.getElementsByClassName("star");
var pingjia = document.querySelector("#pingjia");
var pingjias = ["很差", "较差", "一般", "良好", "很好"];
var len = star.length;
onoff = true; //开关，判断是否点击，点击后不执行移入移出事件
for (var i = 0; i < len; i++) {
  //绑定鼠标移入 移出 点击
  star[i].index = i;
  star[i].onmouseover = function () {
    if (onoff) {
      var num = this.index;
      pingjia.innerHTML = pingjias[num];
      for (var i = 0; i <= num; i++) {
        star[i].style.backgroundPosition = "0 0";
      }
    }
  }
  star[i].onmouseout = function () {
    if (onoff) {
      var num = this.index;
      pingjia.innerHTML = "";
      for (var i = 0; i <= num; i++) {
        star[i].style.backgroundPosition = "-40px 0";
      }
    }
  }
  star[i].onclick = function () {
    onoff = false;
    pingjia.innerHTML = "";
    for (var j = 0; j < len; j++) {
      star[j].style.backgroundPosition = "-40px 0";
    }
    var num = this.index;
    pingjia.innerHTML = pingjias[num];
    for (var i = 0; i <= num; i++) {
      star[i].style.backgroundPosition = "0 0";
    }
  }
}

其实思路非常简单，就是通过css属性中的定位来进行图片的移动，一个星满一个星空，然后我们通过位移和大小来设置让他只能显示一个，之后通过js来判断用户的鼠标移动即可实现功能。

首先呢，先让所有的星星隐藏起来，也就是让他们显示的位置移到右面，显示空星，之后通过js中的onmouseover来判断鼠标的移动，根据移动的位置来实现评分的改变，也就是那个innerHtml，通过这个来改变文字效果，再接着也就是增加别的效果了，比如说评分后想要改变之类的，我们先清空一下属性，然后直接添加新的属性就行了，因为毕竟计算器的运算远非人能相比的，所以虽然看着代码是这个先那个后，但是人眼根本分辨不出来的，然后基本上大部分的功能就实现了。

其实也就是涉及了一个叫做循环的问题，哈哈，其实有点忘了这一段了，刚才去巩固了一下。

其实就是因为你点亮星星的话应该是从头开始的，而我们如果不加循环的话那么它只会点亮我们移动到的星星，而之前的不会管。我们添加了for循环的话，就可以了。

至于为什么不点亮多的星星，是因为我们在前面有一个传参的地方，设置了我们在哪里移动就获取哪里的数值，然后就会把得到的参数传递下去，这样的话前面的星星也就会点亮了。

如果有什么不懂的，可以在评论区留言，我会在看到的时候进行回复的。

发表更新日常学习7 分钟读完 (大约1076个字)

网页音乐播放器 音乐播放器 html+css+js

首先准备工作为 jQuery、HTML、CSS、JavaScript，别的其实并不需要，而且其实 JavaScript 也不需要。 最初是准备不使用 jQuery 的，但是发现用 jQuery 只需要几行代码就能实现的功能，而用原生的 JavaScript 却需要好多，而且也不容易实现，所以最后才准备使用 jQuery 了。

jQuery 的安装各位应该都会吧，如果不会的话，我放一下代码。通过使用 Node.js 来安装，在你的 JS 文件夹里按住 Shift 键并右键，选择打开 PowerShell 窗口，之后只需要输入 cnpm install jquery 即可，或者直接去中文站下载也行，这里不多讲述了。

音乐播放器

列表的点击显示和隐藏就是通过 jQuery 来实现的，很简单，如果使用 JavaScript 还是那句话，麻烦。

之后文字的打字机效果是通过 typed 这个库来实现的，GitHub 跳转链接。其实这个效果加不加都是无所谓的，只是好看了一丢丢而已，并且其实我的 CSS 只是随便写了一下，完全可以稍微优化一下 CSS。

目前的效果也就是点击列表的歌曲，会自动切换音乐和图像，然后上面的目前播放的名字也会换成该音乐的名字。这个网页实现音乐播放器的功能很容易，基本上一眼就能看懂了，后期可能会加一些别的效果，并且把样子做一下，搞一下 CSS。

以下是代码和一些简单的讲解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// JS，名字我是叫的 music.js
// 记录图片和音乐以及正在播放的名字
var mslists = ['./music/jar_of_love.mp3', './music/see_you_again.mp3', './music/sunshine_in_the_rain.mp3'];
var imglists = ['http://p1.music.126.net/8jt2KnGDF0qMP9JbidOtVA==/573945069746475.jpg', 'http://p2.music.126.net/JIc9X91OSH-7fUZqVfQXAQ==/7731765766799133.jpg', 'http://p1.music.126.net/bHQlt-zzDQlsnPydiYKsHw==/109951165124500529.jpg'];
var namelists = ["Jar of love", 'See you again', 'Sunshine in the rain'];

// 点击隐藏和显示
$(".liebiao").click(function() {
  if ($(".msxulie").is(":hidden")) {
    $(".msxulie").show();
  } else {
    $(".msxulie").hide();
  }
});

// 文字效果
window.onload = function() {
  var typed = new Typed(".zzbf", {
    strings: ['', '音乐播放器正在播放:'],
    startDelay: 300,
    typeSpeed: 100,
    loop: true,
    backSpeed: 50,
    showCursor: true,
    cursorChar: '➼'
  });
}

// 点击切换音乐
$(".jol").click(function() {
  $(".mscontrol").attr("src", mslists[0]);
  $(".msimg").attr("src", imglists[0]);
  $(".msplayingtext").html(namelists[0]);
  $(".mscontrol")[0].play();
});

$(".sya").click(function() {
  $(".mscontrol").attr("src", mslists[1]);
  $(".msimg").attr("src", imglists[1]);
  $(".msplayingtext").html(namelists[1]);
  $(".mscontrol")[0].play();
});

$(".sitr").click(function() {
  $(".mscontrol").attr("src", mslists[2]);
  $(".msimg").attr("src", imglists[2]);
  $(".msplayingtext").html(namelists[2]);
  $(".mscontrol")[0].play();
});

下面是 CSS 代码，这个我是叫的 index.css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* 播放器位置 */
.msplayer {
  float: left;
  background-color: aqua;
  border-radius: 20%;
}

/* 播放器图片 */
.msplayer .msimg {
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* 播放器控制器 */
.msplayer .mscontrol {
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  width: 200px;
}

/* 播放器列表按钮 */
.msplayer .liebiao {
  position: relative;
  bottom: 25px;
}

/* 音乐列表 */
.msplayer .msxulie {
  text-align: center;
  width: 315.14px;
  position: absolute;
  display: block;
  background-color: bisque;
  top: 20px;
  left: 315.14px;
  border-radius: 20%;
  cursor: pointer;
}

/* 正在播放 */
.msplaying {
  position: absolute;
  top: 0px;
  left: 80px;
  font-size: 10px;
}

$(".mscontrol").attr("src",mslists[0]);
$(".msimg").attr("src",imglists[0]);
$(".msplayingtext").html(namelists[0]);
$(".mscontrol")[0].play();

第一行是获取 audio 的 src 值，把它设置为我们数组里的值，第二行是更改图片，第三行是修改名字，最后一行其实加不加无所谓的，就是一个自动播放效果，如果换歌就进行自动播放。

然后我那两行注释是修改那个 typed 的效果的，但是发现函数执行了就很难停止，所

以就给注释掉了，效果也是很容易的，就是将那个 typed 效果创建成一个函数，之后调用即可，然后在里面设置一个变量用于接受我们传递的参数就好了，不过目前来说不会怎么停止已经运行的函数，所以这个想法就搁浅了。

CSS 代码没什么难度吧，应该，就是简单的浮动定位效果，把列表给浮动过去，然后 HTML 也是没什么难度的，自己看一眼就好了。

如果有什么不懂的可以在评论区评论，我会在看到的第一时间回复的。

发表更新技术分享8 分钟读完 (大约1208个字)

通过jquery实现用户注册验证

最近在准备考证，再加上要改版一下网站，加一些用户交互功能之类的，并且其实毕竟做东西就是要做好嘛。 所以就在尝试用户注册功能，其实主要还是学习的案例里面有这个通过 jQuery 来实现简单的用户注册功能，然后虽然没怎么仔细听，但是还是会个大概，再加上学了一上午有点小困，所以敲个代码来刺激一下自己。 其实 JavaScript 也可以实现这个效果的，只不过相对要麻烦一些，如果有需要的话，我可能会写一个通过 JavaScript 来实现用户注册的文章，还是看需求，哈哈。 其实这个用户注册还是要通过后台进行数据验证的，但是 PHP 学的不是很精，所以只是简单的验证了一下用户注册和密码过于简单。 苦命，写文章写到一半，然后感觉会有一个小问题出现，然后去测试了一下，发现确实有，之后修改了半天！ 不过目前没找到啥方法解决！好悲惨！—->目前在问老师了，就是想要实现一个判断，之后会输出相应的提示框。 上下效果图：通过 jQuery 实现用户注册验证 就是判断你的用户名是否符合格式，密码是否符合规则，有没有重命名，密码是不是太简单了，很简单的一个小例子，不过很综合，哈哈。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 注册
registerrule = /^[a-zA-z0-9_\-]{4,16} //检测用户名格式的正则 表示不能包含其他字符
passwordrule = /^[a-zA-z0-9_\-]{6,16} //检测用户密码
(function(){
  function checkname(){
    valname = $("input[name=username]").val();
    if(valname == ""){
      $("span").eq(0).html("用户名未填写").css("color", "red");
      return false;
    } else if (registerrule.test(valname)){
      $("span").eq(0).html("用户名格式正确").css("color", "green");
      return true;
    } else {
      $("span").eq(0).html("用户名格式不正确").css("color", "red");
      return false;
    }
  }
  
  function checkpassword(){
    valpw = $("input[name=password]").val();
    if(valpw == ""){
      $("span").eq(1).html("密码未填写").css("color", "red");
      return false;
    } else{
      $("span").eq(1).html("密码格式正确").css("color", "green");
      return true;
    }
  }
  
  $("input[name=username]").blur(function(){
    checkname()
  }).focus(function(){
    $("span").eq(0).html("");
  })
  
  $("input[name=password]").blur(function(){
    checkpassword();
  }).focus(function(){
    $("span").eq(1).html("");
  })
  
  $("button").click(function(){
    if(checkname()){
      $("span").eq(0).html("用户名已存在").css("color", "red");
    }
    if(checkpassword()){
      $("span").eq(1).html("密码太简单了，请换一种密码").css("color", "red");
    }
  })
})()

差不多就是这些，因为注释有点多，就自己剪了一下，如果报错记得告诉我。 思路很简单，就是通过 input 来输入数据，之后通过 jQuery 来进行判断，当然这里的判断是一些比较简单的判断，比如命名是否符合规则，密码是否符合规则等等，不过其实密码应该不需要的，不过当时还是加上了。然后再通过 PHP 后台来进行数据的判断，是否重命名，是否符合简单密码等等吧，不过其实这个简单密码没必要加在这里，可以之前在前面加上判断就好了，可以直接删除掉这段。

然后 PHP 文件就是：

1
2
3
4
5
6
<?php
if($_POST["name"] == "aaaaa"){
  echo "yes";
} else {
  echo "no";
}

这个，之所以没有结束符号，是因为上课的老师讲如果是一个单独的 PHP 文件，里面全是 PHP 代码的话，不需要结束符号，我觉得应该是如果你只是一个单独的 PHP 文件的话，那么你后期再加代码直接往上加就行了，而不需要先把结束符号往后回车几下。

说一下这个 $("span").eq(1).html("密码太简单了，请换一种密码").css("color", "red"); 这个就是获取子类的方法，通过 $("span") 选中 span 标签，然后通过 eq 来遍历一下这个标签，因为一共就两个，所以选择第二个的话就是 1 了，之后再用 html 方法来修改显示的文字，css 方法来修改样式。 前面的代码没什么难度，也就是这个获取第二个字类稍微有点难度。

再说下我想加的效果，就是通过判断，是否名字和密码都符合规则，如果符合的话就出现一个弹窗，本来后面是加的一个 if 判断，前面命名一个变量即可，但是后来发现你在 jQuery 里修改值没有效果，所以就暂时先放一下，问问老师，嘿嘿。

发表更新日常学习3 分钟读完 (大约507个字)

保皇记牌器

相信各位在日常休闲的时候总会打打保皇，够级的。就算平常不打，但是过年还是会打的。我今天在玩qq游戏里的保皇时，突然想做一个记牌器，虽然它自带记牌器但是毕竟花钱，本来想用c/java/python做一个软件通过图片识别功能自动计算的，但是发现学的不到家(确实只学了基础)，这些东西一点没学，所以只好退而求其次，做一个简易的记牌器，通过自己的点击来计算场上剩余牌的数量。

保皇效果图 没错，就是这么的简陋，但是胜在代码简单。 具体思路其实就是通过JavaScript函数进行input里text的value值替换，点击按钮进行增加或者减少。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function add(){
    var txt=document.getElementById("txt"); 
    var a=txt.value; a++; 
    if(txt.value<16){ 
        txt.value=a; 
    } 
} 
function sub(){ 
    var txt=document.getElementById("txt"); 
    var a=txt.value; 
    if(a>0){ 
        a--;
        txt.value=a;
    }
    else{ 
        txt.value=0;
    } 
}

通过修改a++来达到不同的效果，不过其实我觉得非常麻烦，但是受于储存的知识面，目前来说不太会进一步修改，不过目前其实是想在每一个数的后面加上一个历史数据，就是本来值为16，你-4，text里的值变为12，但是历史数据还是16，然后再-1，text值变为11，历史数据变为12，类似这样，在下一个文档我会把他发出来。 最后上一下代码，由于有点长，所以只上一下html代码，JavaScript我会上传一个附件出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<ul>
  <li>
    大王剩余:
    <input type="text" id="txtd" value="4" />
    <input type="button" onclick="addd()" value="+1">
    <input type="button" onclick="subd()" value="-1">
  </li>
  <li>
    小王剩余:
    <input type="text" id="txtx" value="4" />
    <input type="button" onclick="addx()" value="+1">
    <input type="button" onclick="subx()" value="-1">
  </li>
  <li>
    2剩余:
    <input type="text" id="txt2" value="16" />
    <input type="button" onclick="add21()" value="+1">
    <input type="button" onclick="sub24()" value="-4">
    <input type="button" onclick="sub23()" value="-3">
    <input type="button" onclick="sub22()" value="-2">
    <input type="button" onclick="sub21()" value="-1">
  </li>
  <li>
    A剩余:
    <input type="text" id="txta" value="16" />
    <input type="button" onclick="adda1()" value="+1">
    <input type="button" onclick="suba4()" value="-4">
    <input type="button" onclick="suba3()" value="-3">
    <input type="button" onclick="suba2()" value="-2">
    <input type="button" onclick="suba1()" value="-1">
  </li>
  <!-- 接下来的卡牌以相同的模式继续 -->
</ul>
<script src="js/script.js">

最后把JavaScript代码外链进去即可！ 附件最后还是变成了 云盘

关注我

链接

分类

最新文章

归档

标签

ChatGPT2
GitHub1
Linux3
Milvus1
Shadowrocket1
V2RayN1
V2RayNG1
c++1
ce1
centos2
chromium1
clash3
clashX1
css5
datax1
docker3
fiddler2
flask1
git1
go3
html5
java1
javascript6
jquery3
kafka2
linux7
mysql2
navicat1
node8
nodejs6
php4
playwright1
puppeteer2
pycharm4
pyscript1
python30
switch1
tomcat1
ubuntu2
vue6
web5
windows1
youtube1
yum1
zlibrary1
公众号1
刷机1
博客7
反编译2
小程序2
抓包2
教程19
数据库1
日常10
游戏2
爬虫4
监控1
织梦2
翻墙7

订阅更新

follow.it

×