太阳能板最大面积js

该博客探讨了如何在航天器上安装太阳能板,其中面积受限于最短支柱的长度。文章通过题目解析、代码实现和优化过程,详细解释了如何使用JavaScript找到最大面积的方法,特别是利用双指针策略降低时间复杂度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

题目:

给航天器一侧加装长方形或正方形的太阳能板(图中的红色斜线区域),需要先安装两个支柱(图中的黑色竖条),再在支柱的中间部分固定太阳能板。但航天器不同位置的支柱长度不同,太阳能板的安装面积受限于最短一侧的那根支柱长度。如图:

输入描述

10,9,8,7,6,5,4,3,2,1

注释,支柱至少有两根,最多10000根,能支持的高度范围1~10^9的整数,柱子的高度是无序的,例子中的递减是巧合

输出描述

可以支持的最大太阳板面积:(10m高支柱和5m高支柱之间)

25

示例1

输入

10,9,8,7,6,5,4,3,2,1

输出

25

备注 10米高支柱和5米高支柱之间宽度为5,高度取小的支柱高度也是5

面积为25

任取其他两根支柱所能获得的面积都小于25 所以最大面积为25。

解题思路:

1.注意题目中黑色加粗字体,我们理解一下。也就是说对于两根柱子而言,即使一个是1,一个是9,那么这个太阳能板能安装的最大面积也只是取决于最短柱子的长度,因此我们在获取这两根柱子高度时,应该选择Math.min(arr[i],arr[j])来作为太阳能板的高度。

2.而太阳能板的宽度,则是两根柱子的索引差,用j-i即可。

3.用一个变量来保存最大的面积,通过不断比较更新最大面积。

 代码:

function maxSqr(arr) {
    let maxValue = 0 
    for(let i = 0 ; i <arr.length ; i++) {
        for(let j = 0; j < arr.length;j++) {
            maxValue = Math.max(maxValue,Math.min(arr[i],arr[j])*(j-i))
        }
    }
    return maxValue
}

console.log(maxSqr([10,9,8,7,6,5,4,3,2,1]))  //25

牛客网上的代码只需要处理一下输入输出即可。

代码优化:

上述代码时间复杂度较高,因此我们需要对代码进行优化。

可以使用双指针的解法,初始化双指针分列水槽左右两端,循环每轮将短板向内移动一格,并更新面积最大值,直到两指针相遇时跳出;即可获得最大面积。

因为每次移动短板,这个太阳板的最短板可能变大,下一个太阳板的面积可能增大。

而如果移动长板,则这个太阳板的短板不变或者变小,下一个太阳板的面积必然变小。

因此应该移动短板。

var maxArea = function(height) {
    let i = 0 , j = height.length - 1, res = 0;
    while(i<j) {
        res = height[i] < height[j] ? 
        Math.max(res,(j-i)*height[i++]) : 
        Math.max(res,(j-i)*height[j--])
    }
    return res
};

将上述 HTML 代码转换为 Vue 组件需要考虑以下几个方面: 1. **模板部分**:将 HTML 结构迁移到 Vue 模板中。 2. **样式部分**:可以使用 `<style>` 标签或外部 CSS 文件引入样式。 3. **脚本部分**:将 JavaScript 逻辑迁移到 Vue 方法中。 4. **数据绑定**:使用 Vue 的数据绑定功能管理动态数据。 以下是一个详细的 Vue 组件示例: ### `YanQing.vue` ```vue <template> <div id="app"> <header> <img src="images/网站LOGO.png" class="logo" alt="logo"> <button class="button6" @click="playAudio()"> <h1>欢迎来到北京延庆区</h1> </button> <div id="time">{{ currentTime }}</div> <nav> <ul> <li><router-link to="#overview">概述</router-link></li> <li><router-link to="#basic-info">基本信息</router-link></li> <li><router-link to="#history">历史</router-link></li> <li><router-link to="#attractions">景点</router-link></li> <li><router-link to="#food">美食</router-link></li> </ul> </nav> </header> <main> <section id="overview"> <div class="item"> <h2>概述</h2> <p>{{ overviewContent }}</p> </div> </section> <div id="carousel"> <img src="images/H1.png" title="延庆区地图"> <img src="images/H2.png" title="延庆区"> <video src="videos/h1.mp4" controls></video> </div> <section id="basic-info"> <div class="item"> <h2>基本信息</h2> <ul> <li v-for="(info, index) in basicInfo" :key="index">{{ info }}</li> </ul> </div> </section> <section id="history"> <div class="item"> <h2>历史</h2> <p>{{ historyContent }}</p> </div> </section> <section id="attractions"> <div class="item" v-for="(attraction, index) in attractions" :key="index"> <h2>{{ attraction.title }}</h2> <p>{{ attraction.content }}</p> <a :href="attraction.link" target="_blank">{{ attraction.title }}</a> <img v-for="image in attraction.images" :src="image.src" :alt="image.alt" :key="image.src"> </div> </section> <section id="food"> <div class="item"> <h2>美食</h2> <p>{{ foodContent }}</p> <img src="images/H5.png" title="延庆火勺"> <img src="images/H6.png" title="贺式酱猪脸"> <img src="images/H7.png" title="八八席"> </div> </section> <button @click="showMoreInfo"> <a href="https://baike.baidu.com/item/%E5%BB%B6%E5%BA%86%E5%8C%BA/3506295">了解更多信息</a> </button> <button id="goBack" @click="scrollToTop">返回顶部</button> <router-link to="AreaList.html" class="button">返回列表</router-link> </main> <footer> <p>© 2024 北京延庆欢迎你!</p> </footer> </div> </template> <script> export default { data() { return { currentTime: '', overviewContent: ` 延庆区,隶属北京市,为北京市郊区之一,地处北京市西北部,东邻怀柔区,南接昌平区,西与河北省怀来县接壤,北与河北省赤城县相邻,地处长城以北,山地多,海拔高,太阳辐射强,昼夜温差大,冬冷夏凉,地域总面积1995平方公里。截至2023年6月,延庆区辖3个街道、11个镇、4个乡。截至2023年末,延庆区常住人口34.3万人。延庆素有北京“夏都”之称,是北京市太阳能资源最丰富的地区。有妫河生态休闲走廊、官厅水库生态库滨带、北山生态休闲观光带和龙庆峡下游森林公园等10万余亩的四大生态景观走廊。2013年9月,北京延庆地质公园入选联合国教科文组织世界地质公园网络名录,被授予“中国延庆世界地质公园”称号。是第三批国家新型城镇化综合试点地区、国家知识产权试点城市、国家卫生城市(区)、第三批国家农产品质量安全县。延庆已发展成为北京市牡丹产业规模最大的区域。 `, basicInfo: [ '延庆区位于北京市西北部。区域地处东经115°44′-116°34′,北纬40°16′-40°47′,东与怀柔相邻,南与昌平相联,西面和北面与河北省怀来、赤城接壤。地域总面积1995平方公里,其中,山区面积占72.8%,平原面积占26.2%,水域面积占1%。', '延庆区北东南三面环山,西临官厅水库的延庆八达岭长城小盆地,即延怀盆地,延庆位于盆地东部,全境平均海拔500米左右。海坨山为境内最高峰,海拔2241米,也是北京市第二高峰。', '延庆区属大陆性季风气候,属温带与中温带、半干旱与半湿润带的过渡连带。气候冬冷夏凉,年平均气温8℃。最热月份气温比承德低0.8℃,是著名的避暑胜地。拥有105平方千米的地热带,具有丰富的浅层地热资源。年日照2800小时,是北京市太阳能资源最丰富的地区。延庆官厅风口70米高平均风速7米/秒以上,风力资源占全市的70%。', '延庆区地处永定河、潮白河水系上游,属独立水系。县内有Ⅳ级以上河流18条,其中III级河流2条(白河、妫水河),Ⅳ级河流16条,年流域总量1.9亿立方米。妫水河是全境最大的河流,流域面积1064.3平方千米。' ], historyContent: ` 《史记》中记载,黄帝与炎帝三战而后合,得其志于阪泉。考古发现约六、七千年前,延庆境内即有居民活动。春秋时期,延庆曾是山戎族活动地区,春秋晚期和战国初期地属燕国。秦统一全国后,始设上谷郡,置上兰、居庸县,今延庆属之。西汉,上谷郡领县15,其中夷舆县、居庸县均在本境。东汉,撤夷舆县,合为居庸县。北齐,废居庸并入怀戎县。唐初,怀戎属北燕州,贞观八年(634年)北燕州改名妫州,天宝年间,妫州改为妫州郡,今延庆属地始从怀戎县析出,设置为妫川县(以妫水名之)。唐末及辽金时,改为缙山县(以缙山名之)。元世祖至元初,缙山县属大都路奉圣州;元仁宗爱育黎拔力八达出生于香水园,其登基后,于元延祐三年(1316年),升缙山县为龙庆州。元灭明立,废州设隆镇卫,建文元年(1399年),改隆镇卫为隆庆卫。永乐十二年(公元1414年),复置隆庆州,直至隆庆元年(1567年),为避穆宗年号遂易为延庆州。清仍沿用延庆州。民国二年(1913年),全国废州改县,始称延庆县。民国时期,属察哈尔省。1952年,撤销察哈尔省后改属河北省张家口地区。1958年10月,延庆县划归北京市,成为首都西北门户。2015年11月,撤销延庆县,设立延庆区,政府驻地不变。2015年12月,延庆区挂牌。 `, attractions: [ { title: '八达岭长城', link: 'http://www.badaling.cn/', content: ` 八达岭长城位于军都山关沟古道北口。是中国古代伟大的防御工程万里长城的重要组成部分,是明长城的一个隘口。八达岭长城为居庸关的重要前哨,古称“居庸之险不在关而在八达岭”。明长城的八达岭段被称作“玉关天堑”,为明代居庸关八景之一。八达岭长城是明长城向游人开放最早的地段,八达岭景区以八达岭长城为主,兴建了八达岭饭店和由江泽民主席亲笔题名的中国长城博物馆等。全国文明风景旅游区示范点。1961年八达岭长城被国务院列为全国首批重点文物保护单位;1982年列为国家重点风景名胜区;1987年被联合国教科文组织列入“世界文化遗产”名录;2007年被评为世界“新七大奇迹之首”、国家首批“5A”级旅游景区。 `, images: [ { src: 'images/H4.png', alt: '八达岭长城' }, { src: 'images/H8.png', alt: '八达岭长城' }, { src: 'images/H9.png', alt: '八达岭长城' } ] }, { title: '中国延庆世界地质公园', link: 'http://www.globalgeopark.org.cn/parkintroduction/geoparks/china/11911.htm', content: ` 中国延庆世界地质公园规划面积620.38平方千米,包括千家店、龙庆峡、古崖居、八达岭4个园区,是以十几亿年前海相碳酸盐岩为物质基础,以1亿多年前燕山运动地质遗迹为核心,集构造、沉积、古生物、岩浆活动及北方岩溶地貌为一体的综合性地质公园。早在2001年就评为国家级地质公园。 `, images: [ { src: 'images/H10.png', alt: '中国延庆世界地质公园' }, { src: 'images/H11.png', alt: '中国延庆世界地质公园' }, { src: 'images/H12.png', alt: '中国延庆世界地质公园' } ] } ], foodContent: ` 延庆区的美食以农家菜为主,口味独特,营养丰富。这里的特色美食有延庆火勺、贺式酱猪脸、八八席等。 ` }; }, methods: { playAudio() { const audio = document.getElementById('myAudio'); audio.play(); }, showMoreInfo() { window.open('https://baike.baidu.com/item/%E5%BB%B6%E5%BA%86%E5%8C%BA/3506295', '_blank'); }, scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }, updateTime() { this.currentTime = new Date().toLocaleTimeString(); } }, created() { setInterval(this.updateTime, 1000); } }; </script> <style scoped> /* 引入外部样式表 */ @import url('./css/YanQingStyle.css'); /* 添加一些基本样式 */ #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } header { background-color: #f8f9fa; padding: 20px; border-bottom: 1px solid #ddd; } .logo { width: 100px; height: auto; } .button6 { background-color: #4CAF50; color: white; padding: 10px 20px; cursor: pointer; border: none; border-radius: 5px; } #time { margin-top: 10px; font-size: 18px; color: #555; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin-right: 10px; } nav ul li a { text-decoration: none; color: #333; font-weight: bold; } main { padding: 20px; } .item { margin-bottom: 20px; } button { margin: 10px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } </style> ``` ### 解释 1. **模板部分**: - 使用 Vue 的模板语法将 HTML 内容迁移到 `<template>` 标签中。 - 使用 `v-for` 循环渲染列表项。 - 使用 `v-bind` (`:`) 和 `v-on` (`@`) 进行属性绑定和事件处理。 2. **脚本部分**: - 在 `data` 函数中定义组件的数据属性。 - 定义方法 `playAudio`, `showMoreInfo`, `scrollToTop`, 和 `updateTime` 来处理页面逻辑。 - 在 `created` 生命周期钩子中启动定时器更新时间。 3. **样式部分**: - 使用 `<style scoped>` 标签引入外部样式表,并添加一些基本样式。 这样,你就将原始的 HTML 代码成功转换成了一个详细的 Vue 组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值