用HTML和JavaScript代码编写一个至少有3个框架的网页：

Posted 2023-05-03

1．上框架为广告和logo；左框架为导航框架，要求有不少于3个导航链接，链接的目标为主框架；所有页面的格式均要求由一个统一的外部CSS控制
2．导航链接之一是首页，页面中要求至少有一个动态页面对象（下列2者选1），该对象必须由外部的.js文件生成
1) 一个浮动图片广告，在整个主框架内随机漂浮，触壁回弹；鼠标移入广告停止飘动、移出广告继续飘动；单击图片时弹出广告页面，广告页面临时生成，不能事先做好。
2) 一个动态模拟时钟，鼠标移入钟面时，出现一个矩形指示牌，显示当天的日期和星期，鼠标移出时指示牌消失。
3．导航链接之二是一个用户注册页面，要求涵盖文本框、密码框、单选钮、复选框、下拉列表、文本域和提交按钮等对象，提交前必须对可能验证的字段 进行合法性验证；提交后将填写的注册资料在新窗体中完整、清晰地显示出来，供用户再次检查确认；如用户需要，可以返回修改所填写的资料；要求新窗口能在 10秒钟后自动关闭，并且动态显示“XX秒钟后自动关闭窗体”字样，同时也可以手动关闭窗体
4．导航链接之三是一个的图、文、表格混排的软件下载页面。制作并上传一个不大于100K的“download.rar”文件作为下载目标，在单击广告框架之前所有下载链接无效

参考技术A <table width="660" border="0" cellpadding="2" cellspacing="1" bgcolor="#ECECEC" style="text-align:center">
<tr style="background-color:#EAF8E6;color:#6EA358;">
<td width="128"><a href="http://money.duote.com/search2.php?uid=1339&so=网络聊天" target="_blank">网络聊天</a></td>
<td width="128"><a href="http://money.duote.com/search2.php?uid=1339&so=网页浏览" target="_blank">网页浏览</a></td>
<td width="128"><a href="http://money.duote.com/search2.php?uid=1339&so=视频播放" target="_blank">视频播放</a></td>
<td width="128"><a href="http://money.duote.com/search2.php?uid=1339&so=音频播放" target="_blank">音频播放</a></td>
<td width="128"><a href="http://money.duote.com/search2.php?uid=1339&so=系统设置" target="_blank">系统设置</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=腾讯QQ" target="_blank">腾讯QQ</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=傲游Maxthon" target="_blank">傲游Maxthon</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=暴风影音" target="_blank">暴风影音</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=Foobar" target="_blank">Foobar</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=优化大师" target="_blank">优化大师</a></td>
</tr>
<tr bgcolor="#F7F7F7" >
<td><a href="http://money.duote.com/search2.php?uid=1339&so=微软MSN" target="_blank">微软MSN</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=火狐Firefox" target="_blank">火狐Firefox</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=Kmplayer" target="_blank">Kmplayer</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=Winamp" target="_blank">Winamp</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=超级兔子" target="_blank">超级兔子</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=TM2008" target="_blank">TM2008</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=腾讯TT" target="_blank">腾讯TT</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=RealPlayer" target="_blank">RealPlayer</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=千千静听" target="_blank">千千静听</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=诺顿Ghost" target="_blank">诺顿Ghost</a></td>
</tr>
<tr style="background-color:#EAF8E6;color:#6EA358;">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=汉字输入" target="_blank">汉字输入</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=病毒防治" target="_blank">病毒防治</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=网络安全" target="_blank">网络安全</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=防疫木马" target="_blank">防疫木马</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=压缩解压" target="_blank">压缩解压</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=搜狗拼音" target="_blank">搜狗拼音</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=金山毒霸" target="_blank">金山毒霸</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=天网防火墙" target="_blank">天网防火墙</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=360安全卫士" target="_blank">360安全卫士</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=WinRAR" target="_blank">WinRAR</a></td>
</tr>
<tr bgcolor="#F7F7F7">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=紫光拼音" target="_blank">紫光拼音</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=瑞星杀毒" target="_blank">瑞星杀毒</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=瑞星防火墙" target="_blank">瑞星防火墙</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=瑞星卡卡" target="_blank">瑞星卡卡</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=WinZip" target="_blank">WinZip</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=极品五笔" target="_blank">极品五笔</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=卡巴斯基" target="_blank">卡巴斯基</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=江民防火墙" target="_blank">江民防火墙</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=win清理助手" target="_blank">win清理助手</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=7-zip" target="_blank">7-zip</a></td>
</tr>
<tr style="background-color:#EAF8E6;color:#6EA358;">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=网络共享" target="_blank">网络共享</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=下载工具" target="_blank">下载工具</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=图像处理" target="_blank">图像处理</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=邮件工具" target="_blank">邮件工具</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=光盘处理" target="_blank">光盘处理</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=BitComet" target="_blank">BitComet</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=网际快车" target="_blank">网际快车</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=ACDSee" target="_blank">ACDSee</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=FoxMail" target="_blank">FoxMail</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=Nero" target="_blank">Nero</a></td>
</tr>
<tr bgcolor="#F7F7F7">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=KuGoo" target="_blank">KuGoo</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=迅雷" target="_blank">迅雷下载</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=Photoshop" target="_blank">Photoshop</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=DreamMail" target="_blank">DreamMail</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=UltraISO" target="_blank">UltraISO</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><a href="http://money.duote.com/search2.php?uid=1339&so=电驴emule" target="_blank">电驴emule</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=IDM" target="_blank">IDM</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=XNview" target="_blank">XNview</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=KooMail" target="_blank">KooMail</a></td>
<td><a href="http://money.duote.com/search2.php?uid=1339&so=WinISO" target="_blank">WinISO</a></td>
</tr>
</table>本回答被提问者采纳

在 JavaScript 中，如何确保数组至少有一个特定元素，而其他元素满足另一个条件？

【中文标题】在 JavaScript 中，如何确保数组至少有一个特定元素，而其他元素满足另一个条件？

【英文标题】：In JavaScript how to make sure that array has at least one specific element and the others meet another condition?

【发布时间】：2020-12-16 18:47:16

【问题描述】：

给定一个包含一些状态字符串的数组， 我想验证数组是否至少包含一个sleeping 状态，然后验证其余状态是ok 还是sleeping。

所以一个有效的数组是['ok', 'sleeping', 'sleeping', 'ok']，一个无效的数组就是const states = ['ready', 'working','onBreak','sleeping', 'ok', 'sleeping']

到目前为止，我想出的是：

const validArray = ['ok', 'sleeping', 'sleeping', 'ok'];

const isvalid = validArray.some( x => x === 'sleeping')

if(isValid)
  const canDoStuff = validArray.some( x => !['ok','sleeping'].includes(x))
  if(canDoStuff)
    doStuff()  
  

理想情况下，我想在一个循环中验证这一点，而不是两个循环。

【问题讨论】：

在一个循环中执行它很奇怪。因为“如果睡眠存在”的测试一旦找到就可以终止，而“除了好的或睡眠之外的东西”的测试可能必须一直评估到最后

@Taplar 我没有看到使用单个循环有什么奇怪的地方。在最坏的情况下（所有条目都是“正常”或“睡眠”），无论如何您都必须扫描整个数组。只有遇到这两个值以外的值时，才能提前突破。无论您使用一个循环还是多个循环，情况都是如此。有关单循环解决方案的示例，请参阅 my answer。

【参考方案1】：

如果您想要最快的代码，请使用简单的for 循环：

'use strict';

function isValid( array ) 
    let sleeping = false;
    for( const item of array ) 
        if( item === 'sleeping' ) 
            sleeping = true;
         else if( item !== 'ok' ) 
            return false;
        
    
    return sleeping;


function test( array ) 
    console.log( isValid(array) ? 'Valid:' : 'Invalid:', array );


test( [ 'ok', 'sleeping', 'sleeping', 'ok' ] );
test( [ 'ready', 'working','onBreak','sleeping', 'ok', 'sleeping' ] );

这比其他答案建议的代码多一点，但它会比其中任何一个都快。

特别是，接受的答案使用两个循环，而不是一个。您不会直接看到循环，因为它们隐藏在 .includes() 和 .every() 调用中。

我并不是说这是对那段代码的批评——它非常干净和简单，我一直很喜欢。但是当性能很重要时，编写可让您将多个循环合二为一的老式代码会有所帮助。

当然，在性能可能很重要时进行基准测试总是明智的，因此我接受了@scunliffe 创建的测试（谢谢！）并添加了一个使用此 for 循环的测试：https://jsben.ch/vrzl1

如果您需要支持旧版本的 Internet Explorer，请使用数字 for 循环代替 for-of 循环，并使用 var 代替 let 和 const。

【讨论】：

我认为简单的 for 循环具有价值并且能够完全控制其中的测试，但是我认为 OP 正在考虑如果所有条目都是有效的数组 either i> ok or sleep... 并且至少有一个值是“sleeping”。

@scunliffe 我很确定这正是这段代码的作用。如果任何项目不是 'sleeping' 并且不是 'ok'，它会返回 false。如果所有项目都是“睡眠”或“正常”，则如果至少有一个项目“睡眠”，则返回 true，否则返回 false。你能指出逻辑中的错误，或者你有一个失败的测试用例吗？

你说得对，我把“！==”误读为“===”，你的代码没问题。

【参考方案2】：

您可以使用如下简单的 for 循环：

const validate = arr => 
  let foundSleeping = false;
  for (let str of arr) 
    if (!["sleeping", "ok"].includes(str)) return false;
    if (str === "sleeping") foundSleeping = true;
  
  
  return foundSleeping;
;


console.log(validate(['ok', 'sleeping', 'sleeping', 'ok']));
console.log(validate(['ready', 'working','onBreak','sleeping', 'ok', 'sleeping']));

【参考方案3】：

而不是.some 来检查是否有一个sleeping 项目，使用.includes。

但是，您的另一个 .some 也没有实现正确的逻辑； doStuff 只会在至少有一项不匹配的情况下运行。请改用.every，并检查每个是否匹配：

const validate = input => (
  input.includes('sleeping') &&
  input.every(x => ['ok', 'sleeping'].includes(x))
);

console.log(validate(['ok', 'sleeping', 'sleeping', 'ok']));
console.log(validate(['ready', 'working','onBreak','sleeping', 'ok', 'sleeping']));

【讨论】：

主要是为了咯咯笑...但是我尝试在每次检查之前/之后使用不同的数组内容测试包含检查的性能...有趣的是，不同的浏览器会找到一种或另一种表现更好的方法jsben.ch/8IwR1 - 我的一般想法是，如果您希望能够尽早退出，请先测试 every()，然后尝试包含但 YMMV。

@sgunliffe 感谢您创建了这个有趣的测试套件。不过，每种情况的性能都由console.log 调用决定。我在 jsben.ch/vrzl1 添加了一个新版本的测试，它删除了这些调用，并从我的答案中添加了 for 循环代码。不管有没有console.log，我确实注意到在同一个浏览器中从一次运行到另一次运行有相当多的变化。有时“包含优先”更快，有时“每个第一个”更快。在所有情况下，for 循环都比任何一个都快。