1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>求出数组中所有数字的和</title>
  6. <style>
  7. body{color:#999;font:12px/1.5 Tahoma;}
  8. #outer{width:500px;margin:0 auto;}
  9. #outer input{padding:3px;border:1px solid #ccc;font-family:inherit;width:220px;margin-right:10px;}
  10. .sum{font-size:30px;color:red;}
  11. </style>
  12. <script>
  13. window.onload = function ()
  14. {
  15.     var oBtn = document.getElementsByTagName("button")[0];
  16.     var oInput = document.getElementsByTagName("input")[0]
  17.     var oStrong = document.getElementsByTagName("strong")[0];
  18.     oInput.onkeyup = function ()
  19.     {
  20.         this.value = this.value.replace(/[^(\d)|(,)]/,"")
  21.     }
  22.     oBtn.onclick = function ()
  23.     {
  24.         var sum = 0;
  25.         var oInput = document.getElementsByTagName("input")[0].value.split(",");
  26.         for (var i in oInput)
  27.         {
  28.             sum += parseInt(oInput[i])
  29.         }
  30.         oStrong.innerHTML = sum
  31.     }
  32. }
  33. </script>
  34. </head>
  35. <body>
  36. <div id="outer">
  37.     <label><input type="text" value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15" /><span>输入数字求和，数字之间用半角","号分隔</span></label>
  38.     <p><button>求和</button></p>
  39.     <strong class="sum"></strong>
  40. </div>
  41. </body>
  42. </html>

弹出层效果

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>弹出层效果</title>
  6. <style>
  7. html,body{height:100%;overflow:hidden;}
  8. body,div,h2{margin:0;padding:0;}
  9. body{font:12px/1.5 Tahoma;}
  10. center{padding-top:10px;}
  11. button{cursor:pointer;}
  12. #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
  13. #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
  14. h2{font-size:12px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;}
  15. h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
  16. </style>
  17. <script>
  18. window.onload = function ()
  19. {
  20.     var oWin = document.getElementById("win");
  21.     var oLay = document.getElementById("overlay");
  22.     var oBtn = document.getElementsByTagName("button")[0];
  23.     var oClose = document.getElementById("close");
  24.     oBtn.onclick = function ()
  25.     {
  26.         oLay.style.display = "block";
  27.         oWin.style.display = "block"
  28.     };
  29.     oClose.onclick = function ()
  30.     {
  31.         oLay.style.display = "none";
  32.         oWin.style.display = "none"
  33.     }
  34. };
  35. </script>
  36. </head>
  37. <body>
  38. <div id="overlay"></div>
  39. <div id="win"><h2><span id="close">×</span></h2></div>
  40. <center><button>弹出层</button></center>
  41. </body>
  42. </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. android 跨进程通信

    转自:http://www.androidsdn.com/article/show/137 由于android系统中应用程序之间不能共享内存.因此,在不同应用程序之间交互数据(跨进程通讯)就稍微麻烦一 ...

  2. 插件安装：包管理器——Package Control

    首先,按CTRL+`,打开控制台   粘贴下面的代码,之后回车 如果是sublime3 ? 1 import urllib.request,os,hashlib; h = '7183a2d3e96f1 ...

  3. poj2728 最小比率生成树——01分数规划

    题目大意: 有n个村庄,村庄在不同坐标和海拔,现在要对所有村庄供水, 只要两个村庄之间有一条路即可,建造水管距离为坐标之间的欧几里德距离,费用为海拔之差, 现在要求方案使得费用与距离的比值最小,很显然 ...

  4. jquery验证前端页面

    一共三个页面 jquery.html文件(前端页面,jquery验证用户信息) jquerytest.php文件(后台处理页面) jquerydb.php文件(数据库) 数据表结构 jquery.ht ...

  5. UVA 11925:Generating Permutations(冒泡排序 Grade D)

    VJ题目链接 题意:n个数(n<300),是一个1~n的某个排列.有两种操作:操作1把前两个数换位置,操作2把第一个数移动到最后.问给出一个排列,问通过怎样的操作,能把1,2,3,...,n变到 ...

  6. Web常用方法

    1.返回一个json格式报文 /**     * 返回json格式字符串或普通字符串     *      * @param jsonString     */    protected void w ...

  7. #417 Div2 E (树上阶梯博弈)

    #417 Div2 E 题意 给出一颗苹果树,设定所有叶子节点的深度全是奇数或偶数,并且包括根在内的所有节点上都有若干个苹果. 两人进行游戏,每回合每个人可以做下列两种操作中的一种: 每个人可以吃掉某 ...

  8. Bluetooth篇 开发实例之八 匹配

    自己写的App匹配蓝牙设备,不需要通过系统设置去连接. 匹配和通信是两回事. 用过Android系统设置(Setting)的人都知道蓝牙搜索之后可以建立配对和解除配对,但是这两项功能的函数没有在SDK ...

  9. Android的数据存储方式概述

    数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 ...

  10. u-boot-2015.01在tq2440上的初步移植

    作者: 彭东林 邮箱: pengdonglin137@163.com QQ:   405728433 开发板:     tq2440 工具:       Win7 + VMware + Debian6 ...