<!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. C++封装随笔

    1接口的封装和设计思想入门 接口的封装和设计思想入门 第一套api函数 #ifndef _CLT_SOCKET_H__ #define _CLT_SOCKET_H__ //客户端初始化环境 int c ...

  2. Java并发容器--ConcurrentLinkedQueue

    概述 ConcurrentLinkedQueue是一种基于链表实现的无界非阻塞线程安全队列,遵循先入先出规则. 线程安全队列有两种实现方式: 阻塞方式:对入队和出队操作加锁.阻塞队列. 非阻塞方式:通 ...

  3. cms .net webform去服务器控件标签化 pagebase新版本

    这是最近在干一个webform的cms的时候用起来的,原来虽然做过很多技术,什么remoting,wcf,webservice,可是弄来弄去,最后也没个收藏的地儿,全都放在笔记本儿上了,可是人又懒地可 ...

  4. C# 技巧收藏

    IIS HTTP Error 500.21 - Internal Server Error 原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:开始- ...

  5. eclipse 导出burpsuite插件包含第三方lib包

    第一步:右键项目点击export: 2.选择Runable JAR file: 点击Finish后会爆出一个错误(Jar export finished with problems. See deta ...

  6. 在cocos2d中实现真正意思上的图片放大和缩小

    http://www.cnblogs.com/dinghing154/archive/2012/08/05/2623970.html 在编写程序的时候我们常常使用self.scale来让我们使用的图片 ...

  7. linux free 命令 ，讲解得比较好

    解释一下Linux上free命令的输出. 下面是free的运行结果,一共有4行.为了方便说明,我加上了列号.这样可以把free的输出看成一个二维数组FO(Free Output).例如: FO[2][ ...

  8. Java程序执行时间

    第一种是以毫秒为单位计算的.  Java代码  //伪代码 long startTime=System.currentTimeMillis();   //获取开始时间 doSomeThing();  ...

  9. 第三步：搭建JAVA项目

    创建一个JAVA项目,如图: 然后给项目起一个名字,直接点击完成. 下载lucene包解压后放到JDK安装后的lib文件夹里,如图: 首先要导入lucene包,对准项目名右击>构建路径>配 ...

  10. 16aspx源码要求安装.csproj类型怎么安装

    更改打开方式(不要双击打开),右键项目-打开方式选VS打开(应该会出现一个转换界面,转换下就好了).如果没有出那个界面我也没办法了