如何用javascript制作便签

如何用javascript制作便签,第1张

添加了新增便签的函数,其余希望楼主能自己扩展,自己多研究才是正道。

==============================

楼主并未说明是否需要支持浏览器,大家都知道,不同浏览器下JS的写法是不一样的,我自然不会搞的那么复杂还专门去到火狐或其它浏览器下去测试一下,毕竟在这里给人回答问题只是爱好所致。之前的代码仅在IE6.0下测试通过,你可以去IE6下执行看看。

修改后的代码在IE和firefox下均测试通过,如果你还要支持其它浏览器的话,请自行修改浏览器支持。

================

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

<script language="javascript">

//使火狐支持insertAdjacentHTML 方法

if(typeof HTMLElement!="undefined" &&!HTMLElement.prototype.insertAdjacentElement)

{

HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)

{

switch (where)

{

case 'beforeBegin':

this.parentNode.insertBefore(parsedNode,this)

break

case 'afterBegin':

this.insertBefore(parsedNode,this.firstChild)

break

case 'beforeEnd':

this.appendChild(parsedNode)

break

case 'afterEnd':

if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling)

else this.parentNode.appendChild(parsedNode)

break

}

}

HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)

{

var r = this.ownerDocument.createRange()

r.setStartBefore(this)

var parsedHTML = r.createContextualFragment(htmlStr)

this.insertAdjacentElement(where,parsedHTML)

}

HTMLElement.prototype.insertAdjacentText = function (where,txtStr)

{

var parsedText = document.createTextNode(txtStr)

this.insertAdjacentElement(where,parsedText)

}

}

var moveDiv

var oldX

var oldY

function down(div,event){

moveDiv = div

if(getBrowserType() == "fox"){

oldX = event.pageX

oldY = event.pageY

}else{

oldX = event.x

oldY = event.y

}

if(getBrowserType() == "fox"){

document.addEventListener("mousemove",move,true)

}else{

div.setCapture()

}

}

function move(event){

if(null!=moveDiv){

var oldXtemp = parseInt(moveDiv.style.left)

var oldYtemp = parseInt(moveDiv.style.top)

if(getBrowserType() == "fox"){

oldXtemp = oldXtemp + event.pageX-oldX

moveDiv.style.left = oldXtemp

oldX = event.pageX

oldYtemp = oldYtemp + event.pageY - oldY

moveDiv.style.top = oldYtemp

oldY = event.pageY

}else{

oldXtemp = oldXtemp + event.x-oldX

moveDiv.style.left = oldXtemp

oldX = event.x

oldYtemp = oldYtemp + event.y - oldY

moveDiv.style.top = oldYtemp

oldY = event.y

}

}

}

function up(divObj){

if(null!=moveDiv){

if(getBrowserType() == "fox"){

document.removeEventListener("mousemove",move,true)

}else{

moveDiv.releaseCapture()

}

moveDiv = null

}

}

function getBrowserType(){

var browser=navigator.appName

var b_version=navigator.appVersion

var version=parseFloat(b_version)

if ((browser=="Netscape")){

return "fox"

}else if(browser=="Microsoft Internet Explorer"){

if(version>=4){

return "ie4+"

}else{

return "ie4-"

}

}else{

return "NSupport"

}

}

var divNum = 0

function add(){

var tipStr = document.getElementById("mytip").value

var divHtmlArr = new Array()

divHtmlArr.push("<div id=\"div"+divNum+"\" ")

divHtmlArr.push("style=\"border:1px solid #BDD2EDposition:absoluteleft:10pxtop:10pxwidth:100pxheight:100pxbackground-color:#ff0000\" ")

divHtmlArr.push("onmousedown=\"down(this,event)\" ")

divHtmlArr.push("onmousemove=\"move(event)\" onmouseup=\"up(this)\">"+tipStr+"</div>")

document.body.insertAdjacentHTML("afterBegin",divHtmlArr.join(''))

divNum++

}

/*

<div id="div1" style="border:1px solid #BDD2EDposition:absoluteleft:10pxtop:10pxwidth:100pxheight:100pxbackground-color:#ff0000" onmousedown="down(this,event)" onmousemove="move(event)" onmouseup="up(this)">aaaaaaaaa</div>

<div id="div2" style="border:1px solid #BDD2EDposition:absoluteleft:110pxtop:20pxwidth:100pxheight:100pxbackground-color:#23df00" onmousedown="down(this,event)" onmousemove="move(event)" onmouseup="up(this)">bbbbb</div>

<div id="div3" style="border:1px solid #BDD2EDposition:absoluteleft:320pxtop:230pxwidth:100pxheight:100pxbackground-color:#031d30" onmousedown="down(this,event)" onmousemove="move(event)" onmouseup="up(this)">cccc</div>

<div id="div4" style="border:1px solid #BDD2EDposition:absoluteleft:220pxtop:80pxwidth:100pxheight:100pxbackground-color:#0033de" onmousedown="down(this,event)" onmousemove="move(event)" onmouseup="up(this)">dddddd</div>

<div id="div5" style="border:1px solid #BDD2EDposition:absoluteleft:150pxtop:440pxwidth:100pxheight:100pxbackground-color:#87190f" onmousedown="down(this,event)" onmousemove="move(event)" onmouseup="up(this)">eeeee</div>

*/

</script>

</HEAD>

<BODY>

<input type="text" id="mytip" value="mytip">

<input type="button" value="add a new tip" onclick="add()">

</BODY>

</HTML>

获取a标签元素,然后后面.click()即可.

给个例子把:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<a href="这里是a标签的路径">这里是a标签的名称</a>

<button onclick="fn()">点击打开a标签</button>

<script>

    var a = document.getElementsByTagName('a')[0]

    function fn(){

        a.click()

    }

</script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7999510.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存