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定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
随机推荐
- php 把数字拆分成数组
用str_split $a = 1234567890; //拆分数字为数组 var_dump( str_split($a, 1) ); 打印结果 : Array ( [0] =2 [1] =5 )
- hierarchyviewer
支持的版本更低
- Docker Gitlib创建项目后仓库连接IP地址不一致问题(包括进入docker中容器命令及退出命令)
首次在内网搭建Gitlab环境,在成功后在Gitlab上新建了一个项目. 然而在IDEA上clone项目时发现,项目地址如下: git@0096ce63c43f:root/jump.git 或者这样 ...
- PHP mysqli_get_client_version() 函数
定义和用法 mysqli_get_client_version() 函数将 MySQL 客户端库版本作为整数返回. MySQL 客户端库版本将按照以下格式返回: 主要版本*10000 + 次要版本*1 ...
- ttf-mscorefonts-installer 无法安装，解决办法
ttf-mscorefonts-installer 无法安装,解决办法 原 lieefu 发布于 2017/01/11 08:11 字数 163 阅读 1007 收藏 0 点赞 0 评论 0 面试:你 ...
- ZOJ 4124 拓扑排序+思维dfs
ZOJ - 4124Median 题目大意:有n个元素,给出m对a>b的关系,问哪个元素可能是第(n+1)/2个元素,可能的元素位置相应输出1,反之输出0 省赛都过去两周了,现在才补这题,这题感 ...
- 逆向bfs搜索打表+康拓判重
HDU 1043八数码问题 八数码,就是1~8加上一个空格的九宫格,这道题以及这个游戏的目标就是把九宫格还原到从左到右从上到下是1~8然后最后是空格. 没了解康托展开之前,这道题怎么想都觉得很棘手,直 ...
- [Vue] : 键盘修饰符
键盘修饰符以及自定义键盘修饰符 为文本框回车键绑定事件 <input type="text" class="form-control" v-model=& ...
- bzoj2733永无乡
永无乡 HYSBZ - 2733 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接, ...
- 锁对象Lock-同步问题更完美的处理方式
Lock是java.util.concurrent.locks包下的接口,Lock 实现提供了比使用synchronized 方法和语句可获得的更广泛的锁定操作,它能以更优雅的方式处理线程同步问题,我 ...