JavaScript定时器制作弹窗小广告

2024-09-28 14:12:51

本文实例为大家分享了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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js定时器实例分享

1. 设置定时器语法:setInterval(函数,时间) 注意: 函数书写时不能带括号 setInterval(fn,1000)//正确 setInterval(fn(),1000)//错误时间的最小设置不小于14ms 2. 清除定时器语法:clearInterval(所清除的定时器名称) 3. 实例探究 js部分 window.onload = function() { var timer = null; var num = 0; var i = 0; var arr=['red','
js抽奖实现随机抽奖代码效果

随机抽取,简单代码. 复制代码代码如下: <html> <title>随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/javascript"> var alldata = &q
javascript定时器取消定时器及优化方法

javascript定时器取消定时器及js定时器优化方法通常用的方法: 启动定时器: window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间,单位是毫秒取消定时器: clearInterval(Method); 那么问题来了.用 clearInterval(timerid);来清除,往往不能马上停止,用什么方法比较好解决? 优化方案如下 var timeout = false; //启动及关闭按钮 function time()
JavaScript-定时器0~9抽奖系统详解（代码）

具体代码如下: <html> <head> <title>定时器0~9抽奖系统</title> <meta charset="UTF-8" /> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script t
js简单抽奖代码

核心:js的Math对象和Array对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>random</title> <style> #awardListDom{width: 100%;} </style> </head> <body> <label
js实现日历与定时器

简单的日历,会根据系统日期自动调整对应的日期,每60秒切换一次名言.只要有想法,做出来还是可以与众不同的. 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .calendar { width: 300px; height: 36
JavaScript定时器制作弹窗小广告

本文实例为大家分享了js定时器制作弹窗广告的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } body { background: #940032; } #count
javascript+canvas制作九宫格小程序

js核心代码复制代码代码如下: /* *canvasid:html canvas标签id *imageid:html img 标签id *gridcountX:x轴图片分割个数 *gridcountY:y轴图片分割个数 *gridspace:宫格空隙 *offsetX:x*y宫格相对canvas(0,0)X坐标偏移量 **offsetX:x*y宫格相对canvas(0,0)Y坐标偏移量 *isanimat:是否启用动画显示 */ function ImageGrid(can
基于JavaScript如何制作遮罩层对话框

1.遮罩层其实就是一个覆盖全界面的半透明的DIV,并处理zIndex使他浮于其他元素之上,是用户不能点击下边的元素,或者说点击没有反应. 2.在遮罩层上方在弹出一个层,由于遮罩层挡住了其他所有元素,用户只能点击弹出层,制造出模式窗口的假象. 废话不多说了,直接给大家贴js代码了. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&quo
JavaScript常用的弹出广告及背投广告实现方法

本文实例讲述了JavaScript常用的弹出广告及背投广告实现方法.分享给大家供大家参考.具体分析如下: 弹出广告和背景广告在大网站用的比较多,也是站长的必备代码,本代码段中包括弹出窗口广告以及背投广告两种形式,根据自己的需要,你可以随意选择. 注:这类广告不建议大家用,大多浏览器都会把此类AD拦截,只为大家学习之用. 复制代码代码如下: <html> <head> <title>JavaScript常用的弹出广告及背投广告代码</title> </
深入探寻javascript定时器

javascript单线程 JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变. 队列任务单线程就意味着,所有任务需要排队,
使用jQuery实现动态添加小广告

览网站的时候,有些网站总是在右下角,左上角或者其他地方投放广告. 我用jQuery试着自己做了一个,代码如下,如有不对的地方请各位不吝赐教 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
纯JavaScript 实现flappy bird小游戏实例代码

前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它步骤1:页面布局,这儿就不多说了,页面内容如下:
基于JavaScript实现淘宝商品广告效果

本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码,供大家参考,具体内容如下 CSS部分: ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; } #ad .listL{ float: left; } #ad .listR{ f
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编
轻松解决JavaScript定时器越走越快的问题

解决JavaScript定时器越走越快的问题之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下. (setinterval)多次初始化使用js定时器(setinterval)首要的问题就是要记得清除,即调用(clearInterval)方法,由于没有使用定时器的经验,我一开始是没有清除定时器,程序每一次初始化的时候都调用一次定时器,之前的定时器实例没有被

JavaScript定时器制作弹窗小广告

相关推荐

随机推荐