鼠标点击效果图
点击鼠标,让div出现在,鼠标点击的位置上现方式:点击时,获取鼠标点击位置的坐标,是针对视窗窗口的坐标将这个数值,作为标签定位的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 50000px;
}
div{
width: 100px;
height: 100px;
background-color: pink;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div');
var oDivHeight1 = parseInt(window.getComputedStyle(oDiv).height) ;
var oDivHeight2 = oDiv.offsetHeight;
console.log(oDivHeight1 , oDivHeight2);
var oDivWidth = oDiv.offsetWidth;
window.onclick = function(e){
// console.log(e);
// 这个数值只有 数, 没有px单位
// 作为定位的属性值,需要拼接px单位
// 让标签的左上角和鼠标点击的位置重合
// oDiv.style.left = e.clientX + 'px' ;
// oDiv.style.top = e.clientY + 'px' ;
// 让标签的左上角 和 鼠标点击位置 有间距
// 在原始数值的基础上,再多加上一定的数值
// 这个数值,是根据客户需求而定,现在随便加个数,意思意思
// oDiv.style.left = e.clientX + 20 + 'px' ;
// oDiv.style.top = e.clientY + 20 + 'px' ;
// 让标签的中心 和 鼠标点击位置 重合
// 在原始数值的基础上,再减去定位标签,宽高的一半
oDiv.style.left = e.clientX - oDiv.offsetWidth/2 + 'px' ;
oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
}
</script>
</body>
</html>
字体闪烁效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</style>
<script>
var flag=0;
function start(){
var tex =document.getElementById("mydiv");
if(!flag){
tex.style.color="red";
tex.style.background = "#0000ff"
flag=1
}else{
tex.style.color="";
tex.style.background = ""
flag=0;
}
setTimeout("start()",500)
}
</script>
</head>
<body onload="start()">
<span id="mydiv">这是一个美丽的世界</span>
</body>
</html>