<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>求出数组中所有数字的和</title>

<style>

body{color:#999;font:12px/1.5 Tahoma;}

#outer{width:500px;margin:0 auto;}

#outer input{padding:3px;border:1px solid #ccc;font-family:inherit;width:220px;margin-right:10px;}

.sum{font-size:30px;color:red;}

</style>

<script>

window.onload = function ()

{

    var oBtn = document.getElementsByTagName("button")[0];

    var oInput = document.getElementsByTagName("input")[0]

    var oStrong = document.getElementsByTagName("strong")[0];

    oInput.onkeyup = function ()

    {

        this.value = this.value.replace(/[^(\d)|(,)]/,"")

    }

    oBtn.onclick = function ()

    {

        var sum = 0;

        var oInput = document.getElementsByTagName("input")[0].value.split(",");

        for (var i in oInput)

        {

            sum += parseInt(oInput[i])

        }

        oStrong.innerHTML = sum

    }

}

</script>

</head>

<body>

<div id="outer">

    <label><input type="text" value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15" /><span>输入数字求和，数字之间用半角","号分隔</span></label>

    <p><button>求和</button></p>

    <strong class="sum"></strong>

</div>

</body>

</html>

弹出层效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>弹出层效果</title>

<style>

html,body{height:100%;overflow:hidden;}

body,div,h2{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

center{padding-top:10px;}

button{cursor:pointer;}

#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}

#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}

h2{font-size:12px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;}

h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}

</style>

<script>

window.onload = function ()

{

    var oWin = document.getElementById("win");

    var oLay = document.getElementById("overlay");

    var oBtn = document.getElementsByTagName("button")[0];

    var oClose = document.getElementById("close");

    oBtn.onclick = function ()

    {

        oLay.style.display = "block";

        oWin.style.display = "block"

    };

    oClose.onclick = function ()

    {

        oLay.style.display = "none";

        oWin.style.display = "none"

    }

};

</script>

</head>

<body>

<div id="overlay"></div>

<div id="win"><h2><span id="close">×</span></h2></div>

<center><button>弹出层</button></center>

</body>

</html>

求出数组中所有数字的和&&弹出层效果的更多相关文章

  1. 求一个数组中重复数字的个数，要求复杂度为O(n)

    给出代码 #include <stdio.h> #include <unistd.h> #include <iostream> #include <memor ...

  2. [LeetCode] Find All Numbers Disappeared in an Array 找出数组中所有消失的数字

    Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...

  3. 【Java】 剑指offer(1) 找出数组中重复的数字

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 在一个长度为n的数组里的所有数字都在0到n-1的范围内.数组中某些数字 ...

  4. 剑指offer.找出数组中重复的数字

    题目: 给定一个长度为 n 的整数数组 nums,数组中所有的数字都在 0∼n−1 的范围内.数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意一个重复的数 ...

  5. 《剑指offer》第三_一题（找出数组中重复的数字，可改变数组）

    // 面试题3(一):找出数组中重复的数字 // 题目:在一个长度为n的数组里的所有数字都在0到n-1的范围内.数组中某些数字是重复的,但不知道有几个数字重复了, // 也不知道每个数字重复了几次.请 ...

  6. 【剑指offer】找出数组中任意重复的数字（不修改数组），C++实现

    原创博文,转载请注明出处! # 题目 在一个长度为n+1的数组里的所有数字都在1~n的范围内,所以数组中至少有一个数字是重复的.请找出数组中任意一个重复的数字,但不能修改输入的数组.例如,如果输入长度 ...

  7. 黑马基础阶段测试题：定义一个int类型的数组，数组中元素为｛5，7，3，9，4｝。求出数组中的最小值，并判断最小值是否为偶数，如果是偶数则输出“最小值为偶数”，如果不是偶数则输出“最小值为奇数”。打印如下：

    package com.swift; import java.util.Arrays; public class ArrayTest { public static void main(String[ ...

  8. 【Offer】[3-1] 【找出数组中重复的数字】

    题目描述 思路 Java代码 代码链接 题目描述 在一个长度为n的数组里的所有数字都在0~n-1的范围内.数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次. 请找出数组中任 ...

  9. AcWing 13. 找出数组中重复的数字

    习题地址 https://www.acwing.com/solution/acwing/content/2919/. 题目描述给定一个长度为 n 的整数数组 nums,数组中所有的数字都在 0∼n−1 ...

随机推荐

  1. Registering RHEL6 Clients into spacewalk

    Before Starting(login to spacwalk server) 1.Create a base channel within Spacewalk (Channels > Ma ...

  2. Nodejs 网络爬虫（资讯爬虫） 案例

    1. superagent superagent 是一个流行的nodejs第三方模块,专注于处理服务端/客户端的http请求.在nodejs中,我们可以使用内置的http等模块来进行请求的发送.响应处 ...

  3. js date扩展方法

    /* File Created: 四月 28, 2015 */ //日期加上天数得到新的日期 //dateTemp 需要参加计算的日期,days要添加的天数,返回新的日期,日期格式:YYYY-MM-D ...

  4. Sqlite 修改字段的名称。

    Sqlite 不支持直接修改字段的名称. 我们可以使用别的方法来实现修改字段名. 1.修改原表的名称 ALTER TABLE table RENAME TO tableOld; 2.新建修改字段后的表 ...

  5. usb驱动---linux ACM驱动详解ACA【转】

    转自:http://blog.chinaunix.net/uid-9185047-id-3404684.html DTE提供或接收数据,连接到网络中的用户端机器,主要是计算机和终端设备.与此相对地,在 ...

  6. Android屏幕元素层次结构

    转自:http://blog.csdn.net/hpoi/article/details/4629717   Android屏幕元素层次结构 android.app.Activity 对于一个Andr ...

  7. Gson解析json数据的案例一

    转自:http://blog.csdn.net/l331258747/article/details/51547338: Android利用Gson解析嵌套多层的Json 首先先讲一个比较简单点的例子 ...

  8. UVA 1604：Cubic Eight-Puzzle（模拟，BFS Grade C）

    题意: 3*3方格,有一个是空的.其他的每个格子里有一个立方体.立方体最初上下白色,前后红色,左右蓝色.移动的方式为滚.给出初态空的位置,终态上面颜色情况,问最少多少步能到达.如果超过30步不能到达, ...

  9. hdu 畅通工程系列题目

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1232 并查集水. #include <stdio.h> #include <iost ...

  10. select 动态添加 获取 整理

    比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector" ...