[JavaScript+DOM+CSS]：奇遇小结一二

最新推荐文章于 2023-10-19 11:59:04 发布
最新推荐文章于 2023-10-19 11:59:04 发布
阅读量507 收藏 1
点赞数
分类专栏： [03]Web前端 文章标签： javascript css iframe object 前端开发 integer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chz_cslg/article/details/7198161
版权

        写这篇目的，是想把在Web前端编程时遇到的一些“纳闷问题”记录下来；并将找到的解决方法及应对技巧总结归纳；以便以后查找使用。想来想去不知叫什么题目比较合适，就叫这个了。想以后遇到“纳闷问题都会补充进来吧”。也欢迎大家讨论，补充；把自己遇到的奇怪的前端问题贴出来。闲话不说了，这两天利用空闲之际想做个弹出层对话框。在这过程中遇到了几个问题，暂且先记下两个问题及解决方法。

 问题一、想试图通过Javascript设置某元素style的float属性。我们使用Javascript操作css属性的写法是有一定的规律的：

          1、对于没有中划线的css属性一般直接使用style.属性名即可。如：obj.style.margin、obj.style.width、obj.style.left、obj.style.position等。

          2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如：obj.style.marginTop、obj.style.borderLeftWidth、obj.style.zIndex、obj.style.fontFamily等。

       这个规律我想大多数的前端开发者也都熟知。但在css中有一个特殊的属性其js使用方法比较特殊。这个特殊的属性就是:float。我们不能直接使用obj.style.float来使用，这样操作是无效的。其正确的使用方法是为：IE:obj.style.styleFloat，其他浏览器:obj.style.cssFloat。

问题二、通过Javascript使动态添加到页面里的iframe的边框、边线去掉，不想看到。

        为了达到目的，我们一般都会想到通过 iframeObj.frameBorder = "0";  [0：无边框、1：有边框]，但事实这样做了，有些浏览器是没有了，我在Chrome 11.0.696.68看，达到了想要的效果（火狐中没测，应该正常）；可是在IE 8中死活还是有的， 就是没效果；为什么呢？我又一次纳闷了。通过style.border = "0"; 还是不行，百度吧。一查，果然有同仁遇到跟我一样的问题。并且给出解决方法。在这里谢谢那位同仁。他的解决方法：var iframe = document.createElement('iframe'); iframe.setAttribute('frameborder', '0', 0);后面那个'0'表示是否区分大小写。他说原因：“DOM里面的属性都是大写的，也就是说上面这段代码，在IE里面最后会变成：< IFRAME frameBorder=0... 由于IE认大写的，所以”frameborder“ 它自然不认。”方法凑效，但原因不太明白。又搜出值得一读的关于译自W3C DOM Level 1中关于setAttribute方法的说明，内容不多，就贴出来了。

具体的方法参数如下：
object.setAttribute(sName, vValue [, iFlags])

参数：
    sName：必填项. String类型，属性名
    vValue：必填项. 为属性指定的变量，可以为string, number, 或者 Boolean类型
    iFlags：选填. 下面指定的两种 Integer 类型的标志；0：覆盖同名、1：默认值，为属性添加指定值。

返回值：无。

备注：
如果指定的属性不存在,该方法讲为object添加新属性及值。
注意,当拼写属性名时. 如果 iFlags 设置成 1 并且 指定的sName 参数在该属性上没有相同名字时(包括大小写), object讲为之创建新属性。
如果object有两个或多个相同的属性名, 仅在值上不同时, iFlags设为 0, 该方法仅保存第一个被创建属性的值,其她的同名属性将被忽略。
使用该方法设置 CLASS 属性时, 请将sName 设为 "className",以符合Dynamic HTML (DHTML) 特性.(其实"className"仅适合在IE下使用,FF下要用"class")。

 

另外有个技巧：就是通过 “var iframe = document.createElement('iframe'); ”这样创建的元素，在VS2008中通过智能感知是点不出属性或者事件来的。如果你要想知道某个属性或者事件；你大可在页面拖个你要创建的那个类型的元素；然后通过var dialogSrcIframe = document.getElementById("dialogIframe"); dialogSrcIframe.src = url;就可以通过智能感知点出属性或者事件进行赋值等操作，然后直接替换对象名就可以了。

 

O(∩_∩)O~

 

 

 

 

 

奋斗的小壁虎
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts绘制自定义提示的环形图、折线图及y轴柱状图
qq_42248955的博客
08-15 1955
1、自定义提示的环形图 this.ring_dom = this.$refs.ring const myRing = this.$echarts.init(this.ring_dom) let total this.total < 10 ? (total = ' ' + this.total) : (total = this.total) const option = { //显示在环形内的文字 titl
HTML+JavaScript+CSS：爱心代码
最新发布
05-20
520表白html5爱心代码 HTML+JavaScript+CSS：爱心代码
JavaScript DOM基础总结
andou2860的博客
04-03 119
上个月在进行百度三面时候，面试官提问JavaScript DOM方法，我回答的有点少，前面太关注JavaScript 兼容性，框架方面，JavaScript 原生DOM基础没有记牢，心中有点遗憾。下来继续看我喜欢的红宝书，希望深入学习JavaScript DOM。 DOM(文档对象模型）是针对HTML和XML文档的一个API,描绘了一个层次化的节点树，允许开发人员添加、删除和修改页面的...
基于JS的简单算术题式验证码的实现
web开发自学
05-08 738
今天心血来潮搜索了下验证码的实现方式，仿照网上一个6位字符型的验证码实现了一个100以内算术题式的验证码。代码如下，备用： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;htm...
案例-加法随机算术题
态度决定一切
08-31 610
当沉醉在代码的世界里多时，偶尔做做口算加法题，也是一种放松，当然，别被那计时搞紧张了 加法随机算术题 html,body,h2{margin:0px;padding:0px;} .headTitle{width:100%;height:50px;line-height:50px;text-align:center;backg
JavaScript：200以内的加减法小练习
袁成新（Chauncey Yuan）
08-03 1755
在之前一个练习题上进行改动，做了一个200以内的加减法的小练习的页面。 加减法随机生成： 如果是加法，则和在200以内。 如果是减法，则差不会为负数。 运行效果 源代码 <!-- /* * @Author: Chauncey Yuan * @Date: 2019-08-01 18:25:30 * @Last Modified by: Chauncey Yuan * @La...
随机出十道加法题----JavaScript--解决方法
qq_28835447的博客
05-23 4019
随机出十道加法题，接收玩家输入结果，然后判断对错，对一道题加10分，游戏结束，给出总分 如果输入exit，直接退出游戏 思路：1.创建数组。2.创建输出随机数加入数组。3.创建循环体将随机数相加十次，判断结果，最后输出。 function fun(){ var sum=0; //总得分初始值 for(var i=0;i<10;i++){//将以下循环10次 ...
vue day02 笔记(回顾+json-server用法)
layxing27的博客
09-28 823
文章目录1 回顾(day01)背景关于vue基础明确下列:vue的基本指令(1) 基本框架(2) 渲染指令(3) v-vloak 指令(4) v-bind 指令和class style绑定(5) v-on指令以及几个常见(6) 数据绑定(单,双)(7) v-for 指令(8) v-if v-show 指令2 案例分析和讲解3 新内容 json-server引入为什么要使用json-server?优点?讲解1 怎么使用首先创建一个list.json文件CRUD结合axios进行数据访问案例:axios+jso
元宇宙 3D 开荒场 - 探味奇遇记
凹凸实验室
06-23 557
随着近来元宇宙热度的飙升，其发展势头之迅猛，各大厂都想在元宇宙中展现自家十八般武艺。虚拟现实、NFT、VR 等各个概念也被炒的十分火热，作为前端开发工程师，在现有业务的支持下，通过 Web 端现有能力，进行了一次元宇宙 3D 开荒沉浸式体验。...
前端修炼记
weixin_60291486的博客
10-19 326
前端虚构小说，娱乐读者，通过阅读了解学习路线。
javascript+dom树型菜单类，希望朋友们一起进步
10-30
javascript+dom树型菜单类，希望朋友们一起进步
HTML5+CSS3小实例：纯CSS实现文字组成肖像特效
12-26
HTML5+CSS3小实例：纯CSS实现文字组成肖像特效
Web期末结课大作业 javascript+html+css
03-24
期末web大作业 ...众多许多js样式，比如天气、定位、小火箭，下拉列表等等 资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片,视频文件 适合人群：web期末大作业涉及js，html和css
HTML+Javascript+CSS测试题
06-08
HTML+Javascript+CSS测试题
关于如何在图片上加热点链接
Kevin.Chen - 专注前行
02-10 7276
可能你在项目中会遇到需要在图片上模块区域加个链接，点击以后可以转向一个页面；下面方法可以帮你解决问题。 这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签：。                                       1、shape -- 定义热点形状           shape = rect
ASP.Net：Javascript 通过PageMethods 调用后端WebMethod方法 + 多线程数据处理 示例
Kevin.Chen - 专注前行
04-27 4976
背景：项目中有这样一个业务处理过程。1、上传一个文件； 2、上传完，读取该文件并对其里面大数据进行逐行多字段格式验证、并且做一些复杂的业务处理等。最终将处理后数据写入数据库中。一般做法：上传、读取、解析、验证、保存等操作一并完成。但因为文件数据量大，导致使用一般方法处理整个过程耗时太长，并且会出现超时页面不响应等情况。在同事的建议下，能否步骤处理（上传与后续所有操作分开处理），并使用多线程（读取、
看截图：给图片罩上一层半透明文字描述效果（一）DIV+CSS+SPAN 借鉴百度图片附着文字效果
Kevin.Chen - 专注前行
08-06 3298
这段时间项目中要用到：在图片展示时，在图片高度的下边一部分罩上一层透明效果，文字描述附着在透明层上。其实这个东西网上到处都是了，网上也没搜到很好、精简的例子；自己写、去琢磨吧，还真需要一点时间；时间宝贵，就拿来主义吧，就到百度图片看了一下，F12开发者工具调出来，然后就这一样一步一步把它给抠出来了。自己整理修改了一下，把精髓抠出，有兴趣的朋友可以直接拿去用了。 先贴效果张图： 精髓源码如下
看截图：给图片罩上一层半透明文字描述效果（二）DIV+CSS+SPAN
Kevin.Chen - 专注前行
08-07 3207
前面一篇例子是基本满足应用，有人会问能不能在调整一下？可能想：那个半透明文字能不能不要跟照片宽度一致，想在外面在套个容器，文字与容器宽度一致，图片在容器中居中显示；于是乎我也想到了这个问题，于是下班后又琢磨了一下，做了一下修改、调整一下，满足两种情况下需要：至于哪两种效果，自己琢磨看代码吧。 先贴效果图： 再贴精髓源码： DIV
用JavaScript+html5+css3写一个2048游戏
09-25
### 回答1： 好的，下面是一个简单的2048小游戏的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2048 Game</title> <style> body { font-family: Arial, sans-serif; text-align: center; } .container { display: inline-block; margin-top: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px #ccc; } .row { display: flex; } .cell { width: 100px; height: 100px; margin: 5px; font-size: 2rem; font-weight: bold; text-align: center; line-height: 100px; background-color: #eee; border-radius: 5px; } .cell.empty { background-color: #ccc; color: #fff; } .cell.num2 { background-color: #eee; color: #333; } .cell.num4 { background-color: #e8e189; color: #333; } .cell.num8 { background-color: #f3b04b; color: #fff; } .cell.num16 { background-color: #f39642; color: #fff; } .cell.num32 { background-color: #f07f4f; color: #fff; } .cell.num64 { background-color: #f66d3b; color: #fff; } .cell.num128 { background-color: #f7c34f; color: #fff; } .cell.num256 { background-color: #f7bb3f; color: #fff; } .cell.num512 { background-color: #f7a92d; color: #fff; } .cell.num1024 { background-color: #f7b40e; color: #fff; } .cell.num2048 { background-color: #f7b40e; color: #fff; } </style> </head> <body> <div class="container"> <div class="row"> <div class="cell empty"></div> <div class="cell empty"></div> <div class="cell empty"></div> <div class="cell empty"></div> </div> <div class="row"> <div class="cell empty"></div> <div class="cell empty"></div> <div class="cell empty"></div> <div class="cell empty"></div> </div> <div class="row"> <div class="cell empty"></div> <div class="cell empty"></div> <div class="cell empty"></div> <div class="cell empty"></div> </div> <div class="row"> <div class="cell empty"></div> <div class="cell empty"></div> <div class="cell empty"></div> <div class="cell empty"></div> </div> </div> <script> const ROWS = 4; const COLS = 4; let board = []; function init() { for (let row = 0; row < ROWS; row++) { board[row] = []; for (let col = 0; col < COLS; col++) { board[row][col] = 0; } } } function getEmptyCells() { let cells = []; for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { if (board[row][col] === 0) { cells.push({row, col}); } } } return cells; } function generateNumber() { let cells = getEmptyCells(); if (cells.length > 0) { let {row, col} = cells[Math.floor(Math.random() * cells.length)]; board[row][col] = Math.random() < 0.9 ? 2 : 4; } } function updateView() { for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { let cell = document.querySelector(`.row:nth-child(${row + 1}) .cell:nth-child(${col + 1})`); cell.classList.remove("num2", "num4", "num8", "num16", "num32", "num64", "num128", "num256", "num512", "num1024", "num2048"); if (board[row][col] === 0) { cell.classList.add("empty"); cell.innerText = ""; } else { cell.classList.remove("empty"); cell.classList.add(`num${board[row][col]}`); cell.innerText = board[row][col]; } } } } function moveLeft() { let moved = false; for (let row = 0; row < ROWS; row++) { let prev = -1; for (let col = 0; col < COLS; col++) { if (board[row][col] !== 0) { if (prev > -1 && board[row][prev] === board[row][col]) { board[row][prev] *= 2; board[row][col] = 0; moved = true; } else { if (prev > -1) { board[row][prev + 1] = board[row][col]; board[row][col] = 0; moved = true; } else { prev = col; } } } } } return moved; } function moveRight() { let moved = false; for (let row = 0; row < ROWS; row++) { let prev = -1; for (let col = COLS - 1; col >= 0; col--) { if (board[row][col] !== 0) { if (prev > -1 && board[row][prev] === board[row][col]) { board[row][prev] *= 2; board[row][col] = 0; moved = true; } else { if (prev > -1) { board[row][prev - 1] = board[row][col]; board[row][col] = 0; moved = true; } else { prev = col; } } } } } return moved; } function moveUp() { let moved = false; for (let col = 0; col < COLS; col++) { let prev = -1; for (let row = 0; row < ROWS; row++) { if (board[row][col] !== 0) { if (prev > -1 && board[prev][col] === board[row][col]) { board[prev][col] *= 2; board[row][col] = 0; moved = true; } else { if (prev > -1) { board[prev + 1][col] = board[row][col]; board[row][col] = 0; moved = true; } else { prev = row; } } } } } return moved; } function moveDown() { let moved = false; for (let col = 0; col < COLS; col++) { let prev = -1; for (let row = ROWS - 1; row >= 0; row--) { if (board[row][col] !== 0) { if (prev > -1 && board[prev][col] === board[row][col]) { board[prev][col] *= 2; board[row][col] = 0; moved = true; } else { if (prev > -1) { board[prev - 1][col] = board[row][col]; board[row][col] = 0; moved = true; } else { prev = row; } } } } } return moved; } function gameover() { for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { if (board[row][col] === 0) { return false; } if (row > 0 && board[row][col] === board[row - 1][col]) { return false; } if (row < ROWS - 1 && board[row][col] === board[row + 1][col]) { return false; } if (col > 0 && board[row][col] === board[row][col - 1]) { return false; } if (col < COLS - 1 && board[row][col] === board[row][col + 1]) { return false; } } } return true; } function handleKeyDown(event) { let moved = false; switch (event.keyCode) { case 37: // left moved = moveLeft(); break; case 38: // up moved = moveUp(); break; case 39: // right moved = moveRight(); break; case 40: // down moved = moveDown(); break; } if (moved) { generateNumber(); updateView(); if (gameover()) { alert("Game over!"); } } } init(); generateNumber(); generateNumber(); updateView(); document.addEventListener("keydown", handleKeyDown); </script> </body> </html> ``` 这个代码使用了HTML、CSS和JavaScript来实现一个简单的2048游戏。其中，HTML用于定义游戏界面的布局，CSS用于定义游戏界面的样式，JavaScript则用于实现游戏的逻辑。游戏的主要逻辑包括初始化游戏、生成随机数、更新游戏界面、处理玩家输入、判断游戏是否结束等。通过这个示例，你可以了解到如何使用JavaScript+HTML+CSS来实现一个简单的小游戏。 ### 回答2： 2048是一款非常受欢迎的数字益智游戏，它的目标是通过合并相同数字的方块，最终达到数字2048。我们可以使用JavaScript、HTML5和CSS3来创建一个2048游戏。 首先，我们需要一个HTML文件来承载游戏。可以创建一个包含游戏容器和得分板的div元素，并使用CSS样式设置其样式。 接下来，在JavaScript文件中，我们需要实现游戏的逻辑。首先，我们要定义一个二维数组来表示游戏的方块。每个方块包含一个数字值和一个对应的CSS样式类。 接着，我们需要编写函数来实现游戏的核心功能。例如，可以编写一个函数来初始化游戏，用于在游戏开始时创建两个随机的方块。还可以编写函数来处理方块的合并操作，当两个相邻的方块具有相同的数字时，将它们合并为一个新的方块。还有一个函数用于处理用户的移动操作，例如按下上、下、左、右箭头键。 在样式方面，我们可以使用CSS3的动画和过渡效果来优化游戏的界面。例如，可以为方块的合并操作添加一个过渡效果，使游戏更加流畅和有趣。 最后，我们需要在HTML文件中包含JavaScript文件，并在页面加载时调用初始化函数，以启动游戏。 总结来说，使用JavaScript、HTML5和CSS3来编写一个2048游戏需要以下步骤：创建HTML文件来承载游戏，通过JavaScript实现游戏的逻辑和功能，使用CSS3的样式和动画来美化游戏界面。通过这些步骤，我们可以成功地创建一个简单并有趣的2048游戏。 ### 回答3： 2048游戏是一款数字益智类游戏，我们可以使用JavaScript、HTML5和CSS3来实现它。 首先，我们可以使用HTML5创建游戏的基本布局。可以使用<div>元素来表示游戏的方格，并使用CSS3对其进行样式设置，包括大小、背景颜色和边框等。 接下来，我们可以使用JavaScript编写游戏逻辑。可以使用一个二维数组来表示游戏的方格，通过监听用户键盘操作来实现方格的上下左右移动。在移动方格的过程中，需要判断两个相邻方格的数字是否相等，如果相等则合并它们，并更新得分。 除了移动方格，我们还需要在游戏过程中随机生成新的方格，并在合适的位置显示。使用JavaScript的Math.random()函数来生成一个随机数，然后根据随机数在空白的方格中显示新的数字。 在游戏过程中，我们还可以根据每个方格的数字大小来改变方格的颜色，并在数字超过2048时显示胜利界面。 最后，我们可以为游戏添加一些特效和动画效果，以增加游戏的趣味性。比如在方格合并时添加动画效果，或者在游戏结束时显示失败界面。 总之，使用JavaScript、HTML5和CSS3来实现2048游戏是完全可行的。通过合理的布局、逻辑和样式设置，我们可以实现一个功能完善、界面美观的2048游戏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奋斗的小壁虎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值