整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
avaScript基础教程二进制位运算
JavaScript中的位运算是针对二进制数据提供的运算与操作。在JavaScript标准中规定了二进制位运算时其操作数长度为32位，其最高位为符号位，因此能够表示的有效数字位数为31位。本节主要介绍JavaScript中的二进制位的运算。
与其他程序设计语言类似，JavaScript所提供的二进制位运算主要包括AND（按位与运算）、OR（按位或运算）、XOR（按位异或运算）及左移、右移等相关操作。各类型操作描述如下表所示：
JavaScript二进制位操作符
位运算基本操作如描述如上表所示，此处需要注意问题是不要将二进制位运算与逻辑运算的And（与）、OR（或）、NOT（非）概念记混。由于JavaScript使用32位进行数值的二进制计算，因此在进行位操作时首先需要将10进制数值转换为二进制，然后按照二进制位操作要求进行位的操作。与运算、或运算、异或运算较为简单，只需要明确概念即可完成运算，我们将对非运算、左移、右移三个运算进行说明。
1、非运算
从定义可知非运算主要通过反转操作数完成计算，程序在具体执行非运算时按照以下步骤执行，以正数9为例对其进行非运算过程进行说明。
① 10进制转为32位二进制原码，符号位为0（正数）。如下表所示：
原码
② 将原码安位进行取反，结果如下：
按位取反获取反码
③ 此时我们得到是在内存中保存的形式（补码），需要将其转化为原码形式。从符号位可知反码为负数，因此需要按照补码转原码规则除符号位之外取反加1可获取对应原码。
计算结果
对于二进制非运算我们说明如上所示，因此9的非运算结果为-10，同理可以计算一个负数的非运算结果。作为负数时首先需要将其原码转为内存表示的补码，即除符号位之外其他位取反加一。在进行按位非运算，并将计算结果转换为原码。其过程描述如下图所示。
负数的按位与运算
计算结果可知最高位为1，即正数。正数的补码与原码相同，顾可知最终计算结果为8。即~（-9）=8；
2、左移、右移问题
按照位的左移与右移只需要注意按照规则要求左右移动指定位数，左移需要在右侧补充0，以保证位数，右移需要舍弃左侧对应的位数等。举例描述9<<2位操作过程示意如下（为方便演示我们以8位为例进行说明）：
左移操作
左移操作描述如上图所示，可知9<<2 的结果为36。
以上给出JavaScript程序设计语言中二进制位操作，并重点对按位取反操作及左移、右移操作进行了说明。本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。更多程序设计相关教程及实例分享，期待大家关注与阅读！系列教程链接如下：
JavaScript基础教程（三）64位浮点数加法运算
JavaScript基础教程（二）变量、常量与运算符
JavaScript基础教程（一）课程说明
在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。
（1）浏览器支持
到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。
使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。
transform：rotate（45deg）；
使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。
transform：scale（0.5）；//缩小一半
（1）可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率
transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。
使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。
（1）只使用一个参数，省略另一个参数
这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。
transform：skew（30deg）；
使用translate方法来移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。
transform：translate（50px，50px）；// 水平方向上移动50px，垂直方向上移动50px
（1）只使用一个参数，省略另一个参数
这种情况下视为只在水平方向上移动，垂直方向上不移动。
transform：translate（50px）；
transform：translate（150px，200px） rotate（45deg） scale（1.5）；
在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。
使用该属性，可以改变变形的基准点。
transform：rotate（45deg）；
transform-origin：left bottom；//把基准点修改为元素的左下角
（1）指定属性值
基准点在元素水平方向上的位置：left、center、right
基准点在元素垂直方向上的位置：top、center、bottom
（1）旋转
分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。
transform：rotateX（45deg）；
transform：rotateY（45deg）；
transform：rotateZ（45deg）；
transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）；
transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；
（2）缩放
分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放，在参数中指定缩放倍率。
transform：scaleX（0.5）；
transform：scaleY（1）；
transform：scaleZ（2）；
transform：scaleX（0.5）scaleY（1）；
transform：scale（0.5） rotateY（45deg）；
（3）倾斜
分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜（无skewZ方法），在参数中指定倾斜的角度
transform：skewX（45deg）；
transform：skewY（45deg）；
（4）移动
分别使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动，在参数中加入移动距离。
transform：translateX（50px）;
transform：translateY（50px）;
transform：translateZ（50px）;
每种变形方法的背后都存在着一个对应的矩阵。
（1）计算2D变形（3 X 3矩阵）
可以将这个2D变形矩阵书写为matrim（a,b,c,d,e,f）,a~f均代表一个数字，用于决定怎样执行变形处理。
（2）平移的2D矩阵
//效果一致：右移150px，下移150px
transform：matrix（1，0,0,1，150，150）；
transform：translate（150px，150px）；
（3）计算3D变形
3D缩放变形使用的4X4矩阵
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
//效果一致：X轴方向上缩小五分之一，Y轴方向上缩小一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);
（4）可通过矩阵执行多重变形处理
将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。
s实现左右框互移
需求：如上图所示，左框和右框中分别有值。当点选左框中一个或多个值后，再点击中间向右箭头按钮，则选中值会从左框中消失并在右框中出现；同理点选右框值，也能移动到左侧。
思路：1、左右框分别使用select标签，框内值为option标签（便于取值），且设置multiple支持多选。
2、当点击箭头按钮时运行js函数goright（），获取所有左侧已选中option值，并在右框末尾填加，然后清除左框选中值。
实现代码：
<html>
<head></head>
<scripttype="text/javascript">
function goright(j){
var test2=document.test2;
if(j>0){
varleft=test2.list.options;
varright=test2.fly.options;
}else{
varleft=test2.fly.options;
varright=test2.list.options;
}
for(var i=0;i< left.length;i++){
if(left[i].selected){
new_option= newOption(left[i].text,left[i].value);
right[right.length]=new_option;
left[i]=null;
}
}
}
</script>
<body>
<form name="test2">
<tr>
<divstyle="float:left;">
<select size="10"name="list" multiple style="width:300px;">
<optionvalue="http://www.baidu.com">百度
<optionvalue="http://sina.cn">新浪
<option value="3">360
<option value="4">开心网
<option value="5">校内网
<option value="6">58同城
<option value="7">赶集
<option value="8">财富
</select>
</div>
<div style="float:left;">
<h2style="font-size:25px;position:reletive;margin-top:50px;background:#ccc;"onclick="goright(1);">--></h2>
<h2style="font-size:25px;position:reletive;top:30px;background:#ccc;"onclick="goright(-1);"><--</h2>
</div>
<div style="float:left;">
<selectsize="10" name="fly" multiplestyle="width:300px;">
</select>
</div>
</tr>
</body>
</html>
问题总结：
1，通过给goright()传值1和-1来判断是左移还是右移实现了简单通用，但是同一页面有更多表单则不能实现。
2，选择多项移动会发现只有半数值实现了移动，说明代码存在bug.
分析：
1，为了实现更加的通用性，需要传送三个值，表单名称，左框名称，右框名称。但是传参为字符串，而取值为dom，所以要用到eval();
2,在上面的例子出现bug,是因为首先获取选取数量，然后根据下标依次移动，但是移动一次后总数量发生了变化，相对下标也发生了变化。第二次移动下标为1的值其实是移动的第三个选取值。因此for循环由i++改为i--;采用倒序移动。
改动代码如下：
functiongoright(f,i,j){
var left=eval(f+"."+i);
var right=eval(f+"."+j);
var text='';
for( var k=left.options.length-1;k>=0;k--){
if(left.options[k].selected){
new_option=new Option(left.options[k].text,left.options[k].value);
right.options[right.options.length]=new_option;
left.options[k]=null;
}
}
}
需求2：双击左框内值，则会移动到右侧；同理双击右框内值则会移动到左侧；
思路：在select标签内加入ondblclick="goright()”;双击执行goright()函数。
改动代码：
<select size="10" name="list" multiplestyle="width:300px;"ondblclick="goright('test2','list','fly');">
。。。。。
<select size="10" name="fly" multiplestyle="width:300px;"ondblclick="goright('test2','fly','list');">
拓展需求：使用鼠标左键拖动实现多选，本人在网上找了很多，一直没有实现。日后找到方法再贴出。
*请认真填写需求信息，我们会在24小时内与您取得联系。
