6.12心得

Posted 2020-09-22

第三方插件
Internet Explorer 具有在浏览器窗口内呈现若干种不同文件类型的功能。例如，
Internet Explorer 能够在浏览器窗口内呈现 Microsoft Word 文档文件，而无需用户
打开 Word 应用程序本身。第三方也可以使用此功能向 Internet Explorer 提供插件，
以便 Internet Explorer 能够识别文件类型并在浏览器窗口内进行显示。
默认情况下，Internet Explorer 安装对 Macromedia Flash 文件的支持。
所谓第三方软件指的是该非线性编辑系统生产商以外的软件公司提供的软件。这些
软件大都不能直接与非线性卡挂靠，进行输入/输出，但可以对已进入了硬盘阵列的
视音频素材进行加工处理和编辑，或者制作自己的二维和三维图像再与那些视频素材
合成，合成后的作品再由输入/输出软件输出。这些软件的品种非常丰富，功能十分强
大，有些甚至是从工作站转移过来的，可以这么说，非线性编辑系统之所以能做到效
果变幻莫测，匪夷所思，吸引众人的视线，完全取决于第三方软件。
网友定义第三方软件：第一方就是你自已，第二方就是你要解决的问题即你的对象，用
另外的软件去处理你的对象就是用第三方面的软件。第三方软件是针对某种软件在应用功能上
的不足或者漏洞，而由非软件编制方的其他组织或个人开发的相关软件。

visibility与opacity的区别
{ display: none; /* 不占据空间，无法点击 */ }
{ visibility: hidden; /* 占据空间，无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }
{ position: relative; top: -999em; /* 占据空间，无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }
{
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
}
{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占据空间，无法点击 */
}
opacity是CSS3的属性，visibility比较早，长江后浪推前浪，前浪淹死在海上，天地玄黄，宇宙荒唐。

购物车怎么做
<script>
/**
* Created by an www.jq22.com
*/
window.onload = function () {
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (cls) {
var ret = [];
var els = document.getElementsByTagName(‘*‘);
for (var i = 0, len = els.length; i < len; i++) {

if (els[i].className.indexOf(cls + ‘ ‘) >=0 || els[i].className.indexOf(‘ ‘ + cls + ‘ ‘) >=0 || els[i].className.indexOf(‘ ‘ + cls) >=0) {
ret.push(els[i]);
}
}
return ret;
}
}

var table = document.getElementById(‘cartTable‘); // 购物车表格
var selectInputs = document.getElementsByClassName(‘check‘); // 所有勾选框
var checkAllInputs = document.getElementsByClassName(‘check-all‘) // 全选框
var tr = table.children[1].rows; //行
var selectedTotal = document.getElementById(‘selectedTotal‘); //已选商品数目容器
var priceTotal = document.getElementById(‘priceTotal‘); //总计
var deleteAll = document.getElementById(‘deleteAll‘); // 删除全部按钮
var selectedViewList = document.getElementById(‘selectedViewList‘); //浮层已选商品列表容器
var selected = document.getElementById(‘selected‘); //已选商品
var foot = document.getElementById(‘foot‘);

// 更新总数和总价格，已选浮层
function getTotal() {
var seleted = 0;
var price = 0;
var htmlstr = ‘‘;
for (var i = 0, len = tr.length; i < len; i++) {
if (tr[i].getElementsByTagName(‘input‘)[0].checked) {
tr[i].className = ‘on‘;
seleted += parseInt(tr[i].getElementsByTagName(‘input‘)[1].value);
price += parseFloat(tr[i].cells[4].innerHTML);
HTMLstr += ‘<div><img src="‘ + tr[i].getElementsByTagName(‘img‘)[0].src + ‘"><span class="del" index="‘ + i + ‘">取消选择</span></div>‘
}
else {
tr[i].className = ‘‘;
}
}
selectedTotal.innerHTML = seleted;
priceTotal.innerHTML = price.toFixed(2);
selectedViewList.innerHTML = HTMLstr;

if (seleted == 0) {
foot.className = ‘foot‘;
}
}
// 计算单行价格
function getSubtotal(tr) {
var cells = tr.cells;
var price = cells[2]; //单价
var subtotal = cells[4]; //小计td
var countInput = tr.getElementsByTagName(‘input‘)[1]; //数目input
var span = tr.getElementsByTagName(‘span‘)[1]; //-号
//写入HTML
subtotal.innerHTML = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);
//如果数目只有一个，把-号去掉
if (countInput.value == 1) {
span.innerHTML = ‘‘;
}else{
span.innerHTML = ‘-‘;
}
}

// 点击选择框
for(var i = 0; i < selectInputs.length; i++ ){
selectInputs[i].onclick = function () {
if (this.className.indexOf(‘check-all‘) >= 0) { //如果是全选，则吧所有的选择框选中
for (var j = 0; j < selectInputs.length; j++) {
selectInputs[j].checked = this.checked;
}
}
if (!this.checked) { //只要有一个未勾选，则取消全选框的选中状态
for (var i = 0; i < checkAllInputs.length; i++) {
checkAllInputs[i].checked = false;
}
}
getTotal();//选完更新总计
}
}

// 显示已选商品弹层
selected.onclick = function () {
if (selectedTotal.innerHTML != 0) {
foot.className = (foot.className == ‘foot‘ ? ‘foot show‘ : ‘foot‘);
}
}

//已选商品弹层中的取消选择按钮
selectedViewList.onclick = function (e) {
var e = e || window.event;
var el = e.srcElement;
if (el.className==‘del‘) {
var input = tr[el.getAttribute(‘index‘)].getElementsByTagName(‘input‘)[0]
input.checked = false;
input.onclick();
}
}

//为每行元素添加事件
for (var i = 0; i < tr.length; i++) {
//将点击事件绑定到tr元素
tr[i].onclick = function (e) {
var e = e || window.event;
var el = e.target || e.srcElement; //通过事件对象的target属性获取触发元素
var cls = el.className; //触发元素的class
var countInout = this.getElementsByTagName(‘input‘)[1]; // 数目input
var value = parseInt(countInout.value); //数目
//通过判断触发元素的class确定用户点击了哪个元素
switch (cls) {
case ‘add‘: //点击了加号
countInout.value = value + 1;
getSubtotal(this);
break;
case ‘reduce‘: //点击了减号
if (value > 1) {
countInout.value = value - 1;
getSubtotal(this);
}
break;
case ‘delete‘: //点击了删除
var conf = confirm(‘确定删除此商品吗？‘);
if (conf) {
this.parentNode.removeChild(this);
}
break;
}
getTotal();
}
// 给数目输入框绑定keyup事件
tr[i].getElementsByTagName(‘input‘)[1].onkeyup = function () {
var val = parseInt(this.value);
if (isNaN(val) || val <= 0) {
val = 1;
}
if (this.value != val) {
this.value = val;
}
getSubtotal(this.parentNode.parentNode); //更新小计
getTotal(); //更新总数
}
}
// 点击全部删除
deleteAll.onclick = function () {
if (selectedTotal.innerHTML != 0) {
var con = confirm(‘确定删除所选商品吗？‘); //弹出确认框
if (con) {
for (var i = 0; i < tr.length; i++) {
// 如果被选中，就删除相应的行
if (tr[i].getElementsByTagName(‘input‘)[0].checked) {
tr[i].parentNode.removeChild(tr[i]); // 删除相应节点
i--; //回退下标位置
}
}
}
} else {
alert(‘请选择商品！‘);
}
getTotal(); //更新总数
}
console.log("\u767e\u5ea6\u641c\u7d22\u3010\u7d20\u6750\u5bb6\
u56ed\u3011\u4e0b\u8f7d\u66f4\u591aJS\u7279\u6548\u4ee3\u7801");
// 默认全选
checkAllInputs[0].checked = true;
checkAllInputs[0].onclick();
}
</script>

css三是什么
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表
技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加
精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面
的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版
本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是
太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也
被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模
块 、背景和边框 、文字特效 、多栏布局等。
CSS3被拆分为"模块"。[6]
旧规范已拆分成小块，还增加了新的。
一些最重要CSS3模块如下：
选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

滑入滑出方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享</title>
</head>
<style type="text/css">
body{padding:0;margin:0;}
#n_content{width:200px;height:200px;background:red;opacity:0.3;filter:Alpha(opacity=30);}

</style>
<body>
<div id="n_content"></div>
<script type="text/javascript">
window.onload = function(){
var odiv = document.getElementById("n_content");
odiv.onmouseover = function(){
startMove(100);
}
odiv.onmouseout = function(){
startMove(30);
}
var timer = null;
var alpha = 30;
function startMove(iTarget){
var odiv = document.getElementById("n_content");
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(alpha>iTarget){
speed = -10;
}else{
speed = 10;
}
if(alpha==iTarget){
clearInterval(timer);
}else{
alpha+=speed;
odiv.style.filter = ‘alpha(opacity=‘+ alpha +‘)‘;
odiv.style.opacity= alpha/100;
}

},30);
};

}
</script>
</body>
</html>