<!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. html5与css3新特性

    HTML5新特性 增加了一些新的标签.新的表单以及新的表单属性等 这些新特性都有兼容性问题,基本上IE9+以上版本浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性 新增语义化标签 - < ...

  2. Error running 'Tomcat 8.5.27': Unable to open debugger port (127.0.0.1:2887): java.net.SocketException "Interrupted function call: accept failed"-火绒安全搞的鬼

    火绒安全-导致的tomcat8启动异常 一.问题由来 最近有个朋友在学习使用IDEA配置tomcat 8.5.99的时候,使用一切都正常,直到学习到使用Servlet实现文件 下载功能的时候,出现问题 ...

  3. 恒玄科技BES2500芯片OTA升级调试总结和源码分析

    一 前言 bes2500芯片在tws耳机应用十分广泛,该芯片有着资源强大,音质好,大厂背书等特色.吸引了不少粉丝跟随. 最近在调试该芯片的ota功能,花费了一些时间,踩了一些坑,这里做一个总结和备忘吧 ...

  4. 逆向通达信Level-2 续五 (调试窗口层次结构)

    演示 hierarchy, checkCWnd命令. 窗口层次结构向上追溯寻根.自动识别是否为CWnd对象,并且自动搜索对象指针. 窗口层次结构内容包括: 1.窗口类名 2.窗口实现所在模块 3.窗口 ...

  5. HiSi 3516CV500 NNIE(Neural Network Inference Engine) 摸鱼记录(1) --- 环境搭建

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  6. Redis安装（Linux CentOS）

    1. 环境介绍 主机系统:CentOS Redis版本:7.0.10 2. 安装过程 检查 GCC 版本 gcc -v redis 6.0 以上需要 gcc 5.3,升级 gcc.如果安装的redis ...

  7. drf(JWT认证)

    一. jwt实现过程 1. 构建jwt过程 第一: 用户提交用户名和密码给服务端,如果登录成功,使用jwt创建一个token,并给用户返回 eyJ0eXAiOiJqd3QiLCJhbGciOiJIUz ...

  8. 大模型落地实战指南：从选择到训练，深度解析显卡选型、模型训练技、模型选择巧及AI未来展望—打造AI应用新篇章

    大模型落地实战指南:从选择到训练,深度解析显卡选型.模型训练技.模型选择巧及AI未来展望---打造AI应用新篇章 0.前言大模型发展史 早期阶段(1950s~1980s) 在1950年代初期,人们开始 ...

  9. archlinux xfce 修改用户主目录名称

    操作有风险,修改用户主目录名称后一些链接了旧主目录的的链接可能仍未修改.导致链接用不了,需要手动指定链接 1.删除指定用户保存的会话,未删除应该会导致修改用户主目录名称后进不去会话 2.切换到其它用户 ...

  10. linux xfce 在文件管理器里点击运行shell脚本文件

    1.打开 Settings Editor 2.点击左边的 thunar 3.点击右边的 添加 ,在属性中输入 /misc-exec-shell-scripts-by-default 在类型中选择布尔类 ...