JavaScript self study notes: using JS to realize floating window of web page

Recently, I made a small project to add a floating window to the web page, which tested the basic CSS and JS technology. The code is as follows (part of the code comes from reference, see the bottom)


<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        padding: 0;
        margin: 0;
    body {
        height: 900px;
		background-color: white;
    .fl {
        width: 200px;
        height: 100px;
        position: fixed;

    <div class="fl" id="fl">
	<b>Be careful:</b>  "border-top-width" No effect if used alone. First use "border-style" Property settings borders.

<script language=javascript>

var fl = document.getElementById('fl');

var chroX = document.documentElement.clientWidth;//The whole height and width of yemian
var chroY = document.documentElement.clientHeight;

var offsetLeft = fl.offsetLeft;//Location of the box
var offsetTop = fl.offsetTop;

var timer = 0;//Starting stopwatch is 0


var x = 1;//One move at a time
var y = 1;

window.onresize = function(){
    chroX = document.documentElement.clientWidth;//The whole height and width of yemian
    chroY = document.documentElement.clientHeight;

function move(){
    offsetLeft += x;
    offsetTop += y; = offsetLeft  + 'px'; = offsetTop  + 'px';
window.onload = function(){
   timer = setInterval(function(){
        if(offsetTop+200 > chroY || offsetTop < 0){
            y = -y;
        if(offsetLeft+200 > chroX || offsetLeft <0){//Move in the opposite direction if it is less than 200 from the page border
            x = -x;
    },30)//Adjust the speed, the larger the interval (number), the slower
fl.onmouseenter = function(){
    clearInterval(timer)  //Mouse on float window to stop moving
fl.onmouseleave = function(){//Move the mouse away and start moving again



The general idea is to set a timer to display the window again every time. Because your coordinates are different and the refresh time is in milliseconds, it shows a floating window effect.




Tags: Javascript IE less

Posted on Sat, 01 Feb 2020 11:33:27 -0500 by miked2