利用JS为女朋友做一个小工具
程序员文章站
2024-03-12 16:59:50
...
最近学到了JS的document对象的属性和方法，利用现有的知识做一个简易的网页小工具。先上效果图:
每次学前端的时候查资料也花挺多时间，所以做一个方便自己的网页小工具，放在桌面，用到的是onclick点击事件，和提交表单的一点知识，提交表单给百度。和button的点击转到新地址。大致的效果就是：搜索，切换翻译，和转到需要的网页。
实现方法：
1.利用html的各个表单设计基本的样式
<label for="Search" class="lab">百度一下</label>
<input type="text" placeholder="---请输入要搜索内容---" id="Search1" name="" class="Search" >
<input type="submit" value="搜索" style="height: 50px;width: 80px;" onclick="dosou()">
<form action="" id="fanyi" target="_blank">
<div>
<label for="sel" class="lab">百度翻译</label>
<select id="sel">
<option id="english">英译汉</option>
<option id="chinese">汉译英</option>
</select>
<input type="text" placeholder="---请输入要翻译内容---" id="Search2" class="Search" name="aldtype">
<input type="submit" value="翻译" style="height: 50px;width: 80px;" onclick="dofan()">
<button class="button1" onclick="jump1()">转到W3school</button>
</div>
</form>
列举了一部分按钮，这部分很基础就不细说了，需要的话可以再添加一个调色板按钮，和解码器。
2.js部分
01.实现提交表单到百度搜索
1.首先我们要理解form标签的action属性，他是用来将表单提交给一个地址的，需要为它赋一个url
2.然后我们要明白一个网址的构成，知道get提交的表单提交给谁了
例如:百度
https://www.baidu.com/s?wd=csdn
会发现，百度是在/s目录下用wd来接受用户输入的值的，所以这就确定了我们name的值为wd。form的action为https://www.baidu.com/s
3.在js中编写函数，实现点击提交按钮调用函数。代码如下：
function $(id){
return document.getElementById(id);
}
//第一部分
function dosou(){
$("Search1").name="wd"; //注意加引号
$("souso").action="http://www.baidu.com/s";
}
02实现切换select进行不同方式翻译
1.重复01的步骤
2.编写JS用if来判断option不同的id来实现切换地址
3.如果你写的是radio就判断checked是否选中
先来看看代码：
function dofan(){
if($("english").selected){
//相当于直接提交给搜索好的网站，不是很好
$("fanyi").action="https://fanyi.baidu.com/#en/zh/"+$("Search2").value;
/*测试一：失败，会出现url转义
$("Search2").value="#en/zh/"+$("Search2").value */
//测试二：失败,会出现url转义
/*var a="#en/zh"+$("Search2").value;
function URLencode(a)
{
return a.replace(/\%/g,"%25").replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
}
$("Search2").value=URLencode(a);*/
}
else if($("chinese").selected){
$("fanyi").action="https://fanyi.baidu.com/#zh/en/"+$("Search2").value;;
}
}
在进行表单提交时会发现一个bug，会发现在提交表单时，百度翻译会进行一个转义，试了三种方式，最后选择了直接改变url的方式，当然这种方式虽然效果达到了，但是逻辑上有点问题，可能是不同页面提交方式不同，不知道百度翻译具体是怎么提交表单的，（有大神知道的话，求指点）。
3实现按钮的跳转
这个我就不啰嗦了，写一个jump函数就可以，代码如下
//第三部分
function jump1(){
window.open("https://www.w3school.com.cn/");
}
function jump2(){
window.open("https://www.runoob.com/");
}
function jump3(){
window.open("https://www.w3cschool.cn/");
}
function jump4(){
window.open("https://www.csdn.net/");
}
css部分
css部分就根据自己想要的设置吧，因为是做一个放在页面上的小工具，所以没搞那些华丽的东西，HTML，CSS，JavaScript写在了一个页面上。
需要说的是，自己加了一个CSS3的动画效果，代码如下：
h1{
color: red;
font-size: 60px;
margin-bottom: 60px;
animation-name: xin;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes xin{
0% {color: #FF0000;}
20% {color:#FF99CC;}
40% {color:#FFFF66;}
60% {color:#FFCCCC;}
80% {color:#3399FF;}
100% {color:#33FF33;}
}
实现了标题的循环变色
附上源代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>凯哥秘籍</title>
<script>
function $(id){
return document.getElementById(id);
}
//第一部分
function dosou(){
$("Search1").name="wd"; //注意加引号
$("souso").action="http://www.baidu.com/s"; //坑souso
}
//第二部分
function dofan(){
if($("english").selected){
//相当于直接提交给搜索好的网站，不是很好
$("fanyi").action="https://fanyi.baidu.com/#en/zh/"+$("Search2").value;
/*测试一：失败，会出现url转义
$("Search2").value="#en/zh/"+$("Search2").value */
//测试二：失败,会出现url转义
/*var a="#en/zh"+$("Search2").value;
function URLencode(a)
{
return a.replace(/\%/g,"%25").replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
}
$("Search2").value=URLencode(a);*/
}
else if($("chinese").selected){
$("fanyi").action="https://fanyi.baidu.com/#zh/en/"+$("Search2").value;;
}
}
//第三部分
function jump1(){
window.open("https://www.w3school.com.cn/");
}
function jump2(){
window.open("https://www.runoob.com/");
}
function jump3(){
window.open("https://www.w3cschool.cn/");
}
function jump4(){
window.open("https://www.csdn.net/");
}
</script>
<style type="text/css">
body{
margin-top: 100px;
padding: 0;
text-align: center;
}
h1{
color: red;
font-size: 60px;
margin-bottom: 60px;
animation-name: xin;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.Search{
padding: 0;
margin: 0;
width: 350px;
height: 46px;
font-size: 20px;
vertical-align:middle;
}
option{
font-size: 20px;
color: rgba(0,200,255,0.8);
}
select{
width: 80px;
height: 50px;
vertical-align:middle;
font-size: 15px;
font-weight: bold;
color: rgba(220,50,255,1);
}
.lab{
color: blue;
font-size:40px;
font-weight: bold;
vertical-align:middle;
margin-right: 30px;
}
button{
margin: 0;
padding: 0;
border:0;
}
.button1{
width: 120px;
height: 80px;
margin-right: 30px;
background-color: #abc;
color: red;
font-size: 20px;
font-weight: bold;
border-radius:25px;
outline:none;
}
.button1:hover{
background-color:#66ccff;
}
.button2{
width: 120px;
height: 80px;
margin-right: 30px;
background-color: #abc;
color:green;
font-size: 20px;
font-weight: bold;
vertical-align:bottom;
border-radius:25px;
outline:none;
}
.button2:hover{
background-color:#66ccff;
}
.button3{
width: 120px;
height: 80px;
margin-right: 30px;
background-color: #abc;
color:orange;
font-size: 20px;
font-weight: bold;
vertical-align:bottom;
border-radius:25px;
outline:none;
}
.button3:hover{
background-color:#66ccff;
}
.button4{
width: 120px;
height: 80px;
background-color: #abc;
color:red;
font-size: 20px;
font-weight: bold;
vertical-align:bottom;
border-radius:25px;
outline:none;
}
.button4:hover{
background-color:#66ccff;
}
@keyframes xin{
0% {color: #FF0000;}
20% {color:#FF99CC;}
40% {color:#FFFF66;}
60% {color:#FFCCCC;}
80% {color:#3399FF;}
100% {color:#33FF33;}
}
</style>
</head>
<body>
<h1>凯哥 ???? 秘籍</h1>
<form action="" id="souso" target="_blank">
<div>
<label for="Search" class="lab">百度一下</label>
<input type="text" placeholder="---请输入要搜索内容---" id="Search1" name="" class="Search" >
<input type="submit" value="搜索" style="height: 50px;width: 80px;" onclick="dosou()">
</div>
</form>
<br/>
<br/>
<form action="" id="fanyi" target="_blank">
<div>
<label for="sel" class="lab">百度翻译</label>
<select id="sel">
<option id="english">英译汉</option>
<option id="chinese">汉译英</option>
</select>
<input type="text" placeholder="---请输入要翻译内容---" id="Search2" class="Search" name="aldtype">
<input type="submit" value="翻译" style="height: 50px;width: 80px;" onclick="dofan()">
</div>
</form>
<br/>
<br/>
<button class="button1" onclick="jump1()">转到W3school</button>
<button class="button2" onclick="jump2()">转到菜鸟教程</button>
<button class="button3" onclick="jump3()">转到编程狮</button>
<button class="button4" onclick="jump4()">转到CSDN</button>
</body>
</html>
哈哈，附上我给女朋友做的小工具效果图，是不是好看了很多
总结：
在学习JS和编程中，如果只是简单的学，而不动手做，那是很枯燥的，而且学习的效率几乎只有百分之三十
俗话说眼过千遍不如手过一边，当你把学到的知识用起来的时候，你就会发现撸代码的乐趣，就会有成就感，就会忘记时间。这样学到的东西才是自己的。古人云：知之者不如好之者，好之者不如乐之者。说的就是，让你撸代码作为自己的一种兴趣而不是只是单纯的掌握，当你作为一种兴趣的时候，你学到的东西就会在你的大脑里根深蒂固，永远就是你的。
再说一种自己对学习方法的理解：在撸代码的时候碰到一个bug，一般人或者是老师的建议可能是先放着，学到后边就会融汇贯通，而我不这样认为。我觉得要勇于挑战bug，bug正是自己不懂得地方，虽然说有时候调bug可能调一两天，但是在这一两天中，你不仅会有对这个bug的收获，也会学到很多其他的东西，如果说当时你跳过这个bug的话:第一点可能会遗忘这个bug，后期也没遇到。第二点就是会打击自己的兴趣，你就会越来越讨厌撸码。
所以，培养撸码兴趣才是关键。