javascript案例,专辑前6名

javascript案例,专辑前6名

看下面的截图和代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript案例,专辑前6名案例,雪豹软件工作室</title>
<link rel="stylesheet" type="text/css" href="top6.css"/>
<link rel="stylesheet" type="text/css" href="mark.css">
<link rel="stylesheet" type="text/css" href="body.css">
<style type="text/css">body {padding: 0;margin: 0;
}*{
/*不把边框，padding(内边距)计算进去*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}div {
opacity:1.0;
}</style>
<script type="text/javascript">//初始化(加载所有专辑图片)function initAllImg(){var divNode = document.getElementById("allImg");//获取专辑div层var imgSrc = "imgTop6" + "/"; //图片路径var imgSuffix = ".jpg"; //图片后缀for (var imgName = 1; imgName <= 25; imgName++) {//var imgNode = new Image(); //也可以使用new的方式创建图片元素对象var imgNode = document.createElement("IMG");//创建图片元素对象imgNode.src = imgSrc + imgName + imgSuffix;imgNode.title = "专辑" + imgName;imgNode.width = 320;imgNode.height = 200;imgNode.style.borderRadius = "12px";imgNode.className = "imgNormal";imgNode.onmouseout = imgOnmouseout;imgNode.onmouseover = imgOnmouseoverimgNode.onclick = imgOnclick_Top6;divNode.appendChild(imgNode);将图片添加到div层中/*//创建数字spanvar spanNode = document.createElement("span");spanNode.appendChild(document.createTextNode("周杰伦"));spanNode.className = "num";divNode.insertBefore(spanNode, imgNode);*/}}//鼠标从图片上移出时的效果function imgOnmouseout(){this.className = "imgNormal";//alert("鼠标从图片上移出时 = " + this);}//鼠标移入到图片上时的效果function imgOnmouseover(){this.className = "imgHover";}//将图片专辑加入到前6名的div层中function imgOnclick_Top6(){var top6DivNode = document.getElementById("top6");console.log("top6div层的高=" + getComputedStyle(top6DivNode, null).getPropertyValue("height"));var MyChilds = top6DivNode.childNodes;var childsCount = MyChilds.length;//获取前6名的div层中的子节点个数var count = 0; //已选择了的专辑的数量for (var index = 0; index < childsCount; index++) {
//          if (MyChilds[index].nodeName.toUpperCase() == "IMG") {
//              count++;
//          }if (MyChilds[index].nodeName.toUpperCase() == "DIV") {count++;}}if (count >= 6) {alert("对不起，您只能选择6张专辑！");return;}var finalStyle = this.currentStyle ? this.currentStyle: document.defaultView.getComputedStyle(this, null);var divNode = document.createElement("div");console.log(getComputedStyle(divNode, false)["opacity"]);divNode.style.opacity = "1.0";divNode.style.position = "relative";divNode.style.padding = "0px";divNode.style.display = "inline-block";divNode.style.margin = "20px";
//      divNode.style.width = finalStyle.getPropertyValue("width");
//      divNode.style.height = finalStyle.getPropertyValue("height");divNode.style.border = "none";divNode.style.backgroundColor = "transparent";divNode.style.width = "auto";divNode.style.height = "auto";console.log("看看宽高是否会带px=" + divNode.style.width);/*如下这样获取width和height得到的值不准确，因为受到鼠标移上去的影响，导致图片width和height比原来的width和height更小了(受到样式的影响，不把边框，padding(内边距)计算进去)*/console.log(this.className + " - " + this.src + " - 图片的宽=" + this.width+ " - 高=" + this.height + "-this=" + this);console.log("宽=" + finalStyle.getPropertyValue("width") + " /高="+ finalStyle.getPropertyValue("height"));divNode.appendChild(this);//将专辑图片移动到这个层中top6DivNode.appendChild(divNode);this.className = "imgNormal";this.style.margin = 0;//      this.style.padding = 0;//创建数字spanvar spanNode = document.createElement("span");spanNode.appendChild(document.createTextNode("NO" + (count + 1)+ "-new"));spanNode.className = "num";//        alert("this=" + this);divNode.insertBefore(spanNode, this);//创建醒目的span(醒目的显示免费2个字)var spanNode2 = document.createElement("span");spanNode2.appendChild(document.createTextNode("免费"));spanNode2.className = "striking";divNode.insertBefore(spanNode2, this);//创建醒目的span(醒目的显示免费2个字)var spanNode3 = document.createElement("span");spanNode3.appendChild(document.createTextNode("vip"));spanNode3.className = "vip";divNode.insertBefore(spanNode3, this);top6DivNode.style.height = "auto";this.onclick = imgRemoveTop6;}//把前6的专辑图片从top6这个层中移回到allImg层中function imgRemoveTop6() {var top6DivNode = document.getElementById("top6");var MyChilds = top6DivNode.childNodes;var childsCount = MyChilds.length;//获取前6名的div层中的子节点个数console.log("childsCount=" + childsCount);if (childsCount <= 1) {top6DivNode.style.height = "250px";}var divNode = document.getElementById("allImg");//获取专辑div层
//      this.parentNode.removeChild(this.previousSibling);//删除数字span节点this.parentNode.parentNode.removeChild(this.parentNode);
//      this.style.margin = "20px";console.log("style=" + this.getAttribute("style") + " / " + this.getAttributeNode("style"));
//      this.removeAttributeNode(this.getAttributeNode("style"));
//      this.removeAttribute("style");this.style.removeProperty("margin");divNode.appendChild(this);this.className = "imgNormal";//alert( "我是 = " + this);//如果在这里调用imgOnmouseout()函数，那么此时在imgOnmouseout()函数中的this就代表window对象//imgOnmouseout();this.onclick = imgOnclick_Top6;resetSpanNodText();}//把top6这个层中现有的图片的顺序重新排列一下function resetSpanNodText() {var number = 0;var top6DivNode = document.getElementById("top6");var MyChilds = top6DivNode.childNodes;var childsCount = MyChilds.length;//获取前6名的div层中的子节点个数for (var index = 0; index < childsCount; index++) {if (MyChilds[index].nodeName.toUpperCase() == "DIV") {number++;MyChilds[index].childNodes[0].innerHTML = "NO" + number + "-new";}
//          if (MyChilds[index].nodeName.toUpperCase() == "SPAN") {
//              number++;
//              MyChilds[index].innerHTML = "NO" + number + "-new";
//          }}}
</script></head>
<body  onload="initAllImg()">
<a href="http://www.baidu.com" target="_blank">
百度搜索(getComputedStyle获得外部的css样式，不知道能否删除外部的css样式中的属性?)
</a>
<a href="https://www.cnblogs.com/whchensir/p/5743521.html" target="_blank">
删除元素中的style中的单个属性(元素对象.style.removeProperty('style中的属性名');)
</a>
<a href="http://www.cnblogs.com/susufufu/p/5749922.html" target="_blank">
删除行内样式的style中的某个属性
</a>
<a href="https://blog.csdn.net/charlene0824/article/details/50532908" target="_blank">
元素对象.style.removeProperty('style中的属性名');
</a>
<a href="https://www.jb51.net/article/132341.htm" target="_blank">
移除style中的单个属性
</a>
<div id="caption" class="header" style="width: 100%;height: 150px;">
<h2 style="color: white;font-family: 楷体;">请您选出心目中的6佳专辑！(单击图片即可)</h2>
</div>
<br>
<div id="top6" style="height: 250px;position: relative;"></div><br>
<!-- <fieldset>  --><!--<legend>专辑列表:</legend>-->
<!--<font color="black" style="position: relative; top: -10px; left: 10px; background-color: White">
专辑列表:</font>-->
<!-- 在div控件的边框上写文字的效果，还不是很明白怎么实现这种效果，这里先放一放，有时间再研究吧，这几天还有其他一些事情要赶进度处理，有空再研究这个问题 -->
<span class="title" style="z-index: 2000;background-color: #CD0000;color: white;border-radius: 6px;">专辑列表</span>
<div id="allImg" class="album">
</div>
<!--</fieldset>-->
<div class="myTest1">div1</div>
<div class="myTest1">div2</div>
<div class="myTest1">div3</div>
<div class="myTest1">div4</div>
<input id="test1" value="一万年太久只争朝夕" type="text" alt="hello" size="66" height="300px" style="border-radius: 15px;width: 100%;height: 60px;background-color: #ea9393;border:5px solid #4B0082;font-size: 36px;">
<input type="button" onclick="testRemoveAttribute()" value="测试RemoveAttribute(删除style中的属性)">
<div id="myDiv1" style="width: 100%;background-color: #d4c4df;border: solid 5px #CD0000;">
<span id="span1">
<input style="margin: 20px;width: 900px;height: 50px;border: solid 5px #CD0000;font-size: 30px;border-radius: 12px;" type="text" id="text1" value="天若有情天亦老(点击我就会移动我的位置)" onclick="testMyself(this)">
</span>
</div>
<div id="myDiv2" style="width: 100%;border: solid 5px #0000AA;margin-top: 20px;background-color: #C5C1AA;">
</div><div style="background-color:#825ce6;width: 600px;height: 200px;border: solid 6px #CD0000;margin:30px;display: inline-block;color: white; font-size: 20px;vertical-align: top;font-weight: bold;">
测试margin是不是从元素的边框开始算的
</div>
<div style="background-color:#825ce6;width: 600px;height: 200px;border: solid 30px black;margin:30px;display: inline-block;color: white; font-size: 20px;vertical-align: top;font-weight: bold;">
测试margin是不是从元素的边框开始算的
</div>
<div style="width: 100%;height: auto;border:5px solid #551A8B!important;background-color:#EEEED1!important;padding: 20px;opacity:1.0;">
<p align="justify" style="color: #0000AA; font-size: 20px;">
北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇，引无数英雄竞折腰。
惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
一代天骄，成吉思汗，只识弯弓射大雕。
俱往矣，数风流人物，还看今朝。
独立寒秋，湘江北去，橘子洲头。
看万山红遍，层林尽染；
漫江碧透，百舸争流。
鹰击长空，鱼翔浅底，
万类霜天竞自由。
怅寥廓，问苍茫大地，谁主沉浮？
携来百侣曾游，
忆往昔峥嵘岁月稠。
恰同学少年，风华正茂；
书生意气，挥斥方遒。
指点江山，激扬文字，
粪土当年万户侯。
曾记否，到中流击水，浪遏飞舟！
</p>
</div>
</body>
<script type="text/javascript">function testRemoveAttribute(){var textNode = document.getElementById("test1");
//  textNode.removeAttributeNode("style");//报错，因为参数需要的是一个对象，所以不能传字符串
//  textNode.removeAttribute('style');
//  textNode.removeAttributeNode(textNode.getAttributeNode("style"));
//  var result = textNode.removeAttributeNode(textNode.getAttributeNode("style"));
//  console.log(result);
console.log(textNode.style);
console.log(textNode.getAttribute("style"));console.log(textNode.getAttributeNode("style"));
console.log(textNode.getAttribute("style"));
console.log(textNode.getAttributeNode("size"));
console.log(textNode.getAttribute("size"));
textNode.removeAttributeNode(textNode.getAttributeNode("alt"));textNode.removeAttribute("width");textNode.removeAttribute("height");
//  textNode.removeAttribute("size");textNode.removeAttribute(textNode.getAttributeNode("size"));textNode.style.removeProperty("width");
}function testMyself(obj){if (!document.getElementById("span1")) {return;}
//  obj.parentNode.parentNode.removeChild(obj.parentNode);
//  document.getElementById("myDiv2").appendChild(obj);//     document.getElementById("myDiv2").appendChild(obj);document.getElementById("myDiv2").appendChild(document.getElementById("text1"));document.getElementById("myDiv1").removeChild(document.getElementById("span1"));
//  document.getElementById("myDiv2").appendChild(document.getElementById("text1"));
//  document.getElementById("myDiv2").appendChild(obj);
}</script>
</html>

javascript案例,专辑前6名相关推荐

使用tableau超市案例创建前N名销售额最高的产品
以下直接导入超市原数据先创建分层结构,将订单中的类别.子类别.产品名称创建分层,如下图所示: 按住crtl选择这三个维度,右击选择"创建分层结构",输入分层结构名称,建好后,调整 ...
TensorFlow和ML前5名的课程
摘要:想学机器学习,没有这些资源怎么能行?(TFboy修炼记) 如果你对人工智能.数据科学和机器学习感到好奇,那么我相信你已经听说过Google的机器学习API --TensorFlow,他们已经用它 ...
医保病历审核服务平台丨陀螺研究院×FISCO BCOS案例专辑
区块链,一种由多方共同维护.分布式储存的记账技术,可通过信任机制的重构拓宽协作关系的纵深度,在推动产业变革.创建数字经济等方面有着关键作用.目前,在全球范围内,已有多个国家政府表明将积极发力区块链领域 ...
2014年中国开源软件前100名
不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多的开源软件,而且还有很多软件被国外的认可.中国是 ...
TIOBE 7 月编程语言榜：TypeScript 进入前 50 名
开发四年只会写业务代码,分布式高并发都不会还做程序员? TIOBE 7 月编程语言指数排行榜已经公布了,本月主角还是 TypeScript. 先看一下前 20 名: 前几名地位依旧稳固,其中 C ...
java 常见错误_Java常见错误的十大列表（前100名！）
java 常见错误前10名名单非常受欢迎,有趣且内容丰富. 但是有很多! 如何选择合适的? 这是一个元前10名列表,可帮助您找到前10名的前10名列表. 在更令人讨厌的笔记上: SELECT TOP ...
常见Java错误的十大列表（前100名！）
前10名名单非常受欢迎,有趣且内容丰富. 但是有很多! 如何选择合适的? 这是一个元前10名列表,可帮助您找到前10名的前10名列表. 在更令人讨厌的笔记上: SELECT TOP 10 mistak ...
2022年CSDN粉丝总数前100名博主
2022CSDN拥有粉丝总数前100名,看看你有在榜单上吗? 提示:统计数据可能存在一定程度的误差无法避免,仅供参考. 人数和博客专家和会员数据统计拥有粉丝人数范围人数博客专家会员 -∞~50 ...
js总计_Excel总计前3名加上其他的总计
js总计 In a pivot table, you can use the built-in Top 10 command, to show the Top 10 or Bottom 3, or a ...
医保基金稽查案件管理系统丨陀螺研究院×FISCO BCOS案例专辑
区块链,一种由多方共同维护.分布式储存的记账技术,可通过信任机制的重构拓宽协作关系的纵深度,在推动产业变革.创建数字经济等方面有着关键作用.目前,在全球范围内,已有多个国家政府表明将积极发力区块链领域 ...

javascript案例,专辑前6名

javascript案例,专辑前6名相关推荐

最新文章

热门文章