Web前端-Chrome浏览器书签编程简略-做个加法

来源：互联网 2023-02-21 23:06:17 506

Web前端编程里头的学问真-)-很多呀，最近也很久没来百度经验分享了，

这次就分享个浏览器编程的小知识，学名bookmarklet，这个挺有趣的，

感兴趣的朋友可以详细了解下，这边就不赘述了，

1.本文就以一个四则运算做例子吧，就做个加法运算的吧，

要想扩充到加减乘除四则的运算，就需要各位大大慢慢完善啦;

2.具体的步骤其实都一样的，不过就是多写一些代码的啦O(∩_∩)O~;

3.然后用浏览器的书签作为载体来实现这个效果，感觉说不太明白，

就请各位读者大大，看看下方的步骤吧，这样更好明白一些：

3.1下面这三个图片是本文的概要内容，

赶时间的大大们可以稍微看看这个就明白这个是什么了(^o^)

Web前端-Chrome浏览器书签编程简略-做个加法

工具/原料

支持更改浏览器书签的浏览器、电脑

方法/步骤

目前个人使用的是GoogleChrome，所以这个讲解就放在这个里面啦；

话不多说，直接上菜：

首先就先打开浏览器，进不进入一个网页都是可以的，

1.这里为了好看，就进入百度首页吧，然后添加到收藏夹

2.看右上角，已经有了个'百度一下，你就知道'的收藏了

3.现在进行编辑，鼠标右键点击刚刚的那个收藏了的‘百度’，然后点击编辑

4.主要修改的就是名字和网址（网址是主要的，因为要写代码进去）

5.当然，名字随自己喜欢写，网址就是写代码的地方了

Web前端-Chrome浏览器书签编程简略-做个加法

如下图，我把网址删掉后，

就显示粉红色的背景了，这个是提示错误的意思，

1.然后写个javascript:

2.请注意，这一个单词是很重要的，分号也要是英文的，否则会报错

3.【javascript:】这个后面就是用来写脚本的代码的

Web前端-Chrome浏览器书签编程简略-做个加法

接上文：

1.为严谨起见，就直接写个自执行函数吧，如下

2.javascript:(function(){alert('这个里面是写代码的');})();

3.修改完名称和网址，点击保存后

4.鼠标左键点击下这个新书签，看看效果

Web前端-Chrome浏览器书签编程简略-做个加法

好了，现在来写个加法运算的代码吧：

1.刚刚写的这段就作为起步吧：

(function(){alert('这个里面是写代码的');})();

2.还是鼠标右键点击后选择修改，把网址改成下面的代码：

/*把它重构一下，先格式化吧：*/

javascript:(function(){

/*1.接收两个数据*/

var x=prompt('输入个加数');

var y=prompt('输入个被加数');

/*2.转换一下数据类型，变成数值型*/

var sum=Number(x) Number(y);

/*3.运算出结果吧*/

alert('加法运算，和=' sum);

})();

Web前端-Chrome浏览器书签编程简略-做个加法

接上文：

1.最后压缩一下，

javascript:(function(){ /*1.接收两个数据*/ var x=prompt('输入个加数'); var y=prompt('输入个被加数'); /*2.转换一下数据类型，变成数值型*/ var sum=Number(x) Number(y); /*3.运算出结果吧*/ alert('加法运算，和=' sum); })();

复制，粘贴到书签编辑网址的那里;

2.好了，点击保存后，鼠标左键再点击

3.随自己输入2个数据，运算一下看看结果

注：

好了，到这里就基本上完成了，

其他的运算也是一样的做法，记得要进行数值转换哦，

一般来说，接收的数据都是个字符串形式的，所以要转换下。

Web前端-Chrome浏览器书签编程简略-做个加法