[Js高手之路第一部]JavaScript上百例实战【新版】_10 javascript输出一个对角线形状的div

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7        div {
 8            width: 50px;
 9            height: 50px;
10            background: palevioletred;
11            position: absolute;
12            line-height: 50px;
13            text-align: center;
14            color:white;
15            font-size: 40px;
16        }
17     </style>
18     <script>
19         for( var i = 0; i < 10; i++ ){
20            document.write("<div style=‘left:"+(i*50)+"px;top:"+(i*50)+"px;‘>"+(i+1)+"</div>");
21         }
22     </script>
23 </head>
24 <body>
25
26 </body>
27 </html>

原文地址：https://www.cnblogs.com/denggelin/p/8999487.html

时间： 2024-11-01 17:45:41

[Js高手之路第一部]JavaScript上百例实战【新版】_10 javascript输出一个对角线形状的div的相关文章

[Js高手之路第一部]JavaScript上百例实战【新版】_1 js代码三种书写方式

小结: javascript使用的3种方式: 1,页面script方式 2,行间事件触发 3,外部引入方式 1,页面script方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 alert(1); 8 <

[Js高手之路第一部]JavaScript上百例实战【新版】_3 javascript变量的类型

JavaScript 数据类型字符串.数字.布尔.数组.对象.Null.Undefined 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 //变量的类型由变量的值来决定 8 // 弱类型语言 9 10 //字符串类型, 用引

[Js高手之路第一部]JavaScript上百例实战【新版】_2 javascript变量命名&使用规则

变量 1,什么是变量变量是内存中用来存储数据的一块区域 2,变量的命名规则 3,怎么使用变量 var 变量名 =(赋值) 10 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var name='name'; 8

[Js高手之路第一部]JavaScript上百例实战【新版】_8 javascript二重循环,break与continue语句

输出5行5列的表格使用二重循环实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 table { 8 /*合并单元格之间的线*/ 9 border-collapse: collapse; 10 } 11 th,t

[Js高手之路第一部]JavaScript上百例实战【新版】_9 javascript二重循环乘法表与n行n列的表格

0.隔行变色的表格 HTML style 属性实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 table { 8 /*合并单元格之间的线*/ 9 border-collapse: collapse; 10 }

[Js高手之路第一部]JavaScript上百例实战【新版】_20 读取样式与className和屏蔽空的锚

<input type="button" value="恢复样式" onclick="resetStyle();" /> <input type="button" value="修改样式" onclick="setStyle();" /> 1 <!DOCTYPE html> 2 <html lang="en"> 3 &l

[js高手之路]原型对象(prototype)与原型链相关属性与方法详解

一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手之路]一步步图解javascript的原型(prototype)对象,原型链已经分享过了. function CreateObj(uName) { this.userName = uName; this.showUserName = function

[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist

promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习封装一个简易的异步队列中的一道面试题( 页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ) ). promise的小实例: 1 function next1(){ 2 return new P

[js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息 [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法 [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义 [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin