js技术--BOM（open,close,右下角固定悬浮框）

客官°小女子只卖身不卖艺 2024-02-17 23:29 46阅读 0赞

案例1：代码运行

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			window.onload = function(){
    				var oTxt = document.getElementById("tarea");
    				var oBtn = document.getElementById("btn");
    				
    				oBtn.onclick = function(){
    					var oNewWin = window.open('about:blank','_blank');
    					oNewWin.document.write(oTxt.value);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<textarea id = 'tarea' rows="10" cols="40"></textarea><br />
    		<input id = 'btn' type = "button" value="运行"/>
    	</body>
    </html>

案例2：右下角固定悬浮框

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {height: 200px;width: 200px;background: red;position: absolute;
    			right: 0px;bottom: 0px;}
    		</style>
    		<script>
    			window.onscroll = window.onresize = function(){//当滑动和窗口大小改变时触发
    				var oDiv = document.getElementById("div1");
    				
    				oDiv.style.left = document.documentElement.clientWidth - oDiv.offsetWidth + 'px';
    				//document.documentElement.scrollTop  ->IE、FF下
    				//document.body.scrollTop   ->chrome下
    				var scollTop = document.documentElement.scrollTop || document.body.scrollTop ;
    				
    				oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scollTop + 'px';
    			}
    		</script>
    	</head>
    	<body style="height: 2000px;">
    		<div id = 'div1'></div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 js技术--BOM（open,close,右下角固定悬浮框）

案例1：代码运行 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

客官°小女子只卖身不卖艺/ 2024年02月17日 23:29/ 0 赞/ 47 阅读

相关 js运动技术--右侧悬浮框！

目的让一个div悬浮框始终悬浮于页面右下脚： <!DOCTYPE html> <html> <head> <meta charset="

旧城等待，/ 2024年02月17日 23:14/ 0 赞/ 22 阅读

相关右下角滑出窗口

1. /\ 2. \Author:sohighthesky 3. \From:http://www.uedsky.com/ 4. \Date:2009

迷南。/ 2022年10月01日 02:00/ 0 赞/ 252 阅读

相关 JS网页右下角悬浮提示层代码

[下载地址][Link 1]JS网页右下角悬浮提示层代码，支持4种默认，成功，警告，危险等提示框样式代码 ![1631277586.png][] dd: [Link 1

骑猪看日落/ 2022年09月11日 03:10/ 0 赞/ 205 阅读

相关悬浮框

<%@ page language="java" import="java.util.\" pageEncoding="UTF-8"%> <% String path

比眉伴天荒/ 2022年08月11日 16:32/ 0 赞/ 224 阅读

相关右下角弹窗

<html> <head> <title>右下角弹窗</title> <script type="text/javascri

迈不过友情╰/ 2022年08月07日 02:55/ 0 赞/ 249 阅读

相关 html固定在屏幕右下角的信息（提示信息，广告）

1.截图： ![弹框图片][SouthEast] 2.css： .warning-msg { display:block; bottom:0px; right:

浅浅的花香味﹌/ 2022年06月16日 04:22/ 0 赞/ 452 阅读

相关 js写一个简易小广告逐渐上升(右下角)

小广告效果图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

ゞ浴缸里的玫瑰/ 2022年03月12日 02:24/ 0 赞/ 178 阅读

相关 js右下角弹出提示框示例代码

废话不多说，直接上代码 html页面代码: <div id="message-window" class="message-window" style="d

系统管理员/ 2021年09月27日 19:04/ 0 赞/ 570 阅读

相关 html5右下角悬浮播放器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

╰+哭是因爲堅強的太久メ/ 2021年06月26日 16:06/ 0 赞/ 573 阅读