JavaScript定时器制作弹窗小广告


Posted in Javascript onFebruary 05, 2017

本文实例为大家分享了js定时器制作弹窗广告的具体代码,供大家参考,具体内容如下

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
 * {
  padding: 0;
  margin: 0;
 }
 li {
  list-style: none;
 }
 body {
  background: #940032;
 }

 #counter {
  width: 500px;
  height: 420px;
  background: #939;
  margin: 50px auto 0;
  position: relative;
 }

 #counter h2 {
  line-height: 42px;
  padding-left: 15px;
  font-size: 14px;
  font-family: arial;
  color: #ff3333;
 }

 #counter a {
  font-weight: normal;
  text-decoration: none;
  color: #ff3333;
 }

 #counter a:hover {
  text-decoration: underline;
 }

 #bg {
  width: 280px;
  height: 200px;
  border: 3px solid #680023;
  background: #990033;
  filter: alpha(opacity=80);
  opacity: 0.8;
  position: absolute;
  left: 50%;
  top: 115px;
  margin-left: -141px;
 }

 #counter_content {
  width: 250px;
  position: absolute;
  top: 130px;
  left: 130px;
  z-index: 1;
 }

 #counter_content h3 {
  margin-bottom: 10px;
 }

 #counter_content h3 input {
  border: none;
  width: 223px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background: url(img/ico.png) no-repeat;
  text-align: right;
  color: #333;
  font-size: 14px;
  font-weight: bold;
 }

 #counter_content div {
  width: 250px;
 }

 #counter_content input {
  width: 60px;
  height: 30px;
  line-height: 30px;
  float: left;
  background: url(img/ico.png) no-repeat -303px 0;
  text-align: center;
  color: #fff;
  cursor: pointer;
  margin: 0 1px 4px 0;
  border: 0;
 }

 #counter_content div > input:hover {
  background: url(img/ico.png) no-repeat -243px 0;
 }

 #counter p {
  width: 500px;
  position: absolute;
  bottom: 20px;
  left: 0;
  color: #ff3333;
  text-align: center;
  font-size: 12px;
 }
 </style>
</head>
<body>
<div id="counter">
 <h2>简易计算</h2>
 <div id="counter_content">
 <h3><input id="input1" type="text" value="0"/></h3>
 <div id="div1">
  <input type="button" value="7" onclick="kick('7')"/>
  <input type="button" value="8" onclick="kick('8')"/>
  <input type="button" value="9" onclick="kick('9')"/>
  <input type="button" value="+" onclick="kick('+')"/>
  <input type="button" value="4" onclick="kick('4')"/>
  <input type="button" value="5" onclick="kick('5')"/>
  <input type="button" value="6" onclick="kick('6')"/>
  <input type="button" value="-" onclick="kick('-')"/>
  <input type="button" value="1" onclick="kick('1')"/>
  <input type="button" value="2" onclick="kick('2')"/>
  <input type="button" value="3" onclick="kick('3')"/>
  <input type="button" value="*" onclick="kick('*')"/>
  <input type="button" value="0" onclick="kick('0')"/>
  <input type="button" value="C" onclick="kick('C')"/>
  <input type="button" value="=" onclick="kick('=')"/>
  <input type="button" value="/" onclick="kick('/')"/>
 </div>
 </div>
</div>
</body>
<script>
 var showInput = document.getElementById("input1");
 var isClear = false;
 var tempStr = "";
 var clacType = "";
 var isContinue = true;
 function kick(clickValue) {
 switch (clickValue) {
  case "=":
  if (tempStr != "" && clacType != "") {
   showInput.value = clac(tempStr, showInput.value, clacType);
   isContinue = false;
   clacType = "";
  }
  break;
  case "+":
  case "-":
  case "*":
  case "/":
  //如果预存的操作符不为空 表示表示连续操作
  if (clacType != "" && !isContinue) { //先执行计算
   tempStr = clac(tempStr, showInput.value, clacType);
   isClear = true;
   clacType = clickValue;
  } else {
   tempStr = showInput.value; //点击操作符之后 预存字符
   isClear = true;//表示点击了操作符
   clacType = clickValue;//预存操作符
  }
  isContinue = true;
  break;
  case "C":
  showInput.value = "0";
  isClear = false;
  tempStr = "";
  clacType = "";
  break;
  default://普通的数字按钮点击
  showInput.value = showInput.value == "0" ? "" : showInput.value;
  isContinue = false;
  if (isClear) {
   showInput.value = "";
   showInput.value += clickValue;
   isClear = false;
  } else {
   showInput.value += clickValue;
  }
  break;
 }
 }


 function clac(num1, num2, type) {
 switch (type) {
  case "+":
  return Number(num1) + Number(num2);
  case "-":
  return Number(num1) - Number(num2);
  case "*":
  return Number(num1) * Number(num2);
  case "/":
  return Number(num1) / Number(num2);
  default:
  break;
 }
 }
 </script>

效果图:

JavaScript定时器制作弹窗小广告

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS Map 和 List 的简单实现代码
Jul 08 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
谈谈JS中的!!
Dec 07 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
Node 代理访问的实现
Sep 19 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 #Javascript
flexslider.js实现移动端轮播
Feb 05 #Javascript
简单实现js悬浮导航效果
Feb 05 #Javascript
用js制作淘宝放大镜效果
Oct 28 #Javascript
js实现百度搜索提示框
Feb 05 #Javascript
jQuery.Form上传文件操作
Feb 05 #Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 #Javascript
You might like
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Javascript倒计时代码
2010/08/12 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
Element Input组件分析小结
2018/10/11 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python3 shelve模块的详解
2017/07/08 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python实现图片筛选程序
2018/10/24 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
企业承诺书怎么写
2014/05/24 职场文书
群教班子对照检查材料
2014/08/26 职场文书
公司离职证明样本
2014/09/13 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2016新党章学习心得体会
2016/01/15 职场文书