JavaScript（9）—— CSS定位综合练习
画布上画矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Drawing</title>
<link rel="stylesheet" href="../vendor/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="draw.css">
<script src="../vendor/jquery-3.4.1.js"></script>
<script src="../vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="../base.js"></script>
<script src="draw.js"></script> <script>
$(function(){
init();
})
</script>
</head>
<body> <div class="container">
<h1 class="my-5">画矩形</h1>
<form class="form-inline">
<div class="form-group mb-2">
<label class="sr-only"></label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="请输入要画的矩形数量">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="rect-number" class="sr-only">Password</label>
<input type="number" class="form-control" min="-1" id="rect-number">
</div>
<button id="sbm" type="button" class="btn btn-primary mb-2">Drawing Now!</button>
<button id="clear" type="button" class="btn btn-primary mb-2 ml-3">Clear</button>
</form>
</div>
<hr>
<div class="container" id="canvas"> </div>
</body>
</html>
draw.js
/**
* @author Dev
* Alter-Date: 2019-10-14
* 完成功能
* warning:
* 暂无
*/ /**
* 初始化
*/
function init(){
/**
* 获取画布
*/
var canvas = $('#canvas');
/**
* 添加事件
*/
$('#sbm').click(function(){
var quantity = $('#rect-number').val();
if(isNaN(quantity) || quantity < 0){
alert('请输入大于0的数字');
}else{
canvas.empty();
createRectangle(Number(quantity),canvas);
}
})
$('#clear').click(function(){
canvas.empty();
})
} /**
* 创建矩形
* @param {} quantity 数量
* @param {*} canvas 画布对象
*/
function createRectangle(quantity,canvas){
var rects = [];
rects.length = quantity;
rects.fill(new Rectangle());
rects.forEach(function(rect,idx){
rect.setRandomPosition(canvas);
rect.drawToCanvas(canvas,idx + 1);
})
} /**
* 矩形类
* @param {*} left
* @param {*} top
* @param {*} width
* @param {*} height
* @param {*} text
*/
function Rectangle(left,top,width,height){
this.left = left;
this.top = top;
this.width = width;
this.height = height;
/**
* 将矩形画在文档上，再此之前请设置各属性
* @param canvas 画布对象
* @param text 矩形内的文字
*/
this.drawToCanvas = function(canvas,text){
canvas.append($('<div>'+text+'</div>').css({
position:"absolute",
left:this.left+"px",
top :this.top+"px",
width:this.width+"px",
height:this.height+"px",
border:"rgb("+getRandom(0,255)+","+getRandom(0,255)+","+getRandom(0,255)+") dashed 2px",
textAlign:"center",
lineHeight:this.height+"px"
}));
}
/**
* 获取在画布内的位置，并随机设置高宽
* @param canvas 画布对象
*/
this.setRandomPosition = function(canvas){
var width = canvas.width();
var height = canvas.height();
this.left = getRandom(0,width - 20), this.top = getRandom(0,height - 20),
this.width = getRandom(20,width - this.left), this.height = getRandom(20, height - this.top);
}
}
#canvas{
width: 100%;
height: 300px;
border:1px solid black;
box-shadow:5px 5px gray;
position: relative;
}
draw.css
function print(log){
console.log(log);
}
function getRandom(start, end){
if(!(start<=end)) return -1;
return Math.floor(start + Math.random()*(1 + end - start));
}
base.js
最终效果:
JavaScript（9）—— CSS定位综合练习的更多相关文章
- selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治疗selenium各种定位不到，点击不了的并发症）
跟你说,你总是靠那个firebug,chrome的F12啥的右击复制xpath绝对总有一天踩着地雷炸的你死活定位不到,这个时候就需要自己学会动手写xpath,人脑总比电脑聪明,开始把xpath语法给我 ...
- Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景 在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
- JavaScript Table行定位效果
作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...
- 简单CSS定位瀑布流实现方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
- 使用JavaScript 和 CSS 实现图像缩放和剪裁(转)
英文原文:Scale and Crop an Image using Javascript and CSS 在页面上需要裁减和缩放一张图片是一个常见问题.缩放图片比较简单的方法是使用image的hig ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- Xpath定位和CSS定位（***重）
1.XPath是一种在XML文档中定位元素的语言.因为HTML可以看作XML的一种实现, 所以Selenium用户可以使用这种强大的语言在Web应用中定位元素. 1.1 绝对路径定位 参考baidu. ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
随机推荐
- [转载]pytest学习笔记
pytest学习笔记(三) 接着上一篇的内容,这里主要讲下参数化,pytest很好的支持了测试函数中变量的参数化 一.pytest的参数化 1.通过命令行来实现参数化 文档中给了一个简单的例子, ...
- CF776D The Door Problem[2-SAT]
翻译 对于一扇门,如果是关的,那么他必须使用其中一个开关开开来,如果是开的,要么使用两个开关,要么啥都不做.这样,每扇门恰好对应两种状态,要选一个. 考虑用2-SAT模型解决.连边的话是对于一个机关, ...
- UnicodeDecodeError: 'utf-8' codec can't decode byte 0xd0 in position 140: invalid continuation byte
web阅片系统,遇到dicom文件在文件夹不能正常读取的问题.解决方法如下: def rep7(request): file_path = os.path.dirname(__file__) + re ...
- Peter Shirley Ray Tracing in One Weekend(下篇)
Peter Shirley-Ray Tracing in One Weekend (2016) 原著:Peter Shirley 下篇主要对本书的后5章节进行学习,包括材质球的Metal,和Diele ...
- BZOJ 3038: 上帝造题的七分钟2 / BZOJ 3211: 花神游历各国 (线段树区间开平方)
题意 给出一些数,有两种操作.(1)将区间内每一个数开方(2)查询每一段区间的和 分析 普通的线段树保留修改+开方优化.可以知道当一个数为0或1时,无论开方几次,答案仍然相同.所以设置flag=1变表 ...
- Luogu P1092 虫食算 爆搜
心路历程:震惊,我竟然得了$90$分!!...康康数据...奥..(忽然有了邪恶的卡数据的想法) 于是把$for(int \space i=0;i<n;++i)$改成了$for(int \spa ...
- PHP mysqli_get_host_info() 函数
定义和用法 mysqli_get_host_info() 函数返回 MySQL 服务器主机名和连接类型. 语法 mysqli_get_host_info(connection); 返回 MySQL 服 ...
- http method
get: 获取资源get方法用来请求访问已被URL识别的资源 post: 传输实体主体POST方法用来传输实体的主体 put: 传输文件PUT方法用来传输文件. head: 获取报文首部head方法与 ...
- learning armbian steps(8) ----- armbian 源码分析（三）
在lib/main.sh当中 ) == main.sh ]]; then echo "Please use compile.sh to start the build process&quo ...
- 修改tomcat控制台的标题
Tomcat的bin目录下,创建一个名为setenv.bat的文件. setenv.bat 编辑内容 : set TITLE = 想要命名的标题名称 保存修改.重新启动. 第二种. 修改tomca ...