js appendChild 添加节点没有效果

想试下js里 appendChild()添加节点,结果没有反应,不知道问题处在哪里,火狐IE都没有效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>演示</title>
</head>

<script type="text/javascript">

    var node=document.createElement("li"); //创建一个li节点

    var textnode=document.createTextNode("Water"); //创建一个文本节点内容

    node.appendChild(textnode); //将文本节点内容,添加到li节点里面

    document.getElementById("test").appendChild(node); //将li节点,添加到test几点下面

</script>
<body>
    <ul id="test"><li>Coffee</li><li>Tea</li></ul>
</body>
</html> 

4个回答

html执行代码是按顺序执行的,js代码在body前,所以js执行时,body还没有。这样的话添加元素是无法完成的。
解决办法:

法一:
将js代码放在

     <ul id="test"><li>Coffee</li><li>Tea</li></ul>
    <script type="text/javascript">

        var node = document.createElement("li"); //创建一个li节点

        var textnode = document.createTextNode("Water"); //创建一个文本节点内容

        node.appendChild(textnode); //将文本节点内容,添加到li节点里面

        document.getElementById("test").appendChild(node); //将li节点,添加到test几点下面

</script>

将js代码放在window.onload = function(){}中。
这样才会在DOM树加载好之后,开始执行函数中的内容。

Willerfu
路边有个胖子 谢谢 ,明白了
接近 4 年之前 回复

html执行代码是按顺序执行的,js代码在body前,所以js执行时,body还没有。这样的话添加元素是无法完成的。
解决办法
法一:
将js代码放在body后面

法二:
给body加一个onload事件,将js代码放在该事件处理函数中即可。

Willerfu
路边有个胖子 谢谢
接近 4 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js 新添加的节点 实现拖拽?
HTML部分: id 是phonebox的div JS部分: window.onload=function(){ //点击鼠标即可添加 节点 phonebox.onmousedown=function addDom(event){ var event = event || window.event; downx=event.offsetX; downy=event.offsetY; var newDiv=document.createElement("div"); //添加新的节点div newDiv.id="newdiv"; newDiv.style.left=downx; newDiv.style.top=downy; x=event.target; //判断鼠标不在子节点上时候才执行添加节点的操作 if(x.id=='phonebox'){ phonebox.appendChild(newDiv); } } //拖拽节点 $(function(){ $('#newdiv').draggable(); }); } 疑问:拖拽这里用了 EasyUI 里的draggable(),这个位置现在这样写没法拖拽,(纯新手)请问题正确应该怎么写?谢谢!
js 中createElement添加节点时只能添加一次,代码如下
![图片说明](https://img-ask.csdn.net/upload/201504/16/1429145804_517521.jpg) <body> <div id="one"> </div> </body> <script> var divs=document.getElementById("one") var pl=document.createElement('span') divs.onclick=function aa(){ divs.appendChild(pl) }
js创建节点鼠标点击调用为何只显示一次
首先代码是基本从课本抄下来的,,应该没有问题。但是我用鼠标点击,添加的 文本一闪而过就没了。想问下是因为什么,这个部分的代码如下 ``` function foe() { var elew=document.createElement("p"); var tex=document.createTextNode("你好,世界!"); elew.appendChild(tex); document.forms[0].appendChild(elew); } </script> </head> <body > <form action="" name="form2"> <button onclick="foe();">点击调用DOM</button> </form> ``` 2另外请教一下朋友们,平时写前端代码的时候,有什么好工具能发现代码错误 吗?现在我用sublime,写错了一个小点,有时候要检查好久才发现。。。
如何动态更新下拉框里的内容?
小弟初学ext个问题想请教各位大虾。 假设我有两个表一个是计划表,一个是计划类型表。添加计划信息的时候,肯定有个下拉框是计划类型吧,里面存的就是计划类型表里的数据。 如果我先进计划表,那么计划js加载后,计划类型里的数据已经取出来了。然后我去计划类型表里面添加一条数据,然后我再回到计划页面添加计划,此时的下拉框取的仍然是原来的计划类型数据。 我现在的办法是动态加载js,就是每进入一个页面重新加载一下js,这样js就会重新查询一下数据库. 我是先判断当前计划js是否存在,如果不存在加载,如果存在删除原来的计划js,重新加载这个js。但是如果这么改了的话现在只是删除了js的标签,至于上次导入的js内容已经存在ie缓存中,会引发其他的问题。我的代码如下: 如果没有这个js: s=document.createElement("script"); s.type="text/javascript"; s.id = 'NEWJS'; s.src=url; //获取head结点,并将<script>插入到其中 var head=document.getElementsByTagName("head")[0]; head.appendChild(s); 如果有这个JS: var newJs = document.getElementById('NEWJS'); newJs.parentNode.removeChild(newJs);
一个简单的Javascript问题
这是一段实现添加或删除列表项的代码,我想问为什么点击“删除”时,如果是新添加的项就只需要点一次,而原本存在的项(也就是其中的"A1"、"A2"、"A3"项)就必须点两次呢?此外,当myUL中已经没有子节点了,再点"删除"按钮却没有执行else里的内容(也就是alert命令),这是为啥?? 求解惑!~ ``` <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Javascript</title> <script type="text/javascript"> function insert() { var newLi = document.createElement("li"); var text = document.createTextNode(document.getElementById("input1").value); newLi.appendChild(text); var temp = document.getElementById("myUL"); temp.appendChild(newLi); } function dele() { var t = document.getElementById("myUL"); if (t.hasChildNodes) { t.removeChild(t.lastChild); } else { alert("已经没有可删除项!"); } } </script> </head> <body> <div style="width:300px; height:300px; overflow:auto;"> <ul id="myUL"> <li>A1</li> <li>A2</li> <li>A3</li> </ul> </div> 添加新的内容:<input id="input1" type="text" /> <input type="button" value="添加新项" onclick="insert()" /> <input type="button" value="删除项目" onclick="dele()" /> </body> </html> ```
添加<form>标签后,按钮就失效了,这是什么情况?
代码的作用是动态生成文本框 先把全部代码贴出来: ``` <%@ page import = "java.util.*" import = "java.sql.ResultSet" language="java" contentType="text/html; charset=UTF-8" pageEncoding="GB18030" %> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title> javascript 动态创建 input 文本框</title> <script type= "text/javascript" > function CreateGInput(){ var a = document.getElementById("id_string").value; Createtext('工序号:'+a); // document.getElementById('CreateCInput').style.visibility='visible'; var input = document.createElement("input" ); //创建一个节点 //设置该节点的内容 input.type = "text" ; input.id = a ; input.name = "GinputId"+a+1; input.value = "GinputId="+a+1; //设置该节点的内容 document.getElementById("id_string").value++; var element = document.getElementById("showText");//找到一个已有节点 element.appendChild(input); //将新建节点添加 document.getElementById(a).setAttribute("onclick","select('this')"); // CreateCButton(); document.getElementById("id_string1").value=2; document.getElementById("CreateCInput").style.visibility="visible"; } function CreateCInput(){ var a = document.getElementById("id_string").value-1; var b = document.getElementById("id_string1").value; // document.getElementById('CreateCInput').style.visibility='visible'; var input = document.createElement("input" ); //创建一个节点 //设置该节点的内容 input.type = "text" ; input.id = a ; input.name = "GinputId"+a+b; input.value = "GinputId"+a+b; var b = document.getElementById("id_string1").value++; //设置该节点的内容 var element = document.getElementById("showText");//找到一个已有节点 element.appendChild(input); //将新建节点添加 input.setAttribute("onclick","select('this')"); } function Createtext(string){ var para=document.createElement("p"); var node=document.createTextNode(string); para.appendChild(node); var element=document.getElementById("showText"); element.appendChild(para); } function CreateCButton(){ var input = document.createElement("input" ); //创建一个节点 var a = document.getElementById("id_string").value-1; //设置该节点的内容 input.type = "button" ; input.id = "CbuttonId"+a ; input.name = "CbuttonId"+a; input.value = "继续添加零件"; //设置该节点的内容 var element = document.getElementById("showText");//找到一个已有节点 element.appendChild(input); //将新建节 input.setAttribute("onclick", "CreateCInput();"); } </script> <% String string = "Hello World !"; int a=1; %> </head> <body onload="document.getElementById('CreateCInput').style.visibility='hidden'"> <input type="text" value="请输入产品名" name="name" onclick="select(this)" id="name" > <div id= "showText" ></div> <input type= "button" onclick= "CreateGInput()" value= "创建新工序" id="CreateGInput"/> <input type= "button" onclick= "CreateCInput()" value= "添加工序零件" id="CreateCInput"/> <input type = "hidden" id="id_string" value="1"> <input type = "hidden" id="id_string1" value="1"> <p>点击<input type = "submit" value="确定">完成对产品的添加</p> </body> </html> ``` 这个代码正常运行,能动态添加文本框,并且给每个文本框赋值不同的id。 如下图: ![图片说明](https://img-ask.csdn.net/upload/201609/22/1474517364_186332.png) //// 关键是在"body"内添加"form"标签后后按钮创建工序就失效了, // ``` ...... <body onload="document.getElementById('CreateCInput').style.visibility='hidden'"> <form> <input type="text" value="请输入产品名" name="name" onclick="select(this)" id="name" > ............ .......... ...... <p>点击<input type = "submit" value="确定">完成对产品的添加</p> </form> </body> ........ ``` 如下图: ![图片说明](https://img-ask.csdn.net/upload/201609/22/1474517430_874576.png) 点击按钮无效了。 这是为什么呢?
各位大神们,谁知道怎样通过three.js导入外部3d模型,然后可以拖动模型,并且模型的一部分不能被单独拖动,这个问题困扰我很多天,现在还是没办法解决,求助各位大神了,万分感谢!
各位大神们,我现在可以导入3d模型,并且这个模型可以拖动,但是一部分模型被单独拖动,其他模型不动,代码如下: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽控件</title> <style> body { margin: 0; overflow: hidden; } #label { position: absolute; padding: 10px; background: rgba(255, 255, 255, 0.6); line-height: 1; border-radius: 5px; } </style> <script src="js/three.js"></script> <script src="js/jquery-1.9.1.js"></script> <script src="js/Detector.js"></script> <script src="js/TrackballControls.js"></script> <script src="js/dat.gui.min.js"></script> <script src="js/stats.min.js"></script> <script src="js/OBJLoader.js"></script> <script src="js/FBXLoader.js"></script> <script src="js/inflate.min.js"></script> <!--拖拽控件--> <script src="js/DragControls.js"></script> <!--可视化平移控件--> <script src="js/TransformControls.js"></script> </head> <body> <div id="WebGL-output"></div> <div id="Stats-output"></div> <div id="label"></div> <script> var objects=[]; var stats = initStats(); var scene, camera, renderer, controls, light, selectObject; // 场景 function initScene() { scene = new THREE.Scene(); } // 相机 function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(0, 400, 600); camera.lookAt(new THREE.Vector3(0, 0, 0)); } // 渲染器 function initRenderer() { if (Detector.webgl) { renderer = new THREE.WebGLRenderer({antialias: true}); } else { renderer = new THREE.CanvasRenderer(); } renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x050505); document.body.appendChild(renderer.domElement); } // 初始化模型 function initContent() { var helper = new THREE.GridHelper(1800, 50, 0x4A4A4A); helper.setColors(0x9370DB); scene.add(helper); var loader = new THREE.OBJLoader(); loader.load( "moder/obj/windmill.obj", function ( group ) { group.position.x=400; group.scale.set(20, 20, 20);//模型放大20倍 //group.scale.color(0x3CB37 group.name="groups" scene.add( group ); objects.push(group); } ); var loader = new THREE.OBJLoader(); loader.load( "moder/obj/low.obj", function ( group ) { group.position.x=-400; group.scale.set(20, 20, 20);//模型放大20倍 //group.scale.color(0x3CB37 group.name="groupss"; scene.add( group ); objects.push(group); } ); var loader = new THREE.FBXLoader(); //Samba Dancing idle_2 loader.load( 'moder/fbx/pipeline.fbx', function ( object ) { //console.log(object); object.scale.set(1,1,1); scene.add( object ); objects.push(object); mixers=object.mixer = new THREE.AnimationMixer( object ); var action = object.mixer.clipAction( object.animations[0]); action.play(); object.traverse( function ( child ) { if ( child.isMesh ) { child.castShadow = true; child.receiveShadow = true; } } ); console.log(object); } ); /*var cubeGeometry = new THREE.BoxGeometry(100, 100, 100); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x9370DB}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = -600; cube.position.y = 50; cube.name = "cubes"; scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(50, 50, 50, 50); var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x3CB371}); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.x = 200; sphere.position.y = 50; sphere.name = "sphere"; // sphere.position.z = 200; scene.add(sphere); var cylinderGeometry = new THREE.CylinderGeometry(50, 50, 100, 100); var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xCD7054}); var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial); cylinder.position.x = -200; cylinder.position.y = 50; cylinder.name = "cylinder"; scene.add(cylinder);*/ } console.log(objects); // 鼠标双击触发的方法 function onMouseDblclick(event) { // 获取 raycaster 和所有模型相交的数组,其中的元素按照距离排序,越近的越靠前 var intersects = getIntersects(event); // 获取选中最近的 Mesh 对象 if (intersects.length != 0 && intersects[0].object ) { selectObject = intersects[0].object.parent; changeMaterial(selectObject); console.log(changeMaterial); } else { alert("未选中 Mesh!"); } } // 获取与射线相交的对象数组 function getIntersects(event) { event.preventDefault(); console.log("event.clientX:" + event.clientX) console.log("event.clientY:" + event.clientY) // 声明 raycaster 和 mouse 变量 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置 raycaster.setFromCamera(mouse, camera); // 获取与射线相交的对象数组,其中的元素按照距离排序,越近的越靠前 var intersects = raycaster.intersectObjects(scene.children); var intersects=intersects.parent; console.log(intersects); //返回选中的对象 return intersects; } // 窗口变动触发的方法 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // 键盘按下触发的方法 function onKeyDown(event) { switch (event.keyCode) { case 13: initCamera(); initControls(); break; } } // 改变对象材质属性 function changeMaterial(object) { var material = new THREE.MeshLambertMaterial({ color: 0xffffff * Math.random(), transparent: object.material.transparent ? false : true, opacity: 0.8, }); object.material = material; } // 初始化轨迹球控件 function initControls() { controls = new THREE.TrackballControls(camera, renderer.domElement); // controls.noRotate = true; controls.noPan = true; // 视角最小距离 controls.minDistance = 1000; // 视角最远距离 controls.maxDistance = 5000; } // 添加拖拽控件 function initDragControls() { // 添加平移控件 var transformControls = new THREE.TransformControls(camera, renderer.domElement); scene.add(transformControls); // 过滤不是 Mesh 的物体,例如辅助网格 //var objects = []; /*for (let i = 0; i < scene.children.length; i++) { if (scene.children[i].isMesh) { objects.push(scene.children[i]); } //objects.push(object[i].parent); }*/ // 初始化拖拽控件 var dragControls = new THREE.DragControls(objects, camera, renderer.domElement); // 鼠标略过事件 dragControls.addEventListener('hoveron', function (event) { // 让变换控件对象和选中的对象绑定 transformControls.attach(event.object); }); // 开始拖拽 dragControls.addEventListener('dragstart', function (event) { controls.enabled = false; }); // 拖拽结束 dragControls.addEventListener('dragend', function (event) { controls.enabled = true; }); console.log(objects.length); } // 初始化灯光 function initLight() { light = new THREE.SpotLight(0xffffff); light.position.set(-300, 600, -400); light.castShadow = true; scene.add(light); scene.add(new THREE.AmbientLight(0x5C5C5C)); } // 初始化 dat.GUI function initGui() { // 保存需要修改相关数据的对象 gui = new function () { } // 属性添加到控件 var guiControls = new dat.GUI(); } // 初始化性能插件 function initStats() { var stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); return stats; } // 更新div的位置 function renderDiv(object) { // 获取窗口的一半高度和宽度 let halfWidth = window.innerWidth / 2; let halfHeight = window.innerHeight / 2; // 逆转相机求出二维坐标 let vector = object.position.clone().project(camera); // 修改 div 的位置 $("#label").css({ left: vector.x * halfWidth + halfWidth, top: -vector.y * halfHeight + halfHeight - object.position.y }); // 显示模型信息 //$("#label").text("name:" + object.name); } // 更新控件 function update() { stats.update(); controls.update(); controls.handleResize(); //transformControls.update(); } // 初始化 function init() { initScene(); initCamera(); initRenderer(); initContent(); initLight(); initControls(); initGui(); initDragControls(); // addEventListener('dblclick', onMouseDblclick, false); addEventListener('resize', onWindowResize, false); addEventListener('keydown', onKeyDown, false); } function animate() { if (selectObject != undefined && selectObject != null) { renderDiv(selectObject); } requestAnimationFrame(animate); renderer.render(scene, camera); update(); } init(); animate(); </script> </body> </html> ``` 一部分模型被单独拖动的效果如下: ![图片说明](https://img-ask.csdn.net/upload/201911/04/1572863955_100421.png) 然后我再修改当鼠标略过事件: ![图片说明](https://img-ask.csdn.net/upload/201911/04/1572864098_336978.png) 整个模型可以一起被拖动,但是模型混乱:效果图如下: ![图片说明](https://img-ask.csdn.net/upload/201911/05/1572916540_633061.png) 希望路过的好心人帮帮忙,万分感谢!!!!!!
看题 js问题
<body> <center> <br><br> 添加用户:<br><br> 姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp; email: <input type="text" name="email" id="email" />&nbsp;&nbsp; 爱好: <input type="text" name="love" id="love" />   电话: <input type="text" name="tel" id="tel" /><br><br> <button id="addUser">提交</button> <br><br> <hr> <br><br> <table id="usertable" border="1" cellpadding="5" cellspacing=0> <tbody> <tr> <th>姓名</th> <th>email</th> <th>爱好</th> <th>电话</th> <th>操作</th> </tr> <tr> <td>凤姐</td> <td>fengjie@qq.com</td> <td>吃饭</td> <td>5000</td> <td><a href="deleteEmp?id=Tom" >Delete</a></td> </tr> <tr> <td>刘林</td> <td>liulin@sohu.com</td> <td>吃饭</td> <td>8000</td> <td><a href="deleteEmp?id=Jerry" >Delete</a></td> </tr> </tbody> </table> </center> </body> <script > window.onload = function(){ document.getElementById("addUser").onclick = function(){ //获取姓名、email、电话的值 绑定标签(根据id) var name = document.getElementById("name").value; var email = document.getElementById("email").value; var love=document.getElementById("love").value; var tel = document.getElementById("tel").value; //动态生成td 名字 var tdName = document.createElement("td"); var tdNameText = document.createTextNode(name); tdName.appendChild(tdNameText); //动态生成td 游戏 var tdEmail = document.createElement("td"); var tdEmailText = document.createTextNode(email); tdEmail.appendChild(tdEmailText); //动态生成td 爱好 var tdLove = document.createElement("td"); var tdLoveText = document.createTextNode(love); tdLove.appendChild(tdLoveText); //动态生成td 电话 var tdTel = document.createElement("td"); var tdTelText = document.createTextNode(tel); tdTel.appendChild(tdTelText); //-------------------------------------------------- var tdDelete = document.createElement("td"); var aE = document.createElement("a"); aE.setAttribute("href","deleteEmp?id="+name); var aEText = document.createTextNode("Delete"); aE.appendChild(aEText); tdDelete.appendChild(aE); //--------------------------------------------------- //创建tr,将4个创建完成的td对象放置到tr中 //生成动态的tr var tr = document.createElement("tr"); tr.appendChild(tdName); tr.appendChild(tdEmail); tr.appendChild(tdLove); tr.appendChild(tdTel); tr.appendChild(tdDelete); //-------------------------------------------------------------- var tbody = document.getElementsByTagName("tbody"); tbody[0].appendChild(tr); //当点击Delete,执行删除对应的行 aE.onclick = function(){ return deleteTr(this); } } //删除对应行的方法 function deleteTr(aE){ var name = aE.parentNode.parentNode.firstChild.firstChild.nodeValue; var flag = window.confirm("您确定要删除【"+name+"】吗?"); if(flag){ //查找父节点(tbody) var tbody = aE.parentNode.parentNode.parentNode;//这个是3 //查找子节点(tr) var tr = aE.parentNode.parentNode;//这个是2 //删除tr tbody.removeChild(tr);//删除孩子节点 } return false; } } </script>
ASP 如何获取在运行时由用户添加的表格行中单元格控件中的值?
![图片说明](https://img-ask.csdn.net/upload/201511/29/1448779835_794913.jpg) 如图中,用户点击添加或移除按钮后,即可增加或删除一行。增加的新行就是当前最后一行的克隆行。(这部分代码JS都已实现)。而“提交申请”就是将当前表格中的所有内容提交保存到数据库。**而我要问的是,由JS克隆新增加的行中各个单元格里控件的值如何获取提交?** 附:表格增加行或删除行的JS代码如下: function addRow() { var oTr = document.getElementById("purchase").rows[10]; var newTr = oTr.cloneNode(true); document.getElementById("purchase").getElementsByTagName("tbody")[0].appendChild(newTr); newTr.cells[0].firstChild.value = newTr.rowIndex; alert(document.getElementById("purchase").rows[11].cells[0].firstChild.value); } function delRow() { // tableObject.deleteRow(index) var totrows = document.getElementById('purchase').rows.length if (totrows<=11) { alert("您只能删除由本人添加的表格行!"); return false } document.getElementById('purchase').deleteRow(totrows-1); }
JS鼠标事件不能用,求大神帮助!!
点击div前,li的鼠标事件可以用,点击div后,li的鼠标事件不能用了,怎么回事?? /*---jsp---*/ &lt;div id='div'>点击&lt;/div> &lt;ul id='list'> &lt;li>1&lt;li> &lt;li>2&lt;li> &lt;li>3&lt;li> &lt;li>4&lt;li> &lt;li>5&lt;li> &lt;/ul > /*---js---*/ $(function(){ $("#list li").mouseover(function(){ /*鼠标事件*/ }); $("#div").click(function(){ $("#list li").remove();//清除所有li var ul = document.getElementById("list");//获取ul节点 var li = document.createElement("li");//创建li li.innerHTML="55"; ul.appendChild(li);//把创建的li添加到ul }); });
使用js动态增加删除表单元素
<div class="quote_title">javaeye 写道</div><div class="quote_div">     这几天我一直在做数据采集工作,又一次发现我同事在展示我的数据的时候,使用了一些动态增加表单元素。我发现这很好玩,所以我也试着找了些资料和加上自己的整理,整出了以下一张网页。可以动态的增加和删除表单元素,但是有些不足,不能删除上次添加的,若删除后,在添加就不能在删除的位置上添加,还有我只在IE下测试通过。这个我不知道怎么做,主要是没有时间去研究,如果有哪位告诉可以留言留言。让俺也学习下。O(∩_∩)O <br /></div> <br /> <br /><pre name="code" class="js">&lt;html&gt; &lt;head&gt; &lt;title&gt;动态添加表单元素 &lt;/title&gt; &lt;/head&gt; &lt;script language="javascript"&gt; function AddElement(mytype){ var TemO=document.getElementById("add"); var newInput = document.createElement("input"); newInput.type=mytype; newInput.id="input1"; TemO.appendChild(newInput); var newline= document.createElement("br"); TemO.appendChild(newline); } function delElement(mytype){ var TemO=document.getElementById("add"); var newInput = document.getElementById("input1"); TemO.removeChild(newInput); var newline= document.getElementById("br"); TemO.removeChild(newline); } &lt;/script&gt; &lt;body&gt; &lt;input name="" type="button" value="新建文本框"&gt; &lt;input name="" type="button" value="新建复选框"&gt; &lt;input name="" type="button" value="新建单选框"&gt; &lt;input name="" type="button" value="新建文件域"&gt; &lt;input name="" type="button" value="新建密码框"&gt; &lt;input name="" type="button" value="新建提交按钮"&gt; &lt;input name="" type="button" value="新建恢复按钮"&gt; &lt;input name="" type="button" value="删除恢复按钮"&gt; <br /> &lt;form name="frm" method="get" action=""&gt; <div id="add"> &lt;input name="textfield" type="text"&gt; <br /> </div> &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </pre>
请教JS兼容性问题
这文件在IE下可以运行,在FF下不能,JS不兼容,那位有空的请帮我改下,谢谢 [code="java"]<html> <head> <title>JS内嵌表格</title> <script type="text/javascript"> var gseq=1; var gLastDetailImgObj=null; //显示详细信息 function showDetailNumTable(){ var innerTR = "<table border=\"1\" align='center' width='100%'><tr style=\"background:gray;\"><td>inner11</td><td>inner12</td><td>inner13</td><td>inner14</td><td>inner15</td></tr><tr><td>inner21</td><td>inner22</td><td>inner23</td><td>inner24</td><td>inner25</td></tr><tr><td>inner31</td><td>inner32</td><td>inner33</td><td>inner34</td><td>inner35</td></tr><tr><td>inner41</td><td>inner42</td><td>inner43</td><td>inner44</td><td>inner45</td></tr></table>"; var imgObj=event.srcElement; var tr=getOuterObj(imgObj,'TR'); // 得到tr对象 var newDivId=null; if(!tr.newDivId){ var newTr=document.createElement("<TR></TR>"); // 创建tr var newTd=document.createElement("<TD COLSPAN='"+tr.children.length+"' bgcolor='#F2F09F'></TD>"); // 创建td newDivId='detaildiv'+(gseq++); // 每一行内嵌的divID,每一行的ID都不同 var newDiv=document.createElement("<div id='"+newDivId+"'></div>"); // 创建div newTr.appendChild(newTd); // tr中添加td newTd.appendChild(document.createTextNode("各地区情况对比如下: ")); newDiv.innerHTML = innerTR; // 必须通过innerHTML方式添加内容,通过字符串拼进去的现实不出内容 newTd.appendChild(newDiv); // td中添加div tr.parentNode.insertBefore(newTr,tr.nextSibling); // 必须通过tr的父节点才能用insertBefore,表示插入某个元素,这里表示在tr下个元素的前面(tr的后面)插入一行 tr.newDivId=newDivId; // 把新生成的div的ID赋给DIV } switchVisible(imgObj); // 控制展开还是合上内嵌表格 if(gLastDetailImgObj!=imgObj){ switchVisible(gLastDetailImgObj); gLastDetailImgObj=imgObj; } else{ gLastDetailImgObj=null; } } function switchVisible(imgObj){ if(!imgObj) return; // 如果imgObj对象为空,则返回 var tr=getOuterObj(imgObj,'TR'); var pvisible=('true'!=tr.currentVisibility); tr.currentVisibility=(pvisible?'true':'false'); // pvisible为真时,tr.currentVisibility为true;pvisible为假时,tr.currentVisibility为false; tr.nextSibling.style.display=(pvisible? '':'none'); // pvisible为真时,tr.nextSibling.style.display为'';pvisible为假时,tr.nextSibling.style.display为none; } //取得对象外围符合指定标签的第一个对象 function getOuterObj(obj,tagName){ while(obj!=null){ if(obj.tagName==tagName) return obj; obj=obj.parentNode; } return null; } </script> </head> <body> <table border="1" align="center" width="80%"> <thead> <tr style="background:GRAY;"> <th>姓名</th><th>年龄</th><th>电话</th><th>性别</th><th>住址</th> </tr> </thead> <tbody> <tr> <td>1</td><td id = "no1"><a href="#" onclick="showDetailNumTable('no1');">11111111</a></td><td>1</td><td>1</td><td>1</td> </tr> <tr> <td>2</td><td id = "no2"><a href="#" onclick="showDetailNumTable('no2');">22222222</a></td><td>2</td><td>2</td><td>2</td> </tr> <tr> <td>3</td><td id = "no3"><a href="#" onclick="showDetailNumTable('no3');">33333333</a></td><td>3</td><td>3</td><td>3</td> </tr> <tr> <td>4</td><td id = "no4"><a href="#" onclick="showDetailNumTable('no4');">44444444</a></td><td>4</td><td>4</td><td>4</td> </tr> </tbody> </table> </body> </html> 将上面的代码保存为html格式后就能看到效果 [/code]
小白求救!各位大神麻烦帮我看看这个select显示的内容为什么不变化
``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //这个方法是点击年份下拉框后显示1900至今的所有年份 function GetYear() { var yearNode = document.getElementById("year"); //要调用Date的方法,就必须创建其对象,不能直接用类名调用 var date = new Date(); //这里获取的是从1900年到现在的经过的年数 var year = date.getFullYear(); //alert(time);//测试代码 //要对之前的数据进行删除,否则会累加,不能对i进行变化,否则会无法全部删除 //在删除之前要先获取yearNode的子节点个数 var children = yearNode.childNodes; //这里之前出错了,因为忘记加上.length了 for (var i = 2; i < children.length;) { //alert(children.length); yearNode.removeChild(children[i]); } //yearNode.length = 1; //这里是将各个年份作为option添加进代表年份的select下拉框中 for (var i = 1900; i <= year; i ++) { var option = document.createElement("option"); option.innerHTML = i; //option.value = i; yearNode.appendChild(option); } } //这个方法是年份下拉框的内容发生变化时会运行的内容 function ChooseTime() { /*var yearNode = document.getElementById("year"); //要调用Date的方法,就必须创建其对象,不能直接用类名调用 var date = new Date(); //这里获取的是从1900年到现在的经过的年数 var year = date.getFullYear(); //alert(time);//测试代码 yearNode.length = 1; //这里是将各个年份作为option添加进代表年份的select下拉框中 for (var i = 1900; i <= year; i ++) { var option = document.createElement("option"); option.innerHTML = i; yearNode.appendChild(option); }*/ //月份 var monthNode = document.getElementById("month"); monthNode.length = 1; for (var i = 1; i <= 12; i ++) { var option = document.createElement("option"); option.innerHTML = i; option.value = i; monthNode.appendChild(option); } //日期 var dateNode = document.getElementById("date"); dateNode.length = 1; if(monthNode.value == 1|| monthNode.value == 3|| monthNode.value == 5|| monthNode.value == 7|| monthNode.value == 8|| monthNode.value == 10|| monthNode.value == 12) { for (var i = 1; i <= 31; i ++) { var option = document.createElement("option"); option.innerHTML = i; dateNode.appendChild(option); } } else if (monthNode.value == 4|| monthNode.value == 6|| monthNode.value == 9|| monthNode.value == 11) { for (var i = 1; i <= 30; i ++) { var option = document.createElement("option"); option.innerHTML = i; dateNode.appendChild(option); } } else if(monthNode.value == 2&& yearNode.value%4 == 0) { for (var i = 1; i <= 29; i ++) { var option = document.createElement("option"); option.innerHTML = i; dateNode.appendChild(option); } } else if(monthNode.value == 2&& yearNode.value%4 != 0) { for (var i = 1; i <= 28; i ++) { var option = document.createElement("option"); option.innerHTML = i; dateNode.appendChild(option); } } } </script> </head> <body> <select id="year" onclick="GetYear()" onchange="ChooseTime()"> <option>请选择</option> </select>年 <select id="month" onchange="ChooseTime()"> <option>请选择</option> </select>月 <select id="date"> <option>请选择</option> </select>日 </body> </html> ``` 情况就是这么个情况,option倒是添加进去了,而且onchange也触发了,但是年份那个框显示的内容就是不变化,不知道问题出在哪了,小白求各位大神解救。
程序没有报错,但是为什么就是不对呢?(注释的不用管)
``` <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> --> <!-- <script type="text/javascript" src="./jquery.js"></script> --> <script type="text/javascript" src="./index.js"></script> <title></title> <style type="text/css"> *{padding: 0;margin:0;} #main{ position: relative; } .box{ padding: 15px 0 0 15px; float:left; } .pic{ padding: 10px; boxrder:1px solid #ccc; pic-shadow: 0 0 6px #ccc; boxrder-radius: 5px; } .pic img{ width:162px; height:auto; } </style> <!-- <link rel="stylesheet" type="text/css" href="./css3.css"> --> </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="./javascript/images/1.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/2.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/3.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/4.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/5.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/6.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/7.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/8.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/9.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/10.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/11.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/12.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/13.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/14.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/15.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/16.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/17.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/18.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/19.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/20.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="./javascript/images/21.jpg"/> </div> </div> </div> </boxdy> </html> // window.onload=function(){ waterfall('main','box'); // var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; // window.onscroll=function(){ // if(checkScrollSlide){ // //加载后台数据 // var oParent = document.getElementById('main');// 父级对象 // for(var i=0;i<dataInt.data.length;i++){ // var oPin=document.createElement('div'); //添加 元素节点 // oPin.className='box'; //添加 类名 name属性 // oParent.appendChild(oPin); //添加 子节点 // var oBox=document.createElement('div'); // oBox.className='pic'; // oPin.appendChild(oBox); // var oImg=document.createElement('img'); // oImg.src='./images/'+dataInt.data[i].src; // oBox.appendChild(oImg); // } // waterfall('main','pin'); // } // } } function waterfall(parent,box){ //取到所有box var oParent=document.getElementById(parent); var oBoxs=getClass(oParent,box); //计算列数 var oBoxW=oBoxs[0].offsetWidth; var cols=Math.floor(document.documentElement.clientWidth/oBoxW); //设置main宽 oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto'; var hArr=[]; for(var i=0;i<oBoxs.length;i++){ if(i<cols){ hArr.push(oBoxs[i].offsetHeight); }else{ var minH=Math.min.apply(null,hArr); var index=getminIndex(hArr,minH); oBoxs[i].style.postion='absolute'; oBoxs[i].style.top=minH+'px'; oBoxs[i].style.left=oBoxs[index].offsetLeft+'px'; hArr[index]+=oBoxs[i].offsetHeight; } } } function getClass(parent,className){ var boxArr=[];//存储所有box oElements=parent.getElementsByTagName('*'); for(var i=0;i<oElements.length;i++){ if (oElements[i].className==className) { boxArr.push(oElements[i]); } } return boxArr; } function getminIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } } //检测是否具备滚动加载数据块条件 // function checkScrollSlide(){ // var oParent=document.getElementById('main'); // var oBoxs=getClass(oParent,'box'); // var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2); // var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;(怪异模式/标准模式) // var height=document.body.clientHeight || document.documentElement.clientHeight; // return(lastBoxH<scrollTop+height)?true:false; // } ```
Ext简单树在浏览器中的显示效果不好?
<h3> </h3> <div class="t_msgfont" id="message5488">一个简单的树,在IE和火狐里显示的效果感觉都不好,不知道为什么,<br />树的节点前总是有一,两个方格,而且"+" 和 "-" 的效果也和大家的不一样<br /><br />请有这方面经验的朋友帮帮忙!谢谢。。<br />图:<br />不好看的:<br /><img src="http://p12.freep.cn/p.aspx?u=v20_p12_p_0811011446368128_0.jpg" alt="" /><br /><br /><br />标准的应该是这样的:<br /><img src="http://p11.freep.cn/p.aspx?u=v20_p11_p_0811011448152184_0.jpg" height="82" alt="" width="119" /><br />代码:<br /><br />&lt;html&gt;<br />  &lt;head&gt;<br />    &lt;title&gt;static-tree.html&lt;/title&gt;<br />        <br />    &lt;meta http-equiv="keywords" c=""&gt;<br />    &lt;meta http-equiv="description" c=""&gt;<br />    &lt;meta http-equiv="content-type" c=""&gt;<br />    <br />    &lt;link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"&gt;<br />        &lt;script type="text/javascript" src="Js/ExtJs/ext-base.js"&gt;&lt;/script&gt;<br />        &lt;script type="text/javascript" src="Js/ExtJs/ext-all.js"&gt;&lt;/script&gt;<br />        &lt;script type="text/javascript" src="Js/ExtJs/ext-lang-zh_CN.js"&gt;&lt;/script&gt;<br />        &lt;style type="text/css"&gt;<br />        &lt;/style&gt;<br />        &lt;script type="text/javascript"&gt;<br />                Ext.onReady(function(){<br />                        var mytree = new Ext.tree.TreePanel({<br />                                el:"container",<br />                                title:"ExtJs静态树",<br />                                <br />                                autoScroll:true,<br />                                animate:true,<br />                            //默认根目录不显示<br />                            rootVisible:false,<br />                            border:false,<br />                            animate:true,<br />                            lines:true,<br />                            enableDD:true,<br />                            containerScroll:true<br />                        });<br />                        <br />                        //根节点<br />                        var root = new Ext.tree.TreeNode({<br />                                id:"root",<br />                                text:"控制面板",<br />                                expanded:true<br />                        });<br />                        <br />                        //第一个子节点和其子节点<br />                        var sub1 = new Ext.tree.TreeNode({<br />                                id:"sub1",<br />                                text:"新闻管理",<br />                                singleClickExpand:true<br />                        });<br />                        <br />                        sub1.appendChild(new Ext.tree.TreeNode({<br />                                id:"addNews",<br />                                text:"添加新闻",<br />                                href:"http://www.baidu.com",<br />                                hrefTarget:"mainframe",<br />                                qtip:"打开百度",<br />                                listeners:{<br />                                        "click":function(node,e){<br />                                                alert(node.text);<br />                                        }<br />                                }<br />                        }));<br />                        <br />                        sub1.appendChild(new Ext.tree.TreeNode({<br />                                id:"editNews",<br />                                text:"修改新闻"<br />                        }));<br />                        <br />                        sub1.appendChild(new Ext.tree.TreeNode({<br />                                id:"delNews",<br />                                text:"删除新闻"<br />                        }));<br />                        <br />                        root.appendChild(sub1);<br />                        root.appendChild(new Ext.tree.TreeNode({<br />                                id:"sys",<br />                                text:"系统设置"<br />                        }));<br />                        <br />                        mytree.setRootNode(root);<br />                        mytree.render();<br />                });<br />        &lt;/script&gt;<br />  &lt;/head&gt;<br />  <br />  &lt;body&gt;<br />          <div id="container"><br />  &lt;/body&gt;<br />&lt;/html&gt; </div></div>
js中的时间联动,麻烦大家看一下,谢谢了
``` function showTime(){ //获取年份 //先获取年下拉框对象 var yearNode = document.getElementById("years"); //yearNode.options.length=0; //获取子节点 var children = yearNode.childNodes; for(var i=0;i<children.length;){ yearNode.removeChild(children[i]); } for(var i=1990;i<=2016;i++){ //创建option节点 var optionYearNode = document.createElement("option"); //把年的值给新创建的标签中 optionYearNode[i] = i; //设置属性 optionYearNode.innerHTML = optionYearNode[i]; //往年下拉框添加年份 yearNode.appendChild(optionYearNode); } } //用了清空以后下拉列表就动不了了,这是怎么回事啊 var children = yearNode.childNodes; for(var i=0;i<children.length;){ yearNode.removeChild(children[i]); } <select>里面有两个事件 一个是:onload、onchange ```
ext js 在ff下不报错, 在ie下报错,求解!着ji!
用vs 2010调试,错误为: 行: 58 错误: 'this.el.dom' 为空或不是对象 跟了下。发现在ext-all.js里面, 这行代码有问题: “B=this.el.dom.parentNode;” ext js 版本为 2.2 为什么会有这个问题呢。如何解决啊! 由于代码太长,所以只选择了核心的帖出来。 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif'; var treeLoader = new Ext.tree.TreeLoader({ id : treeLoader, preloadChildren:true, dataUrl : 's873J.do?operate=payRootNoteList', baseParams : {'beginDate': beginDate, 'endDate' : endDate, 'group': group, 'isValid' : isValid, 'startQuery':startQuery}, //baseParams : {beginDate:Ext.getCmp("beginDate").getValue();, endDate:Ext.getCmp("endDate").getValue();}, //dataUrl : 'tree-data-manager.json', uiProviders:{ 'col': Ext.ux.ColumnTreeCheckNodeUI } }); var root = new Ext.tree.AsyncTreeNode(); var tree = new Ext.tree.ColumnTree({ el:'tree-ct', autoWidth:true, autoHeight:true, rootVisible:false, autoScroll:true, expandable:false, enableDD:true, checkModel:'cascade',//级联多选,如果不需要checkbox,该属性去掉 onlyLeafCheckable: false,//所有节点可选 title: '佣金支付申请', tbar : [text_beginDate_label, beginDate_company,text_endDate_label,endDate_company, text_isValid_label, combox_isValid_company, btn_search_company,btn_commpay_company], //text_group_label,contenttreecombo, columns:[{ header:'代理商编码', width:150, dataIndex:'group_id' },{ header:'代理商名称', width:200, dataIndex:'group_name' },{ header:'佣金类型编码', width:100, dataIndex:'blnc_code' },{ header:'佣金类型名称', width:200, dataIndex:'blnc_name' },{ header:'佣金政策编码', width:100, dataIndex:'communit_code' },{ header:'佣金政策名称', width:150, dataIndex:'communit_name' },{ header:'账务月份', width:100, dataIndex:'balmonth' },{ header:'佣金金额', width:100, dataIndex:'commvalue' }], loader: treeLoader, root: root }); tree.render(); //tree.expandAll(); //添加树上节点的单击事件 tree.on("click", function(node, event) { if(node.leaf == true) { // window.alert(node); // window.alert(node.id); // window.alert(node.attributes.depth); // window.alert(node.getDepth()); // note.appendChild({id: 'aaa', group_id: 'dfdf', group_name: 'fsfsdfsd' , blnc_code: 'sewrwerwe', communit_code: '34234', communit_name:'13131',balmonth,'311',commvalue,'1313', uiProvider: 'col' }); } else { } }); //添加树上节点加载事件 tree.on("beforeload", function(treeLoader, node) { //判断如果是加载节点,哪么就判断是否有根节点 return ; }, this); }); ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ <%@ page language="java" pageEncoding="utf-8"%> <html> <head> <title>佣金支付审批</title> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/ext/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/ext/resources/editable-column-tree.css" /> <script type="text/javascript" src="<%=request.getContextPath()%>/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/ext/ext-all.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/ext/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/ext/ColumnTree.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/ext/ComboxTree.js"></script> <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/ext/DateField.js"></script> --> <script type="text/javascript" src="<%=request.getContextPath()%>/ext/commpay-column-tree.js"></script> </head> <body> <table border="0" width="100%" height="100%"> <tr> <td align="center" valign="top" width="100%" height="100%" "> <div id="tree-ct" style="text-align:left"></div> </td> </tr> </table> </body> </html> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 代码逐句检查了下。发现是tree.render(); 有问题,不知道何解!
小白求救!各位大神麻烦帮我看下这个select显示的内容为什么不变化
经过各位大神的指点,我对代码进行了修改,解决了月份和日期的显示问题。但是现在还有一个毛病没想明白,就是年份那一框不管选择哪一年,显示的都是请选择,我鼠标都戳爆了也没用,就像图上这样。![图片说明](https://img-ask.csdn.net/upload/201905/17/1558076623_363745.png)抓瞎中。。。跪求各位大神不吝赐教。(附上修改后的代码) ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //这个方法是点击年份下拉框后显示1900至今的所有年份 function GetYear() { var yearNode = document.getElementById("year"); //要调用Date的方法,就必须创建其对象,不能直接用类名调用 var date = new Date(); //这里获取的是从1900年到现在的经过的年数 var year = date.getFullYear(); //alert(time);//测试代码 //要对之前的数据进行删除,否则会累加,不能对i进行变化,否则会无法全部删除 //在删除之前要先获取yearNode的子节点个数 var children = yearNode.childNodes; //这里之前出错了,因为忘记加上.length了 for (var i = 2; i < children.length;) { //alert(children.length); yearNode.removeChild(children[i]); } //yearNode.length = 1; //这里是将各个年份作为option添加进代表年份的select下拉框中 for (var i = 1900; i <= year; i ++) { var option = document.createElement("option"); option.innerHTML = i; //option.value = i; yearNode.appendChild(option); } } //这个方法是年份下拉框的内容发生变化时会运行的内容 function ChooseYear() { //月份 var monthNode = document.getElementById("month"); monthNode.length = 1; for (var i = 1; i <= 12; i ++) { var option = document.createElement("option"); option.innerHTML = i; option.value = i; monthNode.appendChild(option); } } function ChooseMonth() { var yearNode = document.getElementById("year"); var monthNode = document.getElementById("month"); //日期 var dateNode = document.getElementById("date"); dateNode.length = 1; if(monthNode.value == 1|| monthNode.value == 3|| monthNode.value == 5|| monthNode.value == 7|| monthNode.value == 8|| monthNode.value == 10|| monthNode.value == 12) { for (var i = 1; i <= 31; i ++) { var option = document.createElement("option"); option.innerHTML = i; dateNode.appendChild(option); } } else if (monthNode.value == 4|| monthNode.value == 6|| monthNode.value == 9|| monthNode.value == 11) { for (var i = 1; i <= 30; i ++) { var option = document.createElement("option"); option.innerHTML = i; dateNode.appendChild(option); } } else if(monthNode.value == 2&& yearNode.value%4 == 0) { for (var i = 1; i <= 29; i ++) { var option = document.createElement("option"); option.innerHTML = i; dateNode.appendChild(option); } } else if(monthNode.value == 2&& yearNode.value%4 != 0) { for (var i = 1; i <= 28; i ++) { var option = document.createElement("option"); option.innerHTML = i; dateNode.appendChild(option); } } } </script> </head> <body> <select id="year" onclick="GetYear()" onchange="ChooseYear()"> <option>请选择</option> </select>年 <select id="month" onchange="ChooseMonth()"> <option>请选择</option> </select>月 <select id="date"> <option>请选择</option> </select>日 </body> </html> ```
关于JSP中链接跳转的问题
我用javascript写了一个图片动态转换的效果,然后点击图片会跳入相应链接,如下javascript代码是我从其他项目代码移植过来的,结果我发现当点击进入链接页面的时候会从新打开一个新的页面,可是我想把初始的页面转换成新的页面,谁懂下列代码并且知道如何设置的,求指教! var isIE = (document.all) ? true : false; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var Each = function(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; //ie only var RevealTrans = Class.create(); RevealTrans.prototype = { initialize: function(container, options) { this._img = document.createElement("img"); this._a = document.createElement("a"); this._timer = null;//计时器 this.Index = 0;//显示索引 this._onIndex = -1;//当前索引 this.SetOptions(options); this.Auto = !!this.options.Auto; this.Pause = Math.abs(this.options.Pause); this.Duration = Math.abs(this.options.Duration); this.Transition = parseInt(this.options.Transition); this.List = this.options.List; this.onShow = this.options.onShow; //初始化显示区域 this._img.style.visibility = "hidden";//第一次变换时不显示红x图 this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0; this._img.onmouseover = Bind(this, this.Stop); this._img.onmouseout = Bind(this, this.Start); isIE && (this._img.style.filter = "revealTrans()"); this._a.target = "_blank"; $(container).appendChild(this._a).appendChild(this._img); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Auto: true,//是否自动切换 Pause: 1000,//停顿时间(微妙) Duration: 1,//变换持续时间(秒) Transition: 7,//变换效果(23为随机) List: [],//数据集合,如果这里不设置可以用Add方法添加 onShow: function(){}//变换时执行 }; Extend(this.options, options || {}); }, Start: function() { clearTimeout(this._timer); //如果没有数据就返回 if(!this.List.length) return; //修正Index if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; } //如果当前索引不是显示索引就设置显示 if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); } //如果要自动切换 if(this.Auto){ this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause); } }, //显示 Show: function(list) { if(isIE){ //设置变换参数 with(this._img.filters.revealTrans){ Transition = this.Transition; Duration = this.Duration; apply(); play(); } } this._img.style.visibility = ""; //设置图片属性 this._img.src = list.img; this._img.alt = list.text; //设置链接 !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href"); //附加函数 this.onShow(); }, //添加变换对象 Add: function(sIimg, sText, sUrl) { this.List.push({ img: sIimg, text: sText, url: sUrl }); }, //停止 Stop: function() { clearTimeout(this._timer); } };
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私...
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小人工智障。 思路可以运用在不同地方,主要介绍的是思路。
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
阿里面试官问我:如何设计秒杀系统?我的回答让他比起大拇指
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图和个人联系方式,欢迎Star和指教 前言 Redis在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸,打败了...
C语言魔塔游戏
很早就很想写这个,今天终于写完了。 游戏截图: 编译环境: VS2017 游戏需要一些图片,如果有想要的或者对游戏有什么看法的可以加我的QQ 2985486630 讨论,如果暂时没有回应,可以在博客下方留言,到时候我会看到。 下面我来介绍一下游戏的主要功能和实现方式 首先是玩家的定义,使用结构体,这个名字是可以自己改变的 struct gamerole { char n...
面试官问我:什么是消息队列?什么场景需要他?用了会出现什么问题?
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
Android性能优化(4):UI渲染机制以及优化
文章目录1. 渲染机制分析1.1 渲染机制1.2 卡顿现象1.3 内存抖动2. 渲染优化方式2.1 过度绘制优化2.1.1 Show GPU overdraw2.1.2 Profile GPU Rendering2.2 卡顿优化2.2.1 SysTrace2.2.2 TraceView 在从Android 6.0源码的角度剖析View的绘制原理一文中,我们了解到View的绘制流程有三个步骤,即m...
微服务中的Kafka与Micronaut
今天,我们将通过Apache Kafka主题构建一些彼此异步通信的微服务。我们使用Micronaut框架,它为与Kafka集成提供专门的库。让我们简要介绍一下示例系统的体系结构。我们有四个微型服务:订单服务,行程服务,司机服务和乘客服务。这些应用程序的实现非常简单。它们都有内存存储,并连接到同一个Kafka实例。 我们系统的主要目标是为客户安排行程。订单服务应用程序还充当网关。它接收来自客户的请求...
致 Python 初学者们!
作者| 许向武 责编 | 屠敏 出品 | CSDN 博客 前言 在 Python 进阶的过程中,相信很多同学应该大致上学习了很多 Python 的基础知识,也正在努力成长。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 Python 这门编程语言,从2009年开始单一使用 Python 应对所有的开发工作,直至今...
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观...
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外...
字节跳动面试官这样问消息队列:分布式事务、重复消费、顺序消费,我整理了一下
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip installselenium -ihttps://pypi.tuna.tsinghua.edu.cn/simple/ ...
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca...
SpringBoot2.x系列教程(三十六)SpringBoot之Tomcat配置
Spring Boot默认内嵌的Tomcat为Servlet容器,关于Tomcat的所有属性都在ServerProperties配置类中。同时,也可以实现一些接口来自定义内嵌Servlet容器和内嵌Tomcat等的配置。 关于此配置,网络上有大量的资料,但都是基于SpringBoot1.5.x版本,并不适合当前最新版本。本文将带大家了解一下最新版本的使用。 ServerProperties的部分源...
Python绘图,圣诞树,花,爱心 | Turtle篇
每周每日,分享Python实战代码,入门资料,进阶资料,基础语法,爬虫,数据分析,web网站,机器学习,深度学习等等。 公众号回复【进群】沟通交流吧,QQ扫码进群学习吧 微信群 QQ群 1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle()...
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东...
破14亿,Python分析我国存在哪些人口危机!
一、背景 二、爬取数据 三、数据分析 1、总人口 2、男女人口比例 3、人口城镇化 4、人口增长率 5、人口老化(抚养比) 6、各省人口 7、世界人口 四、遇到的问题 遇到的问题 1、数据分页,需要获取从1949-2018年数据,观察到有近20年参数:LAST20,由此推测获取近70年的参数可设置为:LAST70 2、2019年数据没有放上去,可以手动添加上去 3、将数据进行 行列转换 4、列名...
听说想当黑客的都玩过这个Monyer游戏(1~14攻略)
第零关 进入传送门开始第0关(游戏链接) 请点击链接进入第1关: 连接在左边→ ←连接在右边 看不到啊。。。。(只能看到一堆大佬做完的留名,也能看到菜鸡的我,在后面~~) 直接fn+f12吧 &lt;span&gt;连接在左边→&lt;/span&gt; &lt;a href="first.php"&gt;&lt;/a&gt; &lt;span&gt;←连接在右边&lt;/span&gt; o...
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ...... ...
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!...
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。 再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。 下文是原回答,希望能对你能有所启发。 如果我说,这个世界上人真的分三六九等,...
2020年全新Java学习路线图,含配套视频,学完即为中级Java程序员!!
新的一年来临,突如其来的疫情打破了平静的生活! 在家的你是否很无聊,如果无聊就来学习吧! 世上只有一种投资只赚不赔,那就是学习!!! 传智播客于2020年升级了Java学习线路图,硬核升级,免费放送! 学完你就是中级程序员,能更快一步找到工作! 一、Java基础 JavaSE基础是Java中级程序员的起点,是帮助你从小白到懂得编程的必经之路。 在Java基础板块中有6个子模块的学...
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合...
爬取薅羊毛网站百度云资源
这是疫情期间无聊做的爬虫, 去获取暂时用不上的教程 import threading import time import pandas as pd import requests import re from threading import Thread, Lock # import urllib.request as request # req=urllib.request.Requ...
如何优雅地打印一个Java对象?
你好呀,我是沉默王二,一个和黄家驹一样身高,和刘德华一样颜值的程序员。虽然已经写了十多年的 Java 代码,但仍然觉得自己是个菜鸟(请允许我惭愧一下)。 在一个月黑风高的夜晚,我思前想后,觉得再也不能这么蹉跎下去了。于是痛下决心,准备通过输出的方式倒逼输入,以此来修炼自己的内功,从而进阶成为一名真正意义上的大神。与此同时,希望这些文章能够帮助到更多的读者,让大家在学习的路上不再寂寞、空虚和冷。 ...
雷火神山直播超两亿,Web播放器事件监听是怎么实现的?
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播。在视频业务大数据平台中,播放数据的统计分析非常重要,所以Web播放器在使用过程中,需要对其内部的数据进行收集并上报至服务端,此时,就需要对发生在其内部的一些播放行为进行事件监听。 那么Web播放器事件监听是怎么实现的呢? 01 监听事件明细表 名...
3万字总结,Mysql优化之精髓
本文知识点较多,篇幅较长,请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量,备受互联网大厂的青睐,出门面试想进BAT,想拿高工资,不会点MySQL优化知识,拿offer的成功率会大大下降。 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计...
HTML5适合的情人节礼物有纪念日期功能
前言 利用HTML5,css,js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面,非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女某某 文字段也可自行修改,还有代码下半部分的JS代码需要修改一下起始日期 注意月份为0~11月 也就是月份需要减一。 当然只有一部分HTML和JS代码不够运行的,文章最下面还附加了完整代码的下载地址 &lt;!...
相关热词 c#导入fbx c#中屏蔽键盘某个键 c#正态概率密度 c#和数据库登陆界面设计 c# 高斯消去法 c# codedom c#读取cad文件文本 c# 控制全局鼠标移动 c# temp 目录 bytes初始化 c#
立即提问