自动生成V字型

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量332 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jrts/p/6116150.html
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#input1{margin-left: 200px;}
#div1{position: relative;top: 100px;margin: 0 200px;}
li{width: 50px; height: 50px; background: red;border: 1px solid beige;
font-size: 25px; text-align: center; line-height: 50px;margin: 0;
list-style-type: none;color: beige;position: absolute;
left: 0;top 100px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oSpan=document.getElementById('span1');
var oInput=document.getElementById('input1');
var num=0;


oInput.οnclick=function(){
num++;
oSpan.innerHTML=''

for(var i=0;i<5;++i){
oSpan.innerHTML+='<li></li>';
}
var aLi=document.getElementsByTagName('li');

if(num==1){
for(var j=0;j<aLi.length;++j){
if(j<(aLi.length/2)){
aLi[j].style.top=-j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}else{
aLi[j].style.top=-(aLi.length-1-j)*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}
}
}else if(num==2){
for(var j=0;j<aLi.length;++j){
if(j<(aLi.length/2)){
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}else{
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=(aLi.length-j-1)*50+'px';
}
}
}else if(num==3){
for(var j=0;j<aLi.length;++j){
if(j<(aLi.length/2)){
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}else{
aLi[j].style.top=(aLi.length-j-1)*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=j*50+'px';
}
}
}else if(num==4){
num=0;
for(var j=0;j<aLi.length;++j){
if(j<(aLi.length/2)){
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=-j*50+'px';
}else{
aLi[j].style.top=j*50+'px';
aLi[j].innerHTML=j;
aLi[j].style.left=-(aLi.length-j-1)*50+'px';
}
}
}
};
};
</script>
</head>
<body>
<input id="input1" type="button" value="按钮"/><br/>
<div id="div1">
<span id="span1"></span>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/jrts/p/6116150.html

weixin_34081595
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js用for循环将小方块摆成V型方法一--小技巧
JackieDYH的博客
03-19 526
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #list { position: relative; list-style: none; ...
innerHTML应用--自动生成一个V字形
weixin_34390996的博客
10-20 149
一、效果图。二、HTML+CSS代码。<style>.box{ width:800px; margin:90px auto;}.btn{ padding:5px 10px; color:#fff; background:#ff6600; cursor:pointer; font-size:16px; border-radius:5px;}.list{ positi...
第2课--2.3自动生成V字型-只能用定位实现
wcf1991的博客
10-27 282
自动生成V字型-只能用定位实现 #content{ width:500px; height:500px; border:1px solid red; position:absolute; } #content div{ width:100px; height:100px; background:red; font:30px/30px
javascript：第二章for 练习 自动生成V字形的div！
weixin_33737774的博客
08-02 401
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&...
利用JavaScript写出V字形
weixin_45457515的博客
08-19 927
如图所示 <style> div{ width: 50px; height: 50px; background: #f00; position:absolute;} </style> </head> <body> <script> var len = 9 for(...
中国自动驾驶仿真蓝皮书
03-18
三是具备云端大规模并行加速能力，实现快速、大规模的测试迭代，以满足自动驾驶的全栈算法测试需求，符合汽车V字型开发流程。 当前，包括科技公司、车企、自动驾驶解决方案提供商、仿真软件企业以及科研机构等多方...
V-model开发流程简介
08-14
V-Model（V字型模型）是一种广泛应用在软件开发中的过程模型，特别是在汽车电子控制系统这样的高安全性领域。它强调了开发过程中的验证和确认活动，确保每个阶段的产品都符合上一阶段的需求。V-Model得名于其形状，...
深蓝词库转换_V2.6_Linux_MacOS.zip 电脑五笔打字学习资料
07-14
5. **导入新词库**：转换完成后，将新生成的词库文件导入到相应的五笔输入法软件中，如小狼毫、万能五笔等，即可开始使用。 6. **备份与分享**：为了防止数据丢失，建议在进行转换操作前备份原词库，并可以将自定义...
精灵五笔输入法下载 精灵五笔输入法 v4.1.0.15
10-16
该输入法由多多输入法生成器开发，旨在提供更便捷、智能的输入体验。其版本号为v4.1.0.15，表明了软件的更新优化和稳定性提升。 1. **五笔编码支持**： 精灵五笔输入法的核心功能是基于五笔字型编码进行汉字输入。...
js写一个“V”型字
樱井萧的博客
01-03 2199
2017年的第一篇，写个小应用，用原生js写的V型div，遇到一个小瓶颈是从小到上的div不知道怎么定位。后来，想了好久才明白。贴上代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> d
javascript用for循环制作一个V
知行合一
04-26 1587
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript用for循环制作一个V</title> <style> div{ height:50px; width: 50px; line-h
js用for循环将小方块摆成V型方法四--小技巧
JackieDYH的博客
03-25 613
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
js for循环练习(生成方块阵列与V字形)
S1mp1e的专栏
02-01 3348
for循环练习综合 #list { position: relative;} li { width: 50px; height: 50px; position: absolute;top: 0px; left: 0px; background: red; font: 30px; line-height: 50px;text-align: center; display: bloc
innerHTML应用--自动生成一个V字形（高级版）
weixin_33811539的博客
10-21 245
一、效果图按钮可以多次点击。二、HTML+CSS代码。<style>.box{ width:800px; margin:90px auto;}.btn{ padding:5px 10px; color:#fff; background:#ff6600; cursor:pointer; font-size:16px; border-radius:5px;}.list...
js基础【v型方框数字排列】
姗姗的博客
07-08 539
<!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-Compa...
V字图形入门级案例
weixin_42132833的博客
03-05 679
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #content{ width:500px; height:500px; b...
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 1025
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
ucgui 字体生成器v10.0
07-28
2. 多种字体风格支持：UCGUI字体生成器v10.0提供了多种字体风格选择，包括不同大小、颜色和字型等。用户可以根据自己的需求选择合适的字体风格，以满足不同的视觉效果要求。 3. 可自定义编码方式：UCGUI字体生成器v...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值