<!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. 在 Tomcat 中配置 SSL/TLS 以支持 HTTPS

    本件详细介绍了如何通过几个简单步骤在 Tomcat 中配置 SSL/TLS .使用 JDK 生成自签名的证书,最终实现在应用中支持 HTTPS 协议. 生产密钥和证书 Tomcat 目前只能操作 JK ...

  2. hihoCoder 1015KMP

    #include <iostream> #include <algorithm> #include <stdio.h> #include <math.h> ...

  3. Java并发编程--CyclicBarrier

    概述 CyclicBarrier是一个同步工具类,它允许一组线程互相等待,直到到达某个公共屏障点.与CountDownLatch不同的是该barrier在释放等待线程后可以重用,所以称它为循环(Cyc ...

  4. poj 3744 Scout YYF 1 (概率DP+矩阵快速幂)

    F - Scout YYF I Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Sub ...

  5. [LeetCode] Sort List 排序 sort

    Sort a linked list in O(n log n) time using constant space complexity. Hide Tags Linked List Sort   ...

  6. IOS VLC编译步骤（包含移植和截图功能）

    http://blog.csdn.net/Kan_Crystal/article/details/40424673 一.下载源码 先到VLC官网将源码下载到本机,以下链接为官网编译操作地址:https ...

  7. 华为上机测试题（水仙花数升级版-java）

    PS:这题满分100,没有做对,大家帮忙看看问题在哪 /* * 题目:水仙花数升级版  * 描述: 水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1 ...

  8. 为何url地址不是直接发送到服务器，而是被编码后再发送

    首先,先说一下,关于为何必须将url地址,去编码后,再发送,是因为相关的协议规范:RFC 1738,定义了url地址中不能包含除了0-9的数字,大小写字母(a-zA-Z),短横线’-‘ 之外的字母.换 ...

  9. Linux下使用system()函数一定要谨慎

    转载自:http://my.oschina.net/renhc/blog/53580   linux尽量避免使用system. 曾经的曾经,被system()函数折磨过,之所以这样,是因为对syste ...

  10. python tips;matplotlib 显示中文

    import numpy as npimport matplotlib.pyplot as pltimport matplotlib as mpl mpl.rcParams['axes.unicode ...