<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<!--定义样式-->

		<style type="text/css">

			/*id选择器 定义div的大小 背景色*/

			#div1{

				width: 300px;

				height: 200px;

				background-color:cornflowerblue;

				border: solid 1px black;

				/*上边距*/

				margin-top: 50px;

				/*左边距*/

				margin-left: 600px;

				text-align: center;

			}

			/*元素选择器*/

			input{

				width: 70px;

				height: 50px;

				margin-left: 20px;

				color: red;

			}

		</style>

		<script type="text/javascript">

			//随机生成div新的位置

			function random(){

				//得到div

				var div1=document.getElementById("div1");

				//随机得到两个边距的值

				var left=Math.random()*1200;

				var top=Math.random()*500;

				div1.style.marginLeft=left+"px";

				div1.style.marginTop=top+"px";

			}

			//隐藏div并设置页面的背景图片

			function test(){

				//设置body的背景图片

				document.body.style.backgroundImage="url(img/background.jpg)"

				//隐藏

				var div1=document.getElementById("div1");

				div1.style.display="none";

			}

		</script>

	</head>

	<body>

		<!--块-->

		<div id="div1">

			陶渊明去没去过桃花源？

			<br /><br />

			<input type="button" name="" id="" value="去过" onclick="test()" />

			<!--当鼠标的位置 移动到‘没去过’按钮的时候 触发方法 重新生成div的位置-->

			<input type="button" name="" id="" value="没去过"  onmouseover="random()"/>

		</div>

	</body>

</html>

　　

实训篇-JavaScript-陶渊明去没去过桃花源的更多相关文章

  1. 鸿蒙内核源码分析(静态站点篇) | 五一哪也没去就干了这事 | 百篇博客分析OpenHarmony源码 | v52.02

    百篇博客系列篇.本篇为: v52.xx 鸿蒙内核源码分析(静态站点篇) | 五一哪也没去就干了这事 | 51.c.h.o 前因后果相关篇为: v08.xx 鸿蒙内核源码分析(总目录) | 百万汉字注解 ...

  2. nmap扫描进阶、msfconsole攻击入门（网安全实训第二天）

    本期内容:nmap扫描.msfconsole攻击入门 1. nmap扫描进阶 2.msfconsole攻击入门 1.nmap扫描进阶 (1)nmap命令 nmap --sP -iL abin.txt ...

  3. $2019$各种$WC$没去记

    \(2019\)各种\(WC\)没去记 太弱了去不了啊. 至少我联赛没退役是吧...(退役感++ 不过这个分数线还是有点让人自闭啊,划线人绝对有毒,有人关照一下空巢老人\(mona\)喵? 这里大概是 ...

  4. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

  5. Android实训案例（八）——单机五子棋游戏，自定义棋盘，线条，棋子，游戏逻辑，游戏状态存储，再来一局

    Android实训案例(八)--单机五子棋游戏,自定义棋盘,线条,棋子,游戏逻辑,游戏状态存储,再来一局 阿法狗让围棋突然就被热议了,鸿洋大神也顺势出了篇五子棋单机游戏的视频,我看到了就像膜拜膜拜,就 ...

  6. JS相关实训

    今天又是无聊的一天,我的脑袋一直在嗡嗡叫,想着一些奇怪的问题,比如我为什么总是感到这么失落,为什么我喜欢的女孩不喜欢我呢,真是头大啊.不过既然有作业了我这个五好公民当然要认真写了.没时间让我思考这么复 ...

  7. <实训|第四天>Linux下的vim你真的掌握了吗？附上ftp远程命令上传。

    期待已久的linux运维.oracle"培训班"终于开班了,我从已经开始长期四个半月的linux运维.oracle培训,每天白天我会好好学习,晚上回来我会努力更新教程,包括今天学到 ...

  8. Android实训案例(四)——关于Game，2048方块的设计，逻辑，实现，编写，加上色彩，分数等深度剖析开发过程！

    Android实训案例(四)--关于Game,2048方块的设计,逻辑,实现,编写,加上色彩,分数等深度剖析开发过程! 关于2048,我看到很多大神,比如医生,郭神,所以我也研究了一段时间,还好是研究 ...

  9. Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！

    Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...

  10. HDFS集群PB级数据迁移方案-DistCp生产环境实操篇

    HDFS集群PB级数据迁移方案-DistCp生产环境实操篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 用了接近2个星期的时间,终于把公司的需要的大数据组建部署完毕了,当然,在部 ...

随机推荐

  1. vue3,实战项目随心笔记

    本项目模仿bibi 网站,主要是做一个pc和手机端的应用案例,主要涉及支付,三方登陆,css原子,妹子ui,路由缓存,组件封装,tailwindcss,vueuse 等常见企业级术应用, 由于本项目是 ...

  2. mysql视图详细笔记

    1 #视图 2 /* 3 含义:虚拟表,和普通表一样使用 4 mysql5.1版本出现的新特性,是通过表动态生成的数据 5 6 比如:舞蹈班和普通班级的对比 7 创建语法的关键字 是否实际占用物理空间 ...

  3. 调试分析 Linux 0.00 多任务切换

    当执行完 system_interrupt 函数,执行 153 行 iret 时,记录栈的变化情况. 任务0在刚进入system_interrupt函数时(调用中断int 0x80处理程序),栈空间为 ...

  4. [VueJsDev] 快速入门 - vscode 插件推荐

    [VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html Vscode 插件推荐 ::: details 目录 目录 ...

  5. python计算二进制bin文件hash值

    一 hash的价值 hash值的唯一性仅仅在是同一个文件的情况下得到了同样的hash值,而哪怕错误一个字节也会得到不一样的hash值. hash值得最大价值就是唯一性.这样在bin文件检查和校验这块用 ...

  6. 在后台运行 django的基本方法

    在后台运行 django: nohup python manage.py runserver 0.0.0.0:9000 &ps:&可以不写,这样启动测试服务器后,就可以常驻后台运行了. ...

  7. day06-JavaScript03

    JavaScript03 11.DOM 官方文档:https://www.w3school.com.cn/js/js_htmldom.asp 基本介绍: DOM全称是Document Object M ...

  8. gRPC入门学习之旅（二）

    gRPC入门学习之旅(一) gRPC是一个高性能.通用的开源远程过程调用(RPC)框架,基于底层HTTP/2协议标准和协议层Protobuf序列化协议开发,支持众多的开发语言,由Google开源. g ...

  9. Java valueOf() 方法---->摘抄

    valueOf(boolean b): 返回 boolean 参数的字符串表示形式.. valueOf(char c): 返回 char 参数的字符串表示形式. valueOf(char[] data ...

  10. 计算机网络（http协议）

    一  软件开发架构 CS 客户端 服务端BS 浏览器 服务端ps: BS本质也是CS 二  浏览器窗口输入网址回车发生了几件事 1.浏览器朝服务端发送请求2.服务端接受请求3.服务端返回相应的响应4. ...