<!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. clips apache配置虚拟主机

    >>单个虚拟主机 一个一个的配置 1.httpd.conf文件里 Include conf/extra/httpd-vhosts.conf //取消#注释 2.httpd-vhosts.c ...

  2. sql 查找死锁对象的存储过程

    USE [master] GO /****** Object: StoredProcedure [dbo].[sp_who_lock] Script Date: 05/12/2016 14:13:46 ...

  3. 生活大爆炸版锤子剪刀布（NOIP2014）（真·模拟）

    水!水!!水!!!(重要的事情说三遍..) 1分钟代码题.. 原题传送门 这题啊,手打BOOL判断,然后乱搞啊.. 这有什么难的.. 加个快读就能拿第一啦.. 膜9018上各位大佬们.. 下面贴代码 ...

  4. suse10与suse11连接Xmanager的配置

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://feidandelion.blog.51cto.com/1050439/42217 ...

  5. java的io操作(将字符串写入到txt文件中)

    import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java ...

  6. dbgprint_Mine 调试输出

    void DbgPrintf_Mine(char*pszFormat,...) { #ifdef _DEBUG char szbufFormat[0x1000]; char szBufFormat_G ...

  7. MVC5的坑

    事情是这样的,今天在写一个功能模块的时候,创建的方法,到controller里,死活为null 以前从没出现这种情况啊,但是区别是这个代码是多层跳转进来的,难道是页面跳转太多,还记得之前的model, ...

  8. Dell Inspiron 7520 安装Ubuntu 14.04 LTS

    我的电脑是Dell Inspiron 7520,之前用的Windows 7, 装了虚拟机,再在虚拟机里面装Ubuntu, 电脑一直卡顿,一怒之下,升级了内存,直接16G,然后,还是卡顿,CPU是i5的 ...

  9. codeforces-103B

    题目连接:http://codeforces.com/contest/103/problem/B B. Cthulhu time limit per test 2 seconds memory lim ...

  10. SQL注入漏洞原理

    系统中安全性是非常重要的,为了保证安全性很多解决方案被应用到系统中,比如架设防火墙防止数据库服务器直接暴露给外部访问者.使用数据库的授权机制防止未授权的用户访问数据库,这些解决方案可以很大程度上避免了 ...