JavaScript单击手机页面输入页面信息

最新推荐文章于 2024-06-07 09:18:52 发布
最新推荐文章于 2024-06-07 09:18:52 发布
阅读量246 收藏
点赞数 7
文章标签： javascript 智能手机 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74336209/article/details/138846506
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <ul class="longmenu clearfix" id="main">
        <li onclick="showInfo()"><a href="javascript:;">
                <div class="longimg">
                    <img src="images/pro2.jpg" alt="">
                </div>
                <div class="detail clearfix">
                    <p>vivo iQOO Z1 5G 6GB+128GB 星河银 天玑1000Plus旗舰芯片 144Hz竞速屏 44W</p>
                    <div class="more clearfix">
                        <div class="price">
                            <i>￥</i>
                            <span>2190</span>
                        </div>
                        <div class="plus">
                            <div class="discount">券</div>
                        </div>
                    </div>
                </div>

            </a></li>
        <li><a href="javascript:;">
                <div class="longimg">
                    <img src="images/pro1.jpg" alt="">
                </div>
                <div class="detail clearfix">
                    <p>vivo iQOO Neo3 5G 8GB+128GB 夜幕黑 高通骁龙865 144Hz竞速屏 立体双扬 44W</p>
                    <div class="more clearfix">
                        <div class="price">
                            <i>￥</i>
                            <span>2980.00</span>
                        </div>
                        <div class="plus">
                            <div class="discount">券</div>
                        </div>
                    </div>
                </div>
            </a></li>

        <li><a href="javascript:;">
                <div class="longimg">
                    <img src="images/pro3.jpg" alt="">
                </div>
                <div class="detail clearfix">
                    <p>Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待 活动页限量</p>
                    <div class="more clearfix">
                        <div class="price">
                            <i>￥</i>
                            <span>5999.0</span>
                        </div>
                        <div class="plus">
                            <div class="discount">券</div>
                        </div>
                    </div>
                </div>

            </a></li>
        <li><a href="javascript:;">
                <div class="longimg">
                    <img src="images/pro4.jpg" alt="">
                </div>
                <div class="detail clearfix">
                    <p>一加 OnePlus 8 Pro 5G旗舰 2K+120Hz 柔性屏 30W无线闪充 高通骁龙865</p>
                    <div class="more clearfix">
                        <div class="price">
                            <i>￥</i>
                            <span>5398.00</span>
                        </div>
                        <div class="plus">
                            <div class="discount">券</div>
                        </div>
                    </div>
                </div>
            </a></li>
    </ul>

    <p id="content"></p>
</body>

</html>

<script>

    var proFirstWidth, proFirstHeight , str='';
    //  获取元素样式的兼容性写法
    function getStyle(obj, attr) {
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
    }

    function showInfo() {
        // 获取第一个图片信息，并展示在<p id="content"></p>中
        var ul = document.getElementById("main");
        var img = ul.firstElementChild.firstElementChild.firstElementChild.firstElementChild;
        proFirstWidth = getStyle(img,"width");
        proFirstHeight =getStyle(img,"height");
        str += "产品图片的宽：" + proFirstWidth + "<br>产品图片的高：" + proFirstHeight;
        ul.nextElementSibling.innerHTML = str; 
    }

    


</script>

最终效果如下：

mmllo1
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript实现信息的显示和隐藏如注册页面
01-19
我们在写注册页面的时候，必填信息是可见的，可选信息是隐藏的，如果用户希望填写，可以单击“详细信息”。 代码如下: <!– 下面代码通过javascript实现信息的显示和隐藏 –> <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Insert title here</title> [removed] function $(idvalue){ return document.getElementById(idvalue); } function showtext(){ if($(
wee-mobile-input-zoom:用于在单击输入时禁用 iOS 页面缩放的 Wee 模块
06-01
Wee 2.x 的移动输入缩放 单击输入时禁用 iOS 页面缩放的 Wee 模块。 快速开始 这个模块是为制作的，并假设您已经开始使用 Wee。 要使用此模块，请在 Wee 的"modules"目录中创建一个名为mobile-input-zoom的目录，并将此存储库的内容放入该目录中。 就是这样。 只要您将此模块设置为自动加载，javascript 就会检测输入并防止 iOS 放大它。 执照 版权所有 2015 根据 Apache 许可，版本 2.0（“许可”）获得许可； 除非遵守许可，否则您不得使用此文件。 您可以在以下网址获取许可证副本 http://www.apache.org/licenses/LICENSE-2.0 除非适用法律要求或书面同意，否则根据许可分发的软件是按“原样”分发的，没有任何类型的明示或暗示的保证或条件。 请参阅许可证以了解管理许可证下的许可和限制的特定
Weather-App-JS:这是一个使用JavaScript和API构建的响应式天气应用程序页面
05-23
Weather-App-JS 这是一个使用JavaScript和API构建的响应式天气应用程序页面。 特征 如果用户接受，则通过获取用户位置来获取天气信息； 通过输入城市名称获取天气信息； 城市名称的自动填充功能； 通过单击温度数字，可在摄氏和华氏温度下获得温度 建于 JavaScript Node.js Webpack 巴别塔 布尔玛 SCSS 林特 现场演示 您可以点击此 入门 先决条件 Node.js 任何浏览器 要开始使用，请在终端上输入以下目录来保存此存储库： $ cd <directory> 克隆仓库代码： $ git clone git@github.com:brugobi/Weather-App-JS.git 安装依赖项： $ npm install 用法 启动服务器： $ npm run server 在浏览器中打开http://lo
stati18n:静态页面的简单国际化
05-24
stati18n v0.2 stati18n是用于管理静态页面国际化的工具。 它基于CSS的content属性，创建CSS数据文件。 要更改语言，基本脚本只需更改css包含的文件。 政治停止神经BreakDom。 仅一次Dom行更改（包括CSS）。 为什么很酷 对于静态网站 无需应用服务器（您可以将站点托管在github上） 您可以更改语言而无需刷新 优化的页面大小：仅在使用时下载数据，并自动加载CSS文件 优化的请求号 没有繁重的javascript计算 消息 ： 单击时仅更改一个DOM行：CSS类始终相同，我们仅更改CSS包含行（性能更好） CSS自动加载的一般化 自动检测浏览器语言 添加标题标签管理 添加输入值管理 在XML文件中CSS before和after属性之间进行选择 Cookie管理 代码重构 单击即可自动加载CSS文件 用Python重写PHP脚本 去做 ：
venmo-clone:React克隆Venmo登陆页面
04-30
文莫克隆 Venmo主页的克隆。 艾萨克·肖曼（Isaac Shoman） 描述 该项目是使用React复制Venmo主页（ ）的副本。 主要重点在于iphone / android图像，并以Venmo所没有的方式（能够喜欢和存储评论）向它们添加交互性。 组件树 我决定将状态添加到WelcomeImages组件，因为最终我希望用户能够单击android手机，输入文本并创建新的交易对象。 而WelcomeImages是Iphone和Android组件之间最低的共同祖先。 我在交易组件中添加了有关交易是否被喜欢的状态，因为那是唯一需要访问它的地方。 将状态添加到注释控件的方法相同。 由于它们都充当“显示/隐藏”布尔值，它们确定在每个组件中呈现的内容。 设置/安装要求 将存储库克隆到桌面 导航到终端中的目录 运行NPM安装 运行'npm run start' 已知错误 单击“注释”时，通用
使用JavaScript实现注册页面并验证
weixin_69420643的博客
09-21 5790
使用JavaScript实现注册页面并验证
html页面嵌入javascript脚本,在HTML中嵌入JavaScript脚本
weixin_32957761的博客
06-03 1779
JavaScript 必需嵌入到 HTML 文档，才能被浏览器解释和执行。将 JavaScript 脚本嵌入到 HTML 文档中有3种标准方法： 通过 标签嵌入；引入外部脚本；在 HTML 属性中直接嵌入。一. 通过标签嵌入通过 标签嵌入JavaScript代码时，必需将代码放在 和 标记对之间。【例1-2】通过标签嵌入JavaScript代码：通过标签嵌入document.write("...
通过JavaScript来实现页面间数据传递
2301_77405158的博客
04-14 2655
【代码】通过JavaScript来实现页面间数据传递。
JavaScript定义注册页面
m0_52348906的博客
11-20 4882
项目场景： 各文本框输入信息在失去焦点时严证，如果输入有误，在文本框后面提示错误信息，各文本框输入信息的具体要求见问题描述。 考察如下： 获取字符串类型的表单数据 使用字符串对象方法验证用户输入信息的合法性 表单提交时使用onsubmit事件触发验证函数 问题描述： (1)用户名是由英文字母和数字组成的4～16位字符，以字母开头。加载页面时提示相应信息如图所示。 (2)密码由4～10位字符组成，加载页面时提示相应信息，密码和确认密码必须一致。 (3)电子邮箱信息必须包含“@.
JavaScript实现jsp页面显示文本框内容到页面
m0_47747430的博客
10-16 3142
JavaScript实现jsp页面显示文本框内容到页面 实验目的：单击按钮获取文本框输入内容，再显示框显示。 1.通过myeclipse新建jsp项目 2.敲上以下代码： 显示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201016124108178.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4u
在页面中直接嵌入JavaScript代码
iteye_5722的博客
01-16 4126
一 &lt;script&gt;标记 在HTML文档中通过使用&lt;script&gt;&lt;/script&gt;标记将JavaScript脚本嵌入到其中，在HTML文档中可以使用多个&lt;script&gt;标记，每个&lt;script&gt;标记中可以包含多个JavaScript的代码集合。 script标记属性说明 属性 说明 language 设...
JavaScript的输入输出语句
m0_56329037的博客
05-15 7135
JavaScript的输入输出语句 今天为大家介绍JavaScript的输入输出语句，JavaScript可以以不同的方式在不同的地方“显示”数据。下面逐一为大家介绍下： JavaScript输入语句： JavaScript 使用window.prompt()可以接收用户的输入。 JavaScript输出语句： JavaScript输出分为以下四种格式， 1.使用window.alert()弹出警告框 (2)使用 document. write()方法将内容写到 HTML 文档中。另外也可以用 docume
html页面中加入评论功能,JavaScript实现简单评论功能
weixin_35747299的博客
05-31 5499
本文实例为大家分享了JavaScript实现简单评论功能的具体代码，供大家参考，具体内容如下body{/*background-image: url(../img/91R58PIC3n2_1024.jpg);*/}#div1{margin: auto;border: 1px beige solid;width: 512px;text-align: right;}ul{list-style-type...
JavaScript正则表达式实现注册信息校验
zhansan的博客
05-28 6150
Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配，只要字符串包含了正则表达式的内容就返回true 正则表达式 匹配字符串 Java中匹配结果 JavaScript中匹配结果 \d{3} a123b false true ^\d{3} 123b false true \d{3}$ a123 false true ^\d{3}$ 123 true true 注册信息校验 需求 在JS中使用正则表达
JS通过在页面的文本框输入信息，点击添加按钮将输入的信息渲染到页面上。
Lou__Lan的博客
11-12 1948
JS通过在页面的文本框输入信息，点击添加按钮将输入的信息渲染到页面上。
基于jeecgboot-vue3的Flowable流程-待办任务（一）
宁波阿成的博客
06-03 441
基于jeecgboot-vue3的Flowable流程-待办任务（一）
手写最小的 Agent 系统 — Tiny Agent
安静的软件工程师
06-03 736
手写最小的 Agent 系统 — Tiny Agent
Ruoyi-Vue-Plus 下载启动后菜单无法点击展开，
最新发布
06-07 135
1.框架下载后运行2.使用mock数据3.进入页面后无法点击菜单本以为是动态路由或者菜单逻辑出了问题，最后发现是websocket的问题。
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 827
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
js实现单击登录按钮且输入正确时跳转页面
06-08
好的，以下是一个实现单击登录按钮且输入正确时跳转页面的示例代码： HTML代码： ```html 用户名： <input type="text" id="username" name="username"><br> 密码： ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值