web复习(四)

JavaScript编程

1.计算圆的面积。

(1)表单中设置2个文本框、1个按钮、1个重置按钮,其中圆的面积文本框设置为只读;

(2)编写两个自定义函数,分别是计算圆的面积函数area(radius)、在页面上显示结果show()

,并在show()函数中调用area(radius)函数;

(3)输入完半径后,点击"计算圆的面积"按钮后,将计算结果显示在"圆的面积"文本框中;

(4)点击"重置"按钮后,将所有文本框清空;

(5)圆的面保留2位小数。

html 复制代码
<html>
    <head>
        <title>计算圆面积</title>
        <script type="text/javascript">
            function area(radius) {
                var circlearea = Math.PI*radius*radius;
                return circlearea;
            }
            function show() {
                var radius = document.getElementById("radius_text").value;
                document.getElementById("area_text").value = area(radius).toFixed(2);
            }
        </script>
    </head>
    <body>
        <h3>计算圆的面积</h3>
        <form method="post">
            圆的半径:<input type="text" name="radius_text" id="radius_text"><br>
            圆的面积:<input type="text" name="area_text" id="area_text" readonly><br>
            <input type="button" value="计算圆的面积" onclick="show();">
            <input type="reset">
        </form>
    </body>
</html>

2.页面布局

按如下要求实现"厂字型"页面布局效果。

(1)页面标题为"厂字型页面布局";

(2)页面布局采用主体水平分割成上、 中、下三个部分,比例为10%、80%、10%;

(3)中间部分垂直分割成左、右两部分,比例分别为25%、75%;

(4)假设每个子窗口显示的网页分别为top.html、left.html、right.html、bottom.html,在index.html文件中给每一个子窗口中指定显示的网页。

html 复制代码
<html>
    <head>
        <title>厂字型页面布局</title>
    </head>
   <frameset rows="10%,80%,*" bordercolor="#3300ff">
    <frame src="" name="top">
        <frameset cols="25%,*">
            <frame src="" name="left">
            <frame src="" name="right">    
        </frameset>
        <frame src="" name="bottom">
   </frameset>
</html>
相关推荐
F2E_Zhangmo21 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户214118326360237 分钟前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc1 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro4 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹4 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风4 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱4 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript