javascript:第二章for 练习 自动生成V字形的div!

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

div{

width:50px;

height:50px;

background-color:#FF0000;

color:#FFFFFF;

font-size:30px;

position:absolute;

left:0px;

top:0px;

text-align:center;

line-height:50px;

font-weight:bold;

}

</style>

<script>

window.onload=function(){

var oBtn1=document.getElementById(‘btn1‘);

var num=5;

var nums=num%2;//=1

var nm=(num-nums)/2;//=2

var str=‘‘;

for(var i=0;i<num;i++){

str=str+‘<div>‘+(i+1)+‘</div>‘;

}

oBtn1.onclick=function(){

document.body.innerHTML+=str;

var aDv=document.getElementsByTagName(‘div‘);

for(var a=0;a<num;a++){

if(a>nm){

nm--;

aDv[a].style.left=10+a*50+‘px‘;

aDv[a].style.top=40+nm*50+‘px‘;

}else{

aDv[a].style.left=10+a*50+‘px‘;

aDv[a].style.top=40+a*50+‘px‘;

}

}

}

}

</script>

</head>

<body>

<input id="btn1" type="button" value="小方块自动生成一个V字形" />

</body>

</html>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

#div1 div {

width:50px;

height:50px;

background-color:red;

color:#FFFFFF;

font-size:30px;

position:relative;

left:0px;

top:0px;

text-align:center;

line-height:50px;

font-weight:bold;

display:inline-block;

}

#div1{width:800px;height:800px;background:#ccc;margin:0 auto;}

</style>

<script>

window.onload=function(){

var btn =document.getElementById(‘btn1‘);

var btn1=document.getElementsByTagName(‘input‘);

var div=document.getElementById(‘div1‘);

var str=‘‘;

for(var i=0;i<10;i++){

str+=‘<div>‘+(i+1)+‘</div>‘;

}

btn1[0].onclick=function(){

div.innerHTML=str;

var divs= div1.getElementsByTagName(‘div‘);

for(var j=0;j<divs.length;j++){

divs[j].style.left=‘‘;

divs[j].style.top=‘‘;

}

}

}

</script>

</head>

<body>

<input id="btn1" type="button" value="小方块自动生成一个V字形" />

<div id="div1"></div>

</body>

</html>

时间: 2024-10-07 05:20:34

javascript:第二章for 练习 自动生成V字形的div!的相关文章

JavaScript 数据访问(通译自High Performance Javascript 第二章) [转]

JavaScript 数据访问(通译自High Performance Javascript 第二章) 提问者:lilei335260(ID:160310) | 悬赏 0.0 希赛币 | 回答数:12 | 关注度:32 | 提问时间:2014-05-03 JavaScript 数据访问(翻译自High Performance Javascript 第二章) 计算机科学中一个经典的问题是决定如何存储数据,以便进行快速的读取和写入操作. 在代码执行期间,数据如何存储将会关系到它们的检索速度.在Jav

第二章实例:动态生成View控件例子---小球跟随手指滑动

package mydefault.packge; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.os.Bundle; import androi

自动生成V字型

<!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;bo

从思维导图中学习javascript第二章运算符

1.对象运算符:delete删除指定的对象的属性,数组元素,变量 2.?:条件运算符等于if else 3.,一行语句中执行多个不同的操作

Head First JavaScript 第二章:2 编写代码

2019-12-02 10:49:26 开发一款战舰游戏 原文地址:https://www.cnblogs.com/JasonPeng1/p/11969746.html

JS练习--自动生成100个li

点击按钮,自动生成100个li,红.黄.蓝.绿四种颜色的顺序显示出现在页面中 CSS: *{padding: 0;margin: 0;} ul,li{list-style: none;} #ul1{position: relative;} #ul1 li{ width: 48px; height: 48px; border: 1px solid #ccc; float: left; margin-right: 10px; margin-top: 10px; text-align: center;

javascript:第二章:自动生成十个li!

<!DOCTYPE html> <html lang="en"> <head>         <meta charset="UTF-8">         <title>margin  传递</title>         <style>          ul,li{padding:0;margin:0;}                 #box{background:red;

javascript:第二章自动生成100个li!练习!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unt

[转]JavaScript自动生成博文目录导航

转自:http://www.cnblogs.com/xdp-gacl/p/3718879.html 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做